Ecommerce Developers, Social Media Marketing, AI AutomationShopify & WooCommerce Stores · Performance Marketing · AI-Powered FunnelsEcommerce Developers, Social Media Marketing, AI Automation
Web Development
12.15.25

Next.js App Router for Beginners: Pages, Layouts, and Navigation

Published: December 15, 2025
Written by Sumeet Shroff
Next.js App Router for Beginners: Pages, Layouts, and Navigation
Table of Contents
  1. Introduction to Next.js App Router
  2. What is the Next.js App Router?
  3. Why Routing Matters in Modern Web Apps
  4. Key Differences: App Router vs. Pages Router
  5. What You Will Learn in This Tutorial
  6. Further Reading
  7. Setting Up Your Next.js Development Environment
  8. 1. Install Node.js and npm
  9. 2. Create a New Next.js App (Using the App Router)
  10. 3. Explore the Next.js App Directory Structure
  11. 4. Run the Development Server
  12. Quick Checklist
  13. Further Reading
  14. Understanding the Next.js App Directory Structure
  15. The Purpose of the App Directory
  16. Mapping File Structure to Routes
  17. Distinguishing Between Layout and Page Components
  18. Example: Minimal Root Layout and Page
  19. Navigating and Modifying the App Directory
  20. Micro-Project: Add an About Page
  21. Further Reading
  22. Creating Pages in Next.js
  23. How to Create New Pages in the App Directory
  24. The Role of page.js
  25. Example: Contact Page
  26. Static vs. Dynamic Pages
  27. Creating a Dynamic Route
  28. Organizing Pages: Best Practices
  29. Micro-Project: Build a Blog Index and Post Page
  30. Further Reading
  31. Introduction to Layouts in Next.js
  32. What Are Layouts in Next.js?
  33. Creating a Root Layout
  34. Creating Nested Layouts
  35. Layout Nesting Order
  36. Sharing UI Components Across Pages
  37. Applying Layouts to Organize Your App
  38. Micro-Project: Add a Sidebar to the Blog Section
  39. Further Reading
  40. Implementing Navigation in Next.js
  41. 1. Navigating with the Link Component
  42. Example: Creating a Basic Navigation Menu
  43. 2. Using the useRouter Hook for Programmatic Navigation
  44. 3. Building a Responsive Navigation Menu
  45. 4. Client-Side vs Server-Side Navigation
  46. Checklist: Next.js Navigation Essentials
  47. Further Reading
  48. Dynamic Routing in Next.js for Beginners
  49. 1. Creating Dynamic Routes Using [param] Syntax
  50. Example: Dynamic Blog Post Page
  51. 2. Fetching and Displaying Data Based on Route Parameters
  52. 3. Understanding Use Cases for Dynamic Routing
  53. 4. Building a Simple Dynamic Detail Page
  54. Checklist: Dynamic Routing
  55. Further Reading
  56. Comparing App Router and Pages Router in Next.js
  57. 1. Key Differences Between App Router and Pages Router
  58. Advantages of App Router
  59. When to Use Pages Router
  60. 2. Migration Tips and Considerations
  61. 3. Choosing the Right Router for Your Project
  62. Further Reading
  63. Best Practices and Common Pitfalls
  64. 1. File and Folder Organization
  65. 2. Navigation State Management
  66. 3. Optimizing Navigation for User Experience
  67. 4. Common Pitfalls and How to Avoid Them
  68. Troubleshooting Checklist
  69. Further Reading
  70. Case Study: Building a Simple Multi-Page Next.js App
  71. 1. Project Structure
  72. 2. Creating Core Pages
  73. 3. Navigation Menu
  74. 4. Adding Mock Data
  75. 5. Testing and Running Your App
  76. Checklist: Case Study
  77. Further Reading
  78. Conclusion and Next Steps
  79. Key Takeaways
  80. Frequently Asked Questions
  81. Where to Go Next
  82. Further Reading
  83. About Prateeksha Web Design

Introduction to Next.js App Router

Modern web applications rely heavily on routing—the ability for users to move between different pages or sections of your site without a full page reload. Next.js, a leading React framework, has revolutionized how routing works for React apps. In its latest versions, Next.js introduces the app router, a new system that replaces the older pages router for most use-cases.

