Next.js is a powerful React framework, and with the evolution of its App Router, building modern web applications has become easier, more scalable, and more flexible than ever. If you feel confused about routing in Next.js, this post will walk you through the basics and advanced concepts of the App Router in a friendly, step-by-step manner.

What is the App Router?

The App Router is Next.js’s improved way to organize and handle routes within your web application. Routes determine which page or component shows up for different URLs your users visit. With the App Router, Next.js uses React’s latest features (like server components, Suspense, and Server Functions) and introduces a file-system based approach, which means your directory structure directly maps to your app’s URL structure.

Why Did Next.js Create the App Router?

Better structure: Organize pages, layouts, components, and logic together using colocation.
Server-centric rendering: By default, components are server-rendered for better performance, keeping your site fast.
New features: Nested layouts, improved error handling, loading states, advanced data fetching, and more.

Getting Started: Setting Up Next.js with App Router

**Step 1: Install Next.js

Open your terminal and run:**

npm create-next-app@latest

Make sure you have Node.js v18.x or above installed. During setup, choose to use App Router when prompted.

Step 2: Run Your App

cd your-app-name
npm run dev

Visit http://localhost:3000 in your browser!

Understanding the App Directory and Routing

The main folder for routing is app/.
Any directory inside app/ becomes part of your URL paths.
To create a page, add a page.js (or page.tsx) file inside a directory.

Example Structure:

app/
  ├─ page.js        (Shown at '/')
  ├─ about/
      ├─ page.js    (Shown at '/about')
  ├─ blog/
      ├─ page.js    (Shown at '/blog')

If you visit /about, it shows the content of about/page.js. Want a new route? Create a new folder and add page.js inside it.

Key App Router Features Explained Simply

1. Layouts

You can create reusable layouts for groups of pages.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

Nested layouts? Just add a layout.js file inside the subdirectory.

2. Error Handling

Add error.js wherever you want a custom error screen for that route.

// app/error.js
export default function Error() {
  return <h2>Something went wrong!</h2>
}

3. Loading State

Add a loading.js file to show a loading spinner while data fetches.

// app/loading.js
export default function Loading() {
  return <div>Loading...</div>;
}

4. Nested and Dynamic Routes

Nested routes: Create folders inside folders.
Dynamic routes: Name folder [id] for dynamic segments.

Example:

app/
  ├─ blog/
       ├─ [slug]/
            ├─ page.js  (Shown at /blog/any-slug)

This lets you fetch and show pages for any slug in /blog.

5. Route Handlers (API Routes)

Add a route.js file for API endpoints. No need for a separate api/ folder.

6. Server vs Client Components

By default, components are server-rendered.
For interactive UI, add "use client" at the top of your file to opt into a client component.

"use client"
export default function Button() {
  return <button>Click me!</button>
}

Children of client components are also client components.

Migrating from the Old Pages Router

In older Next.js apps, you would use the pages/ directory for routes. Moving to App Router improves scalability, project management, and brings in modern features. To migrate:

Update Next.js to the latest version.
Move your pages to app/.
Use new hooks from next/navigation like useRouter, usePathname, and useSearchParams (instead of next/router).
Update your ESLint, dependencies as guided in the official docs.

Best Practices and Tips

Organize logically: Use folders and colocation for cleaner code.
Use layouts for consistency: Shared headers/footers go in layout.js.
Handle errors gracefully: Use error.js for user-friendly messages.
Make interactive components client-only: Add "use client" where needed.
Use dynamic routes for detail pages: [id], [slug], etc.
Use route handlers for backend logic: API endpoints like /api/data.

What’s Next and Resources

Expect ongoing improvements: enhanced data fetching, better tooling, and performance boosts.
Dive deeper into official Next.js documentation for advanced guides and API references.
Explore interactive courses and tutorials provided by Next.js and the community.

Final Thoughts

Next.js’s App Router balances power and simplicity, making it easier to build scalable, modern web applications. By understanding its approach to folders, files, and React server/client components, you unlock a new, streamlined way to architect your projects.

Now you’re ready to start exploring and building real-world Next.js apps — happy coding!

The Complete Guide to Next.js App Router Explained for Beginners

Table of contents