Next.js Routing: How Folder Structure Defines Pages, Layouts and Links

Next.js determines site routes from the folder structure within the app directory rather than from a manually written configuration file. A page.tsx file inside a folder becomes the visible page at that URL, and deleting the file causes the address to return a 404. Shared elements such as headers and footers can be placed in layout.tsx files, which wrap the pages beneath them and can nest. Bracketed folder names such as [slug] create dynamic segments, letting a single page file serve many URLs, like individual blog posts.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in