The app router is designed to make routing in Next.js more powerful and flexible. If you're new to the concept, think of the app router as the backbone that defines how users navigate your application, how URLs correspond to content, and how layouts and pages are structured and rendered.

In this beginner-friendly tutorial, you'll get an in-depth introduction to the Next.js app router. We'll cover what it is, why it matters, and how it differs from the traditional pages router. By the end of this section, you'll understand the role of routing in modern web development and know what to expect as you dive deeper into Next.js.

What is the Next.js App Router?

The Next.js app router is a file-based routing system that leverages the /app directory to define your app's structure. Each folder and file in the app directory maps directly to a route in your application. Compared to the older /pages directory system (the pages router), the app router brings new features such as nested layouts, improved data fetching, and more granular control over UI composition.

Why Routing Matters in Modern Web Apps

Routing is crucial because it:

  • Maps URLs to specific content/components
  • Enables navigation without full refreshes (Single Page Application behavior)
  • Improves user experience and SEO
  • Allows for advanced features like dynamic routes and data fetching per page

Whether you're building a simple website or a complex dashboard, understanding routing is foundational to building with Next.js.

Key Differences: App Router vs. Pages Router

While both routers serve to map URLs to components, there are important distinctions:

  • Directory: App router uses the /app directory; pages router uses /pages.
  • Layouts: App router supports nested layouts natively; pages router does not.
  • Server Components: The app router enables React Server Components, allowing for more efficient data fetching.
  • Flexibility: App router allows more granular control of loading states, error handling, and UI composition.
Fact The app router was introduced in Next.js 13 and is now the recommended approach for all new Next.js projects.

What You Will Learn in This Tutorial

By following this guide, you will:

  • Set up a new Next.js project with the app router
  • Understand the app directory structure and how it maps to routes
  • Create pages and layouts for your app
  • Master navigation and dynamic routing
  • Learn best practices for organizing your Next.js app

If you're familiar with React but new to Next.js or its routing system, this tutorial is designed with you in mind!

Tip If you previously used the pages router, you can still use it in Next.js, but the app router is more powerful and future-proof.

Further Reading

Setting Up Your Next.js Development Environment

Before diving into building with the Next.js app router, it's essential to set up a reliable development environment. This ensures that you can follow along with all the examples and experiments in this tutorial.

We'll walk step by step through installing Node.js, creating a Next.js project, understanding the basic app directory structure, and running your app locally. Even if you have some experience with React or other frameworks, Next.js has its own conventions—so it's best to start fresh.

1. Install Node.js and npm

Next.js runs on top of Node.js. If you don't already have Node.js installed, follow these steps:

  1. Go to the Node.js Downloads page.

  2. Download the LTS (Long Term Support) version for your operating system.

  3. Run the installer and follow the prompts.

  4. Verify installation by opening your terminal and running:

    node -v
npm -v

    You should see version numbers for both.

2. Create a New Next.js App (Using the App Router)

With Node.js set up, you're ready to create your first Next.js project. Run the following command in your terminal:

npx create-next-app@latest my-nextjs-app
  • Replace my-nextjs-app with your preferred project name.
  • You will see prompts—accept the default options, but make sure to select 'Yes' when asked if you want to use the /app directory (this enables the app router).
Warning If you skip the `/app` directory option, your project will use the older pages router instead of the app router. Double-check before proceeding!

3. Explore the Next.js App Directory Structure

After create-next-app finishes, navigate to your project folder:

cd my-nextjs-app

Open the project in your favorite code editor (e.g., VS Code). You'll notice a structure like:

my-nextjs-app/
├── app/
│   ├── page.js
│   └── layout.js
├── public/
├── styles/
├── next.config.js
├── package.json
...
  • The app/ directory is the heart of the app router system.
  • page.js is your root page; layout.js is your root layout—more on these in upcoming sections.

4. Run the Development Server

Start the development server by running:

npm run dev

Your app will be available at http://localhost:3000. Open this URL in your browser—you should see the Next.js welcome page.

Quick Checklist

  • Node.js and npm are installed
  • Next.js project created with /app directory
  • Development server running on localhost

If all these are checked, you're ready for hands-on learning with the Next.js app router.

