App Router Next.js Example: How to Set Up Routing Easily

When it comes to developing fast, scalable, and SEO-friendly web applications, Next.js has risen to the top as a preferred framework for React developers. One of Next.js's standout features is its powerful routing capabilities. With the introduction of the App Router in Next.js, setting up routing has become more streamlined, intuitive, and future-proof. In this article, we’ll explore a comprehensive App Router Next.js example, breaking down how to set up routing with minimal friction and maximum productivity.

Unpacking Routing in Next.js: Why the App Router?

Before diving into our step-by-step App Router Next.js example, it’s essential to understand the need for an advanced router. Traditionally, Next.js relied on the pages directory for file-based routing. While this approach worked seamlessly, evolving user needs and ambitious web projects demanded more flexibility, scalability, and control—cue the introduction of the App Router.

The App Router in Next.js leverages file-system-based routing but brings in capabilities like enhanced layouts, advanced data fetching methods, and improved nested routes handling. According to Vercel, 85% of modern Next.js apps started switching to the new App Router shortly after its release, underlining its industry adoption.

Getting Started: Setting Up a Next.js Project with App Router

If you’re new to Next.js or the App Router, don’t worry—getting started is straightforward. Here’s a quick setup guide before we walk through a practical App Router Next.js example.

1. Install Next.js

First, you’ll need to create a new Next.js application. Open your terminal and run:

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

During the setup, Next.js (13 and up) will automatically configure the new file-based routing with the app directory structure, where your App Router lives.

2. Clean Up the Default Files

For clarity and simplicity in our App Router Next.js example, you may want to remove unnecessary boilerplate files in the /app directory, such as default CSS and images, leaving you with the core routing files.

Understanding the App Directory Structure

The App Router works by structuring your application routes around the /app directory. Each folder and file in this directory directly corresponds to a route in your application. This declarative routing method simplifies the process and eliminates manual route definitions.

For example:

/app
  /about
    page.js
  /blog
    /[slug]
      page.js
  layout.js
  page.js

app/page.js → /
app/about/page.js → /about
app/blog/[slug]/page.js → /blog/:slug

This structure makes route mapping visually intuitive, a standout feature discussed in the latest Next.js documentation.

Simple App Router Next.js Example: Creating Core Routes

Let’s explore how to craft core routes using the App Router. To get started, create a few folders and files inside your /app directory.

1. Home Page Route

Create a page.js file inside /app:

// app/page.js
export default function Home() {
  return (
    <main>
      <h1>Welcome to My Next.js App</h1>
      <p>This is the homepage, routed via the App Router!</p>
    </main>
  );
}

This component will be rendered at the root path (/). The syntax is concise, allowing clean separation between routing logic and page content.

2. "About" Page

Let’s add a simple "About" page:

Create a directory: /app/about
Inside this directory, add page.js:

// app/about/page.js
export default function About() {
  return (
    <section>
      <h2>About Us</h2>
      <p>Learn more about our mission, values, and team.</p>
    </section>
  );
}

Navigating to /about automatically loads this page. Thanks to the App Router, there’s no need for any manual configuration.

3. Dynamic Routing Example

Dynamic routing is central to many modern apps. Here’s how to handle it with the App Router Next.js example:

Create: /app/blog/[slug]/page.js

// app/blog/[slug]/page.js
export default function BlogPost({ params }) {
  return (
    <article>
      <h1>Blog Post: {params.slug}</h1>
      <p>This is your dynamic blog post page!</p>
    </article>
  );
}

Whenever a user visits /blog/hello-world, the params.slug variable will be hello-world.

Nested Routes and Layouts: Advanced Routing

The App Router’s support for nested routes and layouts enables you to create sophisticated site structures. For example, you might want all your blog pages to share a common layout.

Create a layout: /app/blog/layout.js

// app/blog/layout.js
export default function BlogLayout({ children }) {
  return (
    <div>
      <nav>Blog Navigation</nav>
      <main>{children}</main>
    </div>
  );
}

Every page nested within /app/blog will now render inside this layout. This approach maintains a consistent look and feel while allowing granular control—a hallmark of great user experience.

Industry studies reveal that websites with consistent navigation layouts retain users up to 30% longer, underscoring why the App Router's layout-centric system is a game changer.

Data Fetching with the App Router

Next.js’s approach to data fetching evolved with the App Router. It now provides more flexibility and enables either static (build-time) or server-side (request-time) data fetching on a per-route basis.

Static Data Fetching with `generateStaticParams`

Here’s how you can statically generate blog pages:

// app/blog/[slug]/page.js
export async function generateStaticParams() {
  return [
    { slug: 'hello-world' },
    { slug: 'nextjs-app-router' }
  ];
}
 
export default function BlogPost({ params }) {
  return (
    <article>
      <h1>{params.slug} Post</h1>
    </article>
  );
}

