Originally published on CodingCush .

In Next.js, routing is based on your folder structure instead of a configuration file: every folder inside the app directory becomes part of the URL, a file called page.tsx inside that folder becomes the page visitors see, and a file called layout.tsx wraps pages with shared parts such as a header and footer. You do not install a router or register routes — you simply create folders and files, and Next.js turns them into web addresses.

Routing Without a Router Library

If you have used plain React, this feels pleasantly strange. In a React single-page app you normally install something like React Router and then write route definitions by hand: this path shows this component, that path shows that one. Forget a route, and your page exists but nobody can reach it — a little like building a room and forgetting the door.

Next.js took the opposite approach, called file-system routing . The framework watches your app folder and builds the route table for you.…