Further Reading

Understanding the Next.js App Directory Structure

Now that your Next.js project is running with the app router, it's time to understand how the app directory powers your site's routing and organization. The app directory introduces a new, highly intuitive way to map files and folders directly to application routes and layouts.

The Purpose of the App Directory

The /app directory is the central place for defining your app's routes, layouts, and UI structure. Each folder and file within /app has a special meaning:

  • Folders: Represent route segments (parts of the URL path)
  • page.js: Defines the React component for a specific route
  • layout.js: Defines the layout shared by all child routes within a folder
  • Other files: Special files like loading.js, error.js, and not-found.js handle loading states and errors

Mapping File Structure to Routes

The beauty of the app router is that your file system reflects your site's navigation:

app/
├── layout.js         // Root layout
├── page.js           // Home page (route: '/')
├── about/
│   └── page.js       // About page (route: '/about')
├── blog/
│   ├── layout.js     // Blog layout (optional)
│   ├── page.js       // Blog index (route: '/blog')
│   └── [slug]/
│       └── page.js   // Dynamic blog post (route: '/blog/:slug')
  • Any folder containing a page.js file defines a route.
  • Nested folders create nested routes and layouts.
  • Files named with square brackets [param] create dynamic routes (covered later).

Distinguishing Between Layout and Page Components

  • layout.js: Defines UI wrappers (headers, navigation bars, footers) that persist across child routes. You can nest layouts for sections of your site.
  • page.js: Defines the main content for a specific route.

Example: Minimal Root Layout and Page

app/layout.js:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

app/page.js:

export default function HomePage() {
  return <h1>Welcome to My Next.js App!</h1>;
}
  • Every route must have access to a layout component; at minimum, app/layout.js is required.

Navigating and Modifying the App Directory

  1. Add a New Page: Create a folder (e.g., about/) in app/, then add a page.js file inside it. This creates an /about route.
  2. Add a Nested Layout: Inside a folder, add a layout.js file to wrap all child routes under that segment.
  3. Modify Existing Pages: Edit the corresponding page.js or layout.js files.
  4. Organize with Folders: Use folders to group related routes and share layouts or components.
Tip Use clear folder and file names in the `app` directory—this directly affects your site's URLs and maintainability.

Micro-Project: Add an About Page

  1. In your app/ directory, create a new folder named about.
  2. Inside about/, create page.js with the following: 
    export default function AboutPage() {
  return <h2>About Us</h2>;
}
  3. Save the file and visit http://localhost:3000/about to see your new page.

Further Reading

Creating Pages in Next.js

Pages are fundamental in Next.js—they represent the individual screens or views users see as they navigate your site. With the app router, creating and organizing pages is intuitive and scalable, allowing both static and dynamic content with minimal boilerplate.

Let's walk through how to create new pages, how page.js works, and how to handle both static and dynamic routes effectively.

How to Create New Pages in the App Directory

  1. Static Pages: For a static route (e.g., /about):

    1. Inside app/, create a folder called about.
    2. Add a page.js file: 
      export default function AboutPage() {
  return (
    <main>
      <h2>About This App</h2>
      <p>This is a demo Next.js app.</p>
    </main>
  );
}
    3. Visit http://localhost:3000/about to see your page.

  2. Nested Pages: For a nested route (e.g., /blog/posts):

    1. Create folders blog and posts inside app/.
    2. Add a page.js inside posts/.
    3. This creates the /blog/posts route.

The Role of page.js

Every folder with a page.js file defines a unique route. The component exported from page.js is rendered when a user visits that URL.

  • Only one page.js per route segment is allowed.
  • page.js can export either a Client or Server Component (advanced usage).

Example: Contact Page

app/contact/page.js:

export default function ContactPage() {
  return (
    <section>
      <h2>Contact Us</h2>
      <p>Email: hello@example.com</p>
    </section>
  );
}

Static vs. Dynamic Pages

  • Static Pages: Fixed URLs, like /about, /contact, /blog.
  • Dynamic Pages: URLs that change based on parameters, like /blog/[slug].

