Next.js, the popular React framework for building server-rendered applications, continues to evolve with each new release. Version 14 marks a significant upgrade by introducing the App Router, which simplifies routing management and enhances the development experience. This article will walk you through the features, benefits, and practical use of the App Router in Next.js 14.

What is the App Router?

At its core, the App Router in Next.js 14 serves as a central mechanism for defining the application's navigation. It allows developers to create routes more efficiently by leveraging the file system as a routing API. Each file in the app directory acts as a route, and developers can define nested routes using folder structure. This convention-over-configuration approach reduces complexity and optimizes performance by enabling automatic code splitting.

Key Features of App Router

1. File-Based Routing: The App Router utilizes a file-based routing structure where the hierarchy of directories corresponds to the application's URL structure. For example, a file located at app/about/page.js will render at the /about route.

2. Nested Routing: Developers can create nested routes by organizing their files and folders accordingly. This helps in managing complex UIs that require different segments or sections to be rendered based on the URL.

3. Dynamic Routes: Using brackets ([]), developers can create dynamic routes that can accept parameters. For example, app/posts/[id]/page.js will match the URL /posts/1, allowing the application to render content based on the provided id.

4. Loading UI: The App Router supports loading states by allowing developers to provide a loading component that can be displayed while the desired route is being fetched.

5. Error Handling: With built-in error handling, the App Router helps in gracefully handling errors without disrupting the user experience. You can define custom error pages that will trigger based on HTTP error codes.

Example: Building a Simple Blog with App Router

To illustrate the capabilities of the App Router, let’s build a simple blog application. This application will have the following routes:

• Homepage (/)
• About page (/about)
• Blog posts (/posts/[id])

Setup

1. Create a New Next.js Project:

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

2. Create the App Directory:

In Next.js 14, we need to set up a new directory structure. Create a new folder called app at the project root:

mkdir app

3. Add the Home Page:

Create a file for the homepage within the app directory:

app/page.js:

export default function Home() {
  return (
    <main>
      <h1>Welcome to My Blog</h1>
      <nav>
        <a href="/about">About</a>
        <a href="/posts/1">Post 1</a>
        <a href="/posts/2">Post 2</a>
      </nav>
    </main>
  );
}

4. Create the About Page:

Next, create the About page:

app/about/page.js:

export default function About() {
  return (
    <div>
      <h1>About This Blog</h1>
      <p>This blog shares my thoughts and ideas.</p>
    </div>
  );
}

5. Create the Posts Directory:

Now, let’s create a dynamic route for our blog posts. Make a folder for posts and create files for individual blog entries:

mkdir app/posts
touch app/posts/[id]/page.js

6. Implement Dynamic Post Pages:

In app/posts/[id]/page.js, we’ll create a simple component that displays a blog post based on the id parameter:

export default function Post({ params }) {
  const { id } = params;

  return (
    <div>
      <h1>Blog Post {id}</h1>
      <p>This is the content of blog post {id}.</p>
      <a href="/">Back to Home</a>
    </div>
  );
}

7. Run the Application:

Finally, start your Next.js application to see the routing in action:

npm run dev

Visit http://localhost:3000 in your browser. You can navigate to the About page or individual blog posts. The application will dynamically render the relevant content based on your navigation.