Next.js - File-system based routing

Next.js uses a router that relies on the file system, using folders to define routes that match with URL segments. By nesting folders, nested routes can be created. Any page added to the app directory is automatically accessible via its URL. The router follows a set of rules to ensure proper routing.

Since version 13, Next.js has introduced app directory, which enhances the routing and layout experience in Next.js and aligns with the future of React.

While the app directory in Next.js can be considered a potential replacement for the pages directory, it’s worth noting that the pages directory will continue to be supported for the foreseeable future. This means that developers who are already familiar with the pages directory can continue to use it, while also having the option to utilize the new directory if they so choose. Overall, this provides greater flexibility and options for developers working with Next.js.

Throughout this tutorial series, we’ll be utilizing the app directory to leverage the latest features and benefits of Next.js. This approach not only ensures that our tutorial content stays current, but also enables us to provide an optimal learning experience for our readers.

In Next.js, to enable public access to route segments, a special page.tsx file is used.

• Index Routes: A page is a user interface that is specific to a particular route. To define a page, you simply export a component from a page.tsx file. Additionally, if an page.tsx file is present within a folder, it will map to the root of that directory. For example:
  • app/page.tsx maps to /
  • app/admin/page.tsx maps to /admin
• Nested Routes: Defining a publicly accessible route in Next.js involves creating a page.tsx file and specifying the route within nested folders. This approach allows for a clear and organized hierarchy for your application's routes. For example:
  • app/admin/users/page.tsx maps to /admin/users
  • app/admin/settings/page.tsx maps to /admin/settings
  • app/admin/settings/about/page.tsx maps to /admin/settings/about
• Dynamic Routes: If you need to create routes based on dynamic data and don't know the exact segment names in advance, Next.js provides a solution with Dynamic Segments. These segments can be filled in either at request time or prerendered at build time, allowing for greater flexibility in your routing. Additionally, named parameters can be used to match specific URLs, further enabling dynamic routing in your application. By utilizing these features, you can create more dynamic and personalized experiences for your users, while also improving the overall functionality and usability of your application. For example:

  • Route	params	Mapped URL
    /app/user/[userId]/page.tsx	{ userId: '123' }	/user/123
    /app/post/[slug]/page.tsx	{ slug: 'hello-world' }	/post/hello-world
    /app/post/[...slug]/page.tsx	{ slug: ['tutorial', 'nextjs'] }	/post/tutorial/nextjs
    /app/shop/[[...slug]]/page.tsx	{}	/shop
    /app/shop/[[...slug]]/page.tsx	{ slug: ['a'] }	/shop/a
    /app/shop/[[...slug]]/page.tsx	{ slug: ['a', 'b'] }	/shop/a/b

Further detailed instructions on file-system based routing will be clarified in the upcoming chapters.