Creating a Dynamic Route

  1. Inside app/blog/, create a folder named [slug].
  2. Inside [slug]/, add a page.js: 
    export default function BlogPost({ params }) {
  return <div>Viewing post: {params.slug}</div>;
}
    • When you visit /blog/hello-world, params.slug is hello-world.
Fact Dynamic routes in the app router use square brackets, similar to the pages router, but now access route parameters via the `params` prop.

Organizing Pages: Best Practices

  • Group related pages in folders.
  • Use nested layouts to avoid repeating UI code.
  • Keep page components focused on specific content for maintainability.

Micro-Project: Build a Blog Index and Post Page

  1. Create app/blog/page.js: 
    export default function BlogIndex() {
  return (
    <ul>
      <li>
        <a href="/blog/first-post">First Post</a>
      </li>
      <li>
        <a href="/blog/another-post">Another Post</a>
      </li>
    </ul>
  );
}
  2. Create app/blog/[slug]/page.js: 
    export default function BlogPost({ params }) {
  return <h3>Post: {params.slug}</h3>;
}
  3. Visit /blog and click the links to see your dynamic blog posts.

Further Reading

Introduction to Layouts in Next.js

A consistent layout is key to a great user experience. Imagine having to rewrite your header, footer, or navigation bar on every page—tedious and error-prone! The Next.js app router solves this with layouts, which let you define persistent UI wrappers shared across pages or entire sections of your app.

This section will show you how to create layouts, nest them, and use them to organize your app's UI efficiently.

What Are Layouts in Next.js?

A layout is a React component that wraps around your page content. In the app router, layouts are declared in layout.js files and apply to all nested routes and pages within the directory.

  • Root Layout: app/layout.js is required and wraps your entire app.
  • Nested Layouts: Any folder can have its own layout.js to provide unique structure for that route segment.

Creating a Root Layout

app/layout.js (already present in new projects):

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <h1>My Next.js Site</h1>
          {/* Navigation can go here */}
        </header>
        <main>{children}</main>
        <footer>
          <p>© {new Date().getFullYear()} My Next.js Site</p>
        </footer>
      </body>
    </html>
  );
}
  • All pages will render inside this layout, between the <header> and <footer>.

Creating Nested Layouts

Suppose you want a special layout for your blog section:

  1. In app/blog/, add a layout.js file: 
    export default function BlogLayout({ children }) {
  return (
    <section style={{ background: '#f0f0f0', padding: '1rem' }}>
      <nav>Blog Navigation</nav>
      {children}
    </section>
  );
}
  2. Now, all pages under /blog (like /blog, /blog/[slug]) use this layout in addition to the root layout.

Layout Nesting Order

  • Root Layout → Section Layout → Page
  • Each layout wraps its descendants, making UI composition easy and manageable.

Sharing UI Components Across Pages

Common shared components include:

  • Site headers and navigation menus
  • Footers
  • Sidebars
  • Context providers (for global state or themes)

Place these in your layout components to avoid repetition.

Warning Avoid managing page-specific state (like form inputs) at the layout level—layouts persist between navigations, which can create unexpected behavior.

Applying Layouts to Organize Your App

  1. Identify shared UI: What should be consistent across the app or a section?
  2. Create layout.js: In the relevant folders, add layout.js and move shared UI there.
  3. Compose layouts: Nest layouts as needed for global, section, or even sub-section design.
  4. Leverage layouts for theming: Use different layouts for different app areas (e.g., dashboard vs. marketing site).

Micro-Project: Add a Sidebar to the Blog Section

  1. In app/blog/layout.js: 
    export default function BlogLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', background: '#e0e0e0' }}>
        <ul>
          <li>
            <a href="/blog">All Posts</a>
          </li>
          <li>
            <a href="/blog/new">New Post</a>
          </li>
        </ul>
      </aside>
      <main style={{ flex: 1 }}>{children}</main>
    </div>
  );
}
  2. Visit any /blog route to see the sidebar in action.

Further Reading

In this part, you've learned the fundamentals of the Next.js app router: what it is, how to set up your environment, how the app directory works, how to create static and dynamic pages, and how to use layouts to build a consistent user interface. In later parts, you'll dive deeper into navigation, dynamic routing, and advanced UI composition using the app router.

Implementing Navigation in Next.js

