What you will learn
- Create routes with folders and page files in the app directory
- Share headers and footers across pages with layouts
- Link between pages with the Link component and use dynamic route segments
Next.js is a React framework that adds routing, rendering and build tools. In the App Router, the folder structure inside the app directory defines your URLs. app/page.tsx is the home page, and app/menu/page.tsx becomes the /menu page. Each page file exports a React component as its default export. You start a new project with the create-next-app command.
A layout file wraps the pages beneath it. The root app/layout.tsx contains the <html> and <body> elements and is the natural place for a site header and footer. Layouts stay in place when people move between pages, so shared parts do not reload. Nested folders can have their own layouts, for example a sidebar that only appears in a blog section.
Use the Link component from next/link for links between your own pages, as in <Link href="/menu">Menu</Link>. It enables fast client-side navigation and prefetching. For pages that follow a pattern, such as one page per product, use a dynamic segment: a folder named [slug] creates routes such as /products/croissant, and the page receives the slug as a parameter.