Nextjs File Based Routing System Complete Guide

Step 1: Setting Up Your Next.js Project

First, you need to create a new Next.js project. You can do this using npx (Node Package Runner), which is included with npm or Yarn.

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app
npm run dev   # Or if you're using Yarn, use `yarn dev`

This will create a new Next.js application named my-nextjs-app and start the development server.

Step 2: Understanding File-Based Routing

In Next.js, the filesystem is used to create routes. Whenever you add a file inside the pages directory, a new route is created. For example:

• Creating a page at pages/index.js will create a route /.
• Creating a page at pages/about.js will create a route /about.

Step 3: Creating Basic Pages

Let’s create some basic pages to understand how this routing works.

1. Home Page (pages/index.js)

   Open the pages/index.js file and modify it to look like this:

   import Link from 'next/link';
   
   export default function Home() {
     return (
       <div>
         <h1>Welcome to My Website</h1>
         <Link href="/about">
           <a>About Us</a>
         </Link>
       </div>
     );
   }
   

   This creates a simple home page with a link that directs users to the about page.

2. About Page (pages/about.js)

   Create a new file named about.js under the pages directory with the following content:

   export default function About() {
     return <h1>About Us</h1>;
   }
   

   Now when you navigate to http://localhost:3000/about, you’ll see the "About Us" heading.

Step 4: Navigating Between Routes

You can navigate between routes using the Link component provided by Next.js. The Link component ensures that links are preloaded in the background while they are hovered over or touched (in case of mobile devices). It also handles client-side transitions efficiently.

Here's an example of how to use Link in the About page to go back to the home page:

import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <Link href="/">
        <a>Go Back Home</a>
      </Link>
    </div>
  );
}

Step 5: Dynamic Routes

Sometimes, the route might have dynamic parts such as an ID or a slug. In Next.js, you can create these by adding square brackets ([]) around the filename for a segment that should be dynamic.

1. Creating a Dynamic Route (pages/products/[id].js)

   Create a new folder products inside pages and then create the file [id].js:

   import { useRouter } from 'next/router';
   
   export default function Product() {
     const router = useRouter();
     const { id } = router.query;
   
     return (
       <div>
         <h1>Product Page</h1>
         <p>Product ID: {id}</p>
       </div>
     );
   }
   

2. Navigating to a Dynamic Route

   Let’s update the Home page to include links for different products:

   import Link from 'next/link';
   
   export default function Home() {
     return (
       <div>
         <h1>Welcome to My Website</h1>
         <Link href="/about">
           <a>About Us</a>
         </Link>
         <ul>
           <li>
             <Link href="/products/1">
               <a>Product 1</a>
             </Link>
           </li>
           <li>
             <Link href="/products/2">
               <a>Product 2</a>
             </Link>
           </li>
         </ul>
       </div>
     );
   }
   

   Now, when you visit http://localhost:3000/products/1 or http://localhost:3000/products/2, the Product component will display the respective product ID.

Step 6: Nested Pages and Nested Layouts

Next.js also supports nesting and shared layouts. You can create subdirectories in the pages folder to organize your nested routes.

1. Creating Nested Pages (pages/products/list.js)

   Create another file list.js under the products directory:

   export default function ProductsList() {
     return <h1>List of Products</h1>;
   }
   

   Now you’ll have the route /products/list.

2. Adding Shared Layouts

   To share layouts among pages, you can use App.tsx or App.js. Here’s a simple example:

   • First, create app.js file in the pages directory:

   // pages/_app.js
   import '../styles/globals.css';
   
   function MyApp({ Component, pageProps }) {
     return (
       <div>
         <header>
           <h2>Shared Header</h2>
         </header>
         <main>
           <Component {...pageProps} />
         </main>
         <footer>
           <h2>Shared Footer</h2>
         </footer>
       </div>
     );
   }
   
   export default MyApp;
   

   This shared layout will be applied to all pages in your application.

Step 7: Index Routes in Nested Directories

You can also have index routes in nested directories to serve as the landing page for that directory.

1. Creating an Index Route for Products (pages/products/index.js)

   Add an index.js file to the products directory:

   // pages/products/index.js
   import Link from 'next/link';
   
   export default function Products() {
     return (
       <div>
         <h1>Products</h1>
         <Link href="/products/list">
           <a>See All Products</a>
         </Link>
         <Link href="/products/1">
           <a>Product 1</a>
         </Link>
       </div>
     );
   }
   

   Now visiting http://localhost:3000/products will land you on the Products page with links to various products.

Summary

With this guide, you should now have a good understanding of Next.js’ file-based routing system. The key takeaways are:

• Each file under the pages directory becomes a route.
• Dynamic segments like [id] allow for variable URLs.
• Nested folders under pages allow for organized and nested routes.
• The _app.js file can be used to create shared layouts across all pages.