Now that you have your pages and layouts set up from Part 1, it's time to make your Next.js app interactive with navigation. In this section, you'll learn how to connect your pages together using the built-in Link component, leverage the useRouter hook for programmatic navigation, and build a responsive navigation menu. You'll also get a clear understanding of how Next.js handles client-side versus server-side navigation—an essential concept for creating fast, modern web apps.

Navigation is at the core of every web application, and Next.js makes it both powerful and beginner-friendly. By the end of this section, you'll know how to let users move between different parts of your app smoothly and efficiently.

1. Navigating with the Link Component

The most common way to navigate between pages in Next.js is using the Link component, which provides client-side navigation out of the box. This means your page transitions are fast and don’t trigger a full page reload.

To use the Link component:

  1. Import Link from next/link at the top of your component file:

    import Link from 'next/link';

  2. Wrap your navigational elements (like text, buttons, or custom components) inside the Link component, setting the href prop to your target path.

    <nav>
  <Link href="/about">About</Link>
  <Link href="/blog">Blog</Link>
  <Link href="/contact">Contact</Link>
</nav>

    You can use any valid URL path, including dynamic routes (which we'll cover soon).

  3. Optionally, style your links using CSS modules, Tailwind CSS, or your preferred method.

Example: Creating a Basic Navigation Menu

Suppose your app has /, /about, and /blog pages. Add a navigation menu to your app/layout.js or a dedicated components/NavBar.js:

// app/components/NavBar.js
import Link from 'next/link';

export default function NavBar() {
  return (
    <nav style={{ display: 'flex', gap: '1rem', padding: '1rem' }}>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  );
}

Then include this component in your app/layout.js so it appears on every page:

import NavBar from './components/NavBar';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NavBar />
        {children}
      </body>
    </html>
  );
}
Fact The `Link` component enables client-side navigation, which means the browser won't perform a full page reload—making navigation nearly instant.

2. Using the useRouter Hook for Programmatic Navigation

Sometimes, you need to navigate users based on an action, such as after submitting a form or clicking a custom button. Next.js offers the useRouter hook for these situations.

To use useRouter:

  1. Import useRouter from next/navigation (in the app directory):

    import { useRouter } from 'next/navigation';

  2. Call useRouter() inside your component to access the router object.

  3. Use methods like router.push() to navigate programmatically:

    'use client'; // Required for client components
import { useRouter } from 'next/navigation';

export default function GoToBlogButton() {
  const router = useRouter();

  return <button onClick={() => router.push('/blog')}>Go to Blog</button>;
}

    This is especially useful for redirects after form submissions:

    const handleSubmit = async (e) => {
  e.preventDefault();
  // ...submit logic
  router.push('/thank-you');
};
Tip You must add `'use client';` at the top of files that use `useRouter`, since it's a client-side hook.

3. Building a Responsive Navigation Menu

A navigation bar should be user-friendly on all devices. Here’s a quick micro-project to make your menu responsive:

Micro-Project: Responsive NavBar

  1. Update your NavBar.js to use CSS for responsiveness. Example using CSS modules:

    // app/components/NavBar.js
import Link from 'next/link';
import styles from './NavBar.module.css';

export default function NavBar() {
  return (
    <nav className={styles.nav}>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  );
}

    And in NavBar.module.css:

    .nav {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .nav {
    flex-direction: column;
    gap: 0.5rem;
  }
}

  2. Save and reload your app. The navigation bar should now stack vertically on smaller screens.

4. Client-Side vs Server-Side Navigation

Client-side navigation happens when you use the Link component or router methods—Next.js intercepts the navigation and only fetches the content that's changed, keeping the app fast and smooth.

Server-side navigation (e.g., using window.location or a regular <a> tag) causes a full page reload and should be avoided for most internal navigation.

Warning Avoid using plain `` tags for internal links in Next.js apps, as this triggers a full page reload and loses app state.

Checklist: Next.js Navigation Essentials

  • Use Link for internal navigation
  • Use useRouter for programmatic navigation
  • Add navigation menus to your layout
  • Ensure your menu is accessible and responsive

Further Reading

Dynamic Routing in Next.js for Beginners

