Pages, Layouts, and Routes — How Next.js Organizes Your App
Master file-based routing, layouts, nested routes, and the special files that structure every Next.js application.
One of the first things you'll notice when AI generates a Next.js project is the folder structure. There's a pattern to how files are organized, and once you see it, you'll understand how any Next.js app works just by looking at its folders.
In this lesson, we'll break down that pattern so you can navigate, modify, and extend any Next.js project with confidence.
The Core Rule
The rule that governs everything in Next.js routing is simple:
The folder path inside app/ becomes the URL path in the browser.
If you have a file at src/app/about/page.tsx, it appears at yoursite.com/about. If you have a file at src/app/blog/posts/page.tsx, it appears at yoursite.com/blog/posts.
The only file name that matters for rendering a page is page.tsx. Everything else — the folder na
This lesson is part of the Guild Member curriculum. Plans start at $29/mo.