Next.js 14 Tutorial - 5 - Routing

Introduction

In this tutorial, we will explore routing in Next.js 14, a powerful feature that allows you to create dynamic and user-friendly web applications. Understanding routing is essential for building effective navigation within your application, and this guide will walk you through the necessary steps to implement it.

Step 1: Setting Up Your Next.js Project

Before diving into routing, ensure you have a Next.js project set up. If you haven't created one yet, follow these steps:

1. Open your terminal.
2. Run the following command to create a new Next.js app:

   npx create-next-app@latest my-next-app
   

3. Navigate into your project directory:

   cd my-next-app
   

4. Start the development server:

   npm run dev
   

5. Open your browser and go to http://localhost:3000 to see your app running.

Step 2: Understanding the Pages Directory

Next.js uses a special folder called pages for routing. Each JavaScript file in this directory corresponds to a route in your application.

• Create a new folder named pages in your project root if it doesn't exist.
• Inside the pages folder, create the following files to establish routes:
  • index.js for the home page.
  • about.js for an About page.
  • contact.js for a Contact page.

Step 3: Creating Basic Pages

Now, let’s create content for these pages. Here’s how to set up each file:

1. index.js

   export default function Home() {
       return <h1>Welcome to My Next.js App</h1>;
   }
   

2. about.js

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

3. contact.js

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

Step 4: Adding Links for Navigation

To navigate between pages, you need to use the Link component from Next.js. Here’s how to implement it:

1. Open index.js and add links to the other pages:

   import Link from 'next/link';
   
   export default function Home() {
       return (
           <div>
               <h1>Welcome to My Next.js App</h1>
               <nav>
                   <ul>
                       <li><Link href="/about">About</Link></li>
                       <li><Link href="/contact">Contact</Link></li>
                   </ul>
               </nav>
           </div>
       );
   }
   

2. Repeat this for about.js and contact.js to create links back to the home page.

Step 5: Dynamic Routing

Next.js also supports dynamic routing, which is useful for pages that require parameters. Here’s how to set it up:

1. Create a new folder called posts inside the pages directory.

2. Create a file named [id].js inside the posts folder:

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

3. To navigate to this dynamic route, add a link in any of your existing pages, for example:

   <Link href="/posts/1">Post 1</Link>
   

Step 6: Catch-All Routes

For scenarios where you want to catch multiple paths, use a catch-all route. Here's how:

1. Inside the pages directory, create a file named [...slug].js:

   export default function Slug() {
       return <h1>This is a catch-all route</h1>;
   }
   

2. This will match any route that doesn't have a specific file in the pages directory.

Conclusion

In this tutorial, we covered the basics of routing in Next.js 14, including setting up pages, creating dynamic routes, and implementing navigation. Understanding these concepts will help you build more complex applications.

As your next steps, consider exploring additional routing features such as API routes and nested routes to further enhance your Next.js applications. Happy coding!