Modern web applications often need to display content based on dynamic data—think product pages, blog posts, or user profiles. Next.js makes this straightforward with dynamic routing. In this section, you'll learn how to use file and folder naming conventions in the app directory to set up dynamic routes, fetch and display data based on route parameters, and build your first dynamic detail page.

Dynamic routing is a cornerstone of the Next.js app router and unlocks powerful features for building scalable apps.

1. Creating Dynamic Routes Using [param] Syntax

Next.js uses square brackets in the folder or file name to denote dynamic segments. For example, to create a route like /blog/hello-nextjs, you'd use a folder named [slug] inside your app/blog directory.

Steps to set up a dynamic route:

  1. Inside your app directory, create a folder structure for your dynamic route.

    For a blog post detail page:

    • app/blog/[slug]/page.js

    Here, [slug] is a placeholder for any string (like hello-nextjs).

  2. Next.js will match any URL like /blog/anything-here to this dynamic route.

Example: Dynamic Blog Post Page

// app/blog/[slug]/page.js
export default function BlogPostPage({ params }) {
  // Access the dynamic route parameter (e.g., 'hello-nextjs')
  const { slug } = params;

  return (
    <div>
      <h1>Blog Post: {slug}</h1>
      <p>This is a dynamic page for the blog post "{slug}".</p>
    </div>
  );
}
Fact The `params` object is automatically injected into your page component by Next.js in the app directory.

2. Fetching and Displaying Data Based on Route Parameters

With dynamic routes, you often want to fetch content based on the URL parameter. In the app router, you can use async page components and fetch data directly inside your component.

Example: Fetching Blog Post Data

Suppose you have a mock data source:

// app/data/posts.js
export const posts = [
  {
    slug: 'hello-nextjs',
    title: 'Hello Next.js',
    content: 'Welcome to Next.js!',
  },
  {
    slug: 'dynamic-routing',
    title: 'Dynamic Routing',
    content: 'Next.js dynamic routes are powerful.',
  },
];

Update your [slug]/page.js to fetch and display the correct post:

// app/blog/[slug]/page.js
import { posts } from '../../data/posts';

