In Next.js 15, folders are routes and files are pages. This convention-based approach eliminates the need for a separate routing configuration — your project structure is your route map.

File-Based Routing

Every folder inside app/ becomes a URL segment. A page.tsx file inside that folder makes it publicly accessible:

Dynamic Routes

Square brackets denote dynamic segments. The parameter value is passed to your component:

The generateStaticParams function tells Next.js which pages to pre-render at build time, enabling fully static output.

Layouts

Layouts wrap pages and persist across navigation. They're defined with layout.tsx and receive children as a prop:

Nested layouts compose naturally. A posts/layout.tsx wraps all post pages without affecting the rest of the site.

Parallel Routes

Parallel routes let you render multiple pages in the same layout simultaneously, using named slots:

The layout receives each slot as a prop:

Intercepted Routes

Intercepted routes display a route within the context of another route — perfect for modals. The (.) convention intercepts a sibling route:

When a user clicks a post link from the listing page, the intercepted route renders as a modal. If they navigate directly to the URL or refresh, they see the full page.

M-P-Model

Summary

Next.js routing is built on a few simple conventions that scale from a single-page site to a complex application. The file system does the heavy lifting — no router configuration, no route registration, just folders and files.