Routing
5 min read
Understanding the App Router
A practical tour of layouts, pages, and nested routes in modern Next.js.
By Sylla on
The App Router maps folders to URL segments. A page.tsx file makes a route public, while layout.tsx wraps every child route below it.
This structure keeps routing visible in the file tree. When you add app/blog/page.tsx, you create /blog. When you add app/blog/[slug]/page.tsx, you create a dynamic route for each post slug.
Server Components are the default, which means pages can fetch or prepare data before rendering without shipping extra JavaScript to the browser.