export default function BlogPostPage({ params }) {
  const post = posts.find((p) => p.slug === params.slug);

  if (!post) {
    return <div>Post not found.</div>;
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}
Tip For real-world apps, replace mock data with a database fetch, an API call, or static generation using `generateStaticParams`.

3. Understanding Use Cases for Dynamic Routing

Dynamic routing is ideal for:

  • Blog posts or articles (/blog/[slug])
  • Product detail pages (/products/[id])
  • User profiles (/users/[username])
  • Any page where content varies by parameter

This approach keeps your file structure clean and scalable as your app grows.

4. Building a Simple Dynamic Detail Page

Micro-Project: Product Detail Page

  1. Create app/products/[id]/page.js.

  2. Add mock product data in app/products/data.js:

    export const products = [
  { id: '1', name: 'Widget', price: '$10' },
  { id: '2', name: 'Gadget', price: '$20' },
];

  3. Render product details based on the dynamic id:

    // app/products/[id]/page.js
import { products } from '../data';

export default function ProductDetail({ params }) {
  const product = products.find((p) => p.id === params.id);
  if (!product) return <div>Product not found.</div>;
  return (
    <div>
      <h2>{product.name}</h2>
      <p>Price: {product.price}</p>
    </div>
  );
}

Checklist: Dynamic Routing

  • Create folders/files using [param] syntax
  • Access route parameters via params prop
  • Fetch and render data based on parameters

Further Reading

Comparing App Router and Pages Router in Next.js

Next.js has evolved over time, introducing the new app router alongside the classic pages router. If you’re coming from older tutorials or maintaining legacy projects, it's important to understand the differences between these two approaches. In this section, you'll compare the app router with the pages router, discover when to use each, and get practical tips for migration.

1. Key Differences Between App Router and Pages Router

FeatureApp Router (/app)Pages Router (/pages)
Directoryapp/pages/
Routing MechanismFile/folder-basedFile-based
Layout SupportNested layoutsSingle _app.js layout
Data FetchingServer/client, asyncgetStaticProps, etc.
ComponentsServer by defaultClient by default
API Routesapp/api/pages/api/
Supported FeaturesReact Server ComponentsOnly Client Components

Advantages of App Router

  • More flexible layouts (per-page and nested layouts)
  • Improved data fetching (async/await, streaming)
  • Enhanced performance (server components)
  • Cleaner, more scalable file structure

When to Use Pages Router

  • Maintaining legacy codebases
  • Need for features not yet supported in the app router (edge cases)

2. Migration Tips and Considerations

If you have an existing Next.js project using the pages router, consider these steps to migrate:

  1. Incremental Adoption: You can have both pages/ and app/ directories during migration. Next.js will prioritize app/ for matching routes.
  2. Update Routing Logic: Move your files to the app/ directory, adjusting folder structure for dynamic routes.
  3. Convert Data Fetching: Replace getStaticProps/getServerSideProps with async page components or new data fetching patterns.
  4. Update Layouts: Move from _app.js/_document.js to the new layout system in app/.
  5. Test Thoroughly: Make sure all routes, data fetching, and layouts work as expected before removing the old pages/ directory.
Warning Some third-party libraries may not yet support React Server Components or the app router—check compatibility before migrating.

3. Choosing the Right Router for Your Project

  • Start new projects with the app router for access to the latest features and the future of Next.js.
  • Use the pages router only for legacy maintenance or if required by specific dependencies.

Further Reading

Best Practices and Common Pitfalls

Organizing your Next.js app efficiently, handling navigation state, and avoiding common mistakes are crucial for building scalable, maintainable projects. This section shares best practices for structuring your app directory, optimizing navigation, and troubleshooting common routing issues.

1. File and Folder Organization

A well-organized app structure makes your project easier to navigate and maintain:

  • Use semantic folder names: Reflect your app’s structure (e.g., app/blog, app/products, app/users).
  • Group related components: Place reusable UI elements in components/.
  • Keep dynamic routes tidy: Use [param] folders for dynamic content, and place data fetching logic close to the page that needs it.
  • Leverage nested layouts: Split your layout into logical parts (header, sidebar, main, etc.) and nest as needed.

2. Navigation State Management

  • Highlight active links: Help users know where they are by styling the current page’s link.

    // Example using usePathname (Next.js app router)
import { usePathname } from 'next/navigation';
import Link from 'next/link';

export default function NavBar() {
  const pathname = usePathname();
  return (
    <nav>
      <Link href="/" className={pathname === '/' ? 'active' : ''}>
        Home
      </Link>
      <Link href="/about" className={pathname === '/about' ? 'active' : ''}>
        About
      </Link>
    </nav>
  );
}

  • Avoid navigation loops: Ensure links do not point to the current page unnecessarily.

3. Optimizing Navigation for User Experience

  • Preload important routes: The Link component prefetches pages by default when visible in the viewport, making navigation even faster.
  • Use meaningful URLs: Keep URLs readable and descriptive for better SEO and user experience.
  • Test on multiple devices: Ensure your navigation works on desktop and mobile.
Tip Use the `prefetch={false}` prop on `Link` if you want to disable automatic prefetching for less important routes.

4. Common Pitfalls and How to Avoid Them

  • Using <a> instead of Link for internal navigation:
    • Always use Link for internal routing to avoid full page reloads.
  • Forgetting 'use client' in client components:
    • Any component using hooks like useRouter or usePathname must include 'use client'; at the top.
  • Mismatched dynamic route names:
    • Ensure your [param] folder and code references match exactly (e.g., [slug] in folder and params.slug in code).
  • Improper layout nesting:
    • Only nest layouts where needed; unnecessary nesting can complicate your app structure.
Fact The app router supports nested layouts and server components by default, giving you more control over rendering and performance.

Troubleshooting Checklist

  • Are all dynamic routes working as expected?
  • Is the navigation menu visible and responsive?
  • Do internal links use Link?
  • Are active links styled for clarity?
  • Are all client-side hooks/components marked with 'use client'?

Further Reading

Case Study: Building a Simple Multi-Page Next.js App

Now, let’s put theory into practice by building a small, multi-page Next.js app. You'll create pages, layouts, dynamic routes, and a navigation menu—tying together all the skills from earlier parts of this tutorial.

Project Goal: Build a basic blog site with a homepage, about page, blog listing, and dynamic blog post pages.

1. Project Structure

Set up your app directory as follows:

app/
├── layout.js
├── page.js      // Home
├── about/
│   └── page.js  // About
├── blog/
│   ├── page.js  // Blog index
│   └── [slug]/
│       └── page.js // Blog post detail
├── components/
│   └── NavBar.js
└── data/
    └── posts.js

2. Creating Core Pages

  • Home Page (app/page.js):

    export default function HomePage() {
  return <h1>Welcome to My Blog</h1>;
}

  • About Page (app/about/page.js):

    export default function AboutPage() {
  return <h1>About This Blog</h1>;
}

  • Blog Index (app/blog/page.js):

    import { posts } from '../data/posts';
import Link from 'next/link';

export default function BlogIndex() {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/blog/${post.slug}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

  • Blog Post Detail (app/blog/[slug]/page.js):

    import { posts } from '../../data/posts';

export default function BlogPost({ params }) {
  const post = posts.find((p) => p.slug === params.slug);
  if (!post) return <div>Post not found.</div>;
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

3. Navigation Menu

  • Navigation Bar (app/components/NavBar.js):

    import Link from 'next/link';

export default function NavBar() {
  return (
    <nav style={{ display: 'flex', gap: '1rem', padding: '1rem' }}>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  );
}

  • Add NavBar to Layout (app/layout.js):

    import NavBar from './components/NavBar';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NavBar />
        <main>{children}</main>
      </body>
    </html>
  );
}

4. Adding Mock Data

  • Blog Posts Data (app/data/posts.js): 
    export const posts = [
  {
    slug: 'hello-nextjs',
    title: 'Hello Next.js',
    content: 'Welcome to your first Next.js blog post!',
  },
  {
    slug: 'dynamic-routing',
    title: 'Dynamic Routing',
    content: 'This post explains dynamic routing in Next.js.',
  },
];

5. Testing and Running Your App

  1. Start your development server: npm run dev or yarn dev.
  2. Visit /, /about, /blog, and /blog/hello-nextjs in your browser.
  3. Test navigation links and dynamic blog post pages.
Tip Try adding a new post to `posts.js` and see it appear instantly in your blog index!

Checklist: Case Study

  • Multi-page navigation with Link
  • Nested layouts for consistent structure
  • Dynamic routing for blog posts
  • Clean, organized app directory

Further Reading

Conclusion and Next Steps

Congratulations! You've now learned the essentials of the Next.js app router for beginners: creating pages and layouts, implementing navigation, setting up dynamic routes, and organizing your app for scale. You also compared the new app router to the classic pages router and applied these concepts in a practical mini-project.

Key Takeaways

  • Use the app/ directory to take advantage of the modern Next.js app router
  • Implement navigation with the Link component and useRouter hook
  • Set up dynamic routes easily using [param] folder conventions
  • Structure your app for maintainability and scalability

Frequently Asked Questions

What is the app router in Next.js?

The app router is Next.js’s new file-based routing system that supports layouts, server components, and advanced data fetching patterns.

How do I create pages and layouts in Next.js?

Place page.js files in your app/ directory for pages, and use layout.js for layouts. See previous sections for detailed steps.

How can I navigate between pages?

Use the Link component for internal navigation and useRouter for programmatic navigation.

What is the difference between app router and pages router?

The app router supports nested layouts, server components, and modern data fetching, while the pages router is the older, client-component-only system.

Where to Go Next

  • Explore advanced features like API routes, middleware, and authentication
  • Learn about deployment and performance optimization
  • Join the Next.js community for support and inspiration

Further Reading

Your journey with Next.js is just beginning. Keep experimenting and building—there's a lot more to discover!

About Prateeksha Web Design

Prateeksha Web Design helps businesses turn tutorials like "Next.js App Router for Beginners: Pages, Layouts, and Navigation" into real-world results with custom websites, performance optimization, and automation. From strategy to implementation, our team supports you at every stage of your digital journey.

Chat with us now Contact us today.

Sumeet Shroff
Sumeet Shroff
Sumeet Shroff is a seasoned web developer and educator with a passion for simplifying complex JavaScript frameworks like Next.js for newcomers and professionals alike.

Related articles you might like

Loading latest articles…