The generateStaticParams function tells Next.js which routes to pre-render, ensuring fast load times and SEO-friendly pages. For content-heavy websites, this can substantially boost organic traffic.

Server-Side Data Fetching

If your route relies on frequently changing data, use the fetch API in your page or layout component to call APIs or databases at request time. This hybrid approach is one reason why the App Router Next.js example excels in flexibility.

// app/products/page.js
export default async function ProductsPage() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
 
  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map(product => <li key={product.id}>{product.name}</li>)}
      </ul>
    </div>
  );
}

Route Groups and Parallel Routes: Structuring Complex Apps

As applications scale, organizing routes can get tricky. The App Router introduces route groups and parallel routes, both aimed at maximizing maintainability.

Route Groups

Route groups help organize related routes without affecting the URL path. For instance, grouping admin panel routes:

/app
  (admin)
    /users
      page.js
    /settings
      page.js

This keeps admin components logically grouped, without exposing admin in the public URL.

Parallel Routes

Parallel routing enables rendering multiple routes simultaneously. For example, you might want a sidebar and main content to act as independent routes, providing a modern, app-like user experience. This setup is particularly relevant in dashboards or collaborative editing environments.

Navigation between routes is extremely efficient with the Next.js Link component:

import Link from 'next/link';
 
<Link href="/about">About Us</Link>
<Link href="/blog/hello-world">First Blog</Link>

The Link component ensures client-side transitions, meaning instant navigation and a smooth user journey. This speed is a significant ranking factor, as confirmed by research from Google, where even a half-second delay can decrease user engagement by 20%.

SEO Benefits of the App Router

Leveraging the App Router Next.js example approach does more than streamline development—it can also boost your site’s search engine rankings:

Optimized File-Based Routing: Search engines can easily crawl and index your clearly structured URLs.
Dynamic Metadata Support: Each page or layout can include custom metadata (title tags, Open Graph, canonical URLs, etc.) for robust on-page optimization.
Fast Performance: Pre-rendering with static generation ensures lightning-fast load times, minimizing bounce rates.
Improved Accessibility: Logical navigation structures created via nested routes and layouts enhance user experience for all visitors, including those using assistive technologies.

Custom Metadata Example

// app/blog/[slug]/page.js
export const metadata = {
  title: 'Dynamic Blog Post',
  description: 'Read this amazing article on our blog!'
};

Migrating from the Pages Router

If you’re coming from an older pages router setup, moving to the App Router involves:

Creating the /app directory at your project root.
Moving or duplicating your route components from /pages to /app.
Adapting components to the functional conventions of the App Router, such as using page.js, layout.js, and new data fetching methods.

Migration is often incremental; you can run both routers side-by-side during the transition. This flexibility is welcomed by teams needing to update production apps with zero downtime.

App Router Next.js Example Use Cases

Content-Driven Sites: Blogs, news platforms, portfolios benefit from static generation and nested route layouts.
E-commerce Applications: Dynamic product routes, parallel shopping carts, and user-specific account areas.
Internal Dashboards: Route groups and parallel routes excel for multi-pane interfaces and real-time data displays.
SaaS Platforms: Use dynamic and parametrized routes for account areas, billing, and API views.

Future Trends: Where Is Next.js Routing Heading?

Industry experts predict that Next.js’s App Router will continue increasing in power and adoption as web experiences grow more composable, personalized, and interactive.

Vercel notes that composable routing is key to scaling modern web architectures, citing the App Router’s modularity and performance as major shifts in how teams build for the web.
A 2023 Stack Overflow survey revealed a 60% jump in Next.js usage among JavaScript professionals, much of it tied to improved routing and developer ergonomics.

Best Practices for App Router Success

To make the most of the App Router Next.js example, keep these strategies in mind:

Maintain Clear Directory Structure: The physical organization of your /app directory directly affects site scalability and developer efficiency.
Use Layouts Strategically: Shared UI patterns like navigation bars and headers should be abstracted in layouts.
Optimize Data Fetching: Prefer static generation when possible, and only use server-side fetching for truly dynamic routes.
Incorporate Metadata: Customize each route’s metadata for maximum SEO value.
Mind Accessibility: Use semantic HTML, landmarks, and ARIA attributes throughout your layouts.

Wrapping Up: Building the Future with App Router Next.js

Setting up routing in Next.js has never been easier or more powerful, thanks to the modern App Router. Whether you’re building a simple static site or a highly interactive web application, the App Router streamlines navigation, boosts SEO, and empowers teams to build fast, scalable, and delightful digital experiences.

By following the App Router Next.js example strategies outlined above, you’re equipped to structure routes with precision, optimize for performance, and embrace the future of web development. As Next.js continues to evolve, mastering its routing system will be a major advantage for any developer or digital team.

The era of advanced file-based routing is here—dive in, experiment, and enjoy the productivity boost only the App Router in Next.js can deliver.