Next.js App Router: Pages, Layouts, Server Components, and Data Fetching

React gives you the tools to build user interfaces.

But a production application usually needs much more:

routing
layouts
data fetching
authentication
metadata
error handling
loading states
performance optimization
server-side logic
deployment

This is where Next.js becomes useful.

Next.js is a React framework designed for building full-stack web applications. Its App Router provides a file-system-based routing model and integrates features such as layouts, Server Components, data fetching, streaming, metadata, and more.

oaicite

Quick answer: In the Next.js App Router, folders define route segments, page.tsx creates accessible pages, layout.tsx creates shared UI, Server Components are the default, and Client Components are used when browser-side interactivity is required.

Next.js App Router at a Glance

Feature	Purpose
`app/`	Main App Router directory
`page.tsx`	Creates a route page
`layout.tsx`	Shared UI around pages
`[id]`	Dynamic route segment
`loading.tsx`	Loading UI
`error.tsx`	Route-level error UI
`not-found.tsx`	Not-found UI
Server Component	Server-rendered component by default
Client Component	Interactive browser component
`Link`	Client-side navigation
Metadata	SEO and social metadata

What Is Next.js?

Next.js is built on React.

React handles the component layer.

Next.js adds application-level capabilities around it.

Think of the relationship like this:

Diagram / Architecture

Next.js can help you build complete applications rather than only individual UI components.

Why Use Next.js?

A React application can be built from many separate tools.

You may need to choose solutions for:

text

Routing
Data Fetching
Rendering
Code Splitting
SEO
Metadata
Server Logic
Error Handling
Deployment

Next.js provides conventions and built-in capabilities for many of these concerns.

The current Next.js documentation describes the framework as a way to build interactive, dynamic, and fast React applications while handling lower-level tooling for you.

oaicite

App Router vs Pages Router

Next.js currently supports two routing systems:

App Router
Pages Router

The App Router is the newer routing model and supports newer React features such as Server Components. The Pages Router remains supported.

oaicite

For new applications, this guide focuses on the App Router.

Creating a Next.js Application

A common way to start a new application is:

bash

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

Then:

bash

cd my-next-app

Start the development server:

bash

npm run dev

Open:

text

http://localhost:3000

The official Next.js learning material currently uses create-next-app to bootstrap applications and also documents pnpm as a supported package-manager workflow.

oaicite

Basic Next.js Project Structure

A typical App Router project might look like:

text

my-next-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
├── package.json
├── next.config.ts
├── tsconfig.json
└── ...

The important directory is:

text

app/

This is where your routes and layouts are commonly defined.

How File-System Routing Works

Next.js uses folders and files to define routes.

Suppose you have:

text

app/
├── page.tsx
├── about/
│   └── page.tsx
└── contact/
    └── page.tsx

The resulting routes are:

text

/ 
/about
/contact

The official App Router tutorial uses folders to create route segments and page.tsx files to make those routes accessible.

oaicite

What Is page.tsx?

A page.tsx file represents the UI for a route.

For example:

text

app/
└── about/
    └── page.tsx

Content:

tsx

export default function AboutPage() {
  return (
    <main>
      <h1>About</h1>
      <p>Welcome to our application.</p>
    </main>
  );
}

The page becomes available at:

text

/about

What Is layout.tsx?

A layout provides shared UI around pages.

For example:

text

app/
├── layout.tsx
├── page.tsx
└── dashboard/
    ├── layout.tsx
    └── page.tsx

The root layout can contain:

HTML structure
body
navigation
providers
shared UI
metadata

A nested dashboard layout can contain:

sidebar
dashboard navigation
shared dashboard structure

Next.js uses layouts to share UI between multiple pages.

oaicite

Root Layout

A basic root layout looks like:

tsx

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

The root layout is required in an App Router application.

Nested Layouts

Suppose you have:

text

app/
├── layout.tsx
└── dashboard/
    ├── layout.tsx
    ├── page.tsx
    └── settings/
        └── page.tsx

The structure becomes:

Diagram / Architecture

The dashboard layout can remain around multiple dashboard routes.

This is particularly useful for applications with:

text

Dashboard
├── Overview
├── Users
├── Projects
├── Settings
└── Reports

Dynamic Routes

Sometimes you don't know the route value ahead of time.

For example:

text

/products/123
/products/456
/products/789

You can create:

text

app/
└── products/
    └── [id]/
        └── page.tsx

The [id] segment is dynamic.

A page can receive the route parameters and use them to load the appropriate data.

Example:

tsx

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  return (
    <main>
      <h1>Product {id}</h1>
    </main>
  );
}

Dynamic segments are one of the core routing patterns in the App Router.

Nested Dynamic Routes

You can combine static and dynamic segments.

text

app/
└── blog/
    └── [slug]/
        └── page.tsx

This can create URLs such as:

text

/blog/react-state-management
/blog/nextjs-routing
/blog/typescript-generics

This pattern is particularly useful for:

blogs
products
jobs
documentation
profiles
learning resources

Route Groups

Sometimes you want to organize routes without adding a URL segment.

You can use parentheses:

text

app/
├── (marketing)/
│   ├── about/
│   └── pricing/
└── (dashboard)/
    ├── dashboard/
    └── settings/

The group name does not become part of the URL.

For example:

text

about/

can still produce:

text

/about

Route groups can help organize larger applications.

For internal navigation, Next.js provides the Link component.

tsx

import Link from "next/link";

export default function Navigation() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/projects">Projects</Link>
    </nav>
  );
}

The official Next.js learning material recommends Link for navigation and explains that Next.js can optimize navigation through route-level code splitting and prefetching.

oaicite

Link vs HTML Anchor

You can still use:

html

<a href="/about">About</a>

But for internal Next.js navigation, prefer:

tsx

<Link href="/about">
  About
</Link>

This lets Next.js handle navigation using its routing system.

External websites can still use normal links:

tsx

<a
  href="https://example.com"
  target="_blank"
  rel="noreferrer"
>
  External Website
</a>

Server Components

One of the most important concepts in the App Router is Server Components.

Components in the App Router are Server Components by default unless you explicitly opt into client-side behavior.

oaicite

For example:

tsx

export default async function UsersPage() {
  const response = await fetch(
    "https://example.com/api/users"
  );

  const users = await response.json();

  return (
    <main>
      {users.map((user: any) => (
        <p key={user.id}>
          {user.name}
        </p>
      ))}
    </main>
  );
}

The component can perform server-side work without turning the entire page into a Client Component.

Why Server Components Matter

Server Components can be useful for:

fetching data
accessing server-side resources
keeping server-only logic away from the browser
reducing client-side JavaScript
rendering data-dependent UI

The goal isn't to make every component a Server Component because it sounds advanced.

Use server-side rendering capabilities where they make sense.

Client Components

Some components need browser-side interactivity.

Examples:

click handlers
browser APIs
interactive forms
local state
effects
certain client-only libraries

For these components, use:

tsx

"use client";

at the top of the file.

Example:

tsx

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Server vs Client Components

Server Component	Client Component
Default in App Router	Requires `"use client"`
Can perform server-side work	Runs with browser-side interactivity
Good for data fetching	Good for interactive UI
Can access server-only resources	Can use browser APIs
No browser event handlers	Supports event handlers
Doesn't need client JS for its own interactivity	Adds client-side JavaScript

A useful mental model:

Diagram / Architecture

Don't Make Everything a Client Component

A common beginner mistake is adding:

tsx

"use client";

to every file.

You usually don't need it.

Ask:

text

Does this component need browser interaction?
        ↓
Yes → Client Component
        ↓
No
        ↓
Can it remain on the server?
        ↓
Yes → Server Component

Keeping interactive code focused can make the application architecture easier to reason about.

Data Fetching

Next.js applications frequently need data.

For example:

text

Users
Products
Jobs
Posts
Orders
Analytics

A Server Component can fetch data.

Example:

tsx

async function getJobs() {
  const response = await fetch(
    "https://example.com/api/jobs"
  );

  if (!response.ok) {
    throw new Error("Failed to fetch jobs");
  }

  return response.json();
}

export default async function JobsPage() {
  const jobs = await getJobs();

  return (
    <main>
      {jobs.map((job: any) => (
        <article key={job.id}>
          <h2>{job.title}</h2>
          <p>{job.company}</p>
        </article>
      ))}
    </main>
  );
}

Fetching Data from a Database

Server-side code can also work with a database.

Conceptually:

Diagram / Architecture

For example, a server-side function might query PostgreSQL using an appropriate database client or ORM.

The browser does not need direct access to your database credentials.

Keep Secrets on the Server

Never expose private credentials in client-side code.

Bad:

tsx

"use client";

const databasePassword = "secret-password";

Never do this.

Server-only secrets should remain on the server.

Use environment variables for sensitive configuration:

text

DATABASE_URL
API_SECRET
PRIVATE_KEY

Then keep your .env files out of Git.

gitignore

.env
.env.local

Loading UI

Data may take time to arrive.

The App Router supports loading.tsx.

For example:

text

app/
└── dashboard/
    ├── page.tsx
    └── loading.tsx

A simple loading component:

tsx

export default function Loading() {
  return (
    <div>
      Loading dashboard...
    </div>
  );
}

This allows you to provide loading UI while route content is being prepared.

The current Next.js learning course includes loading states and streaming as part of its App Router curriculum.

oaicite

Error Handling

You can create:

text

error.tsx

inside a route segment to provide error UI.

Example:

tsx

"use client";

export default function ErrorPage({
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div>
      <h2>Something went wrong.</h2>

      <button onClick={() => reset()}>
        Try again
      </button>
    </div>
  );
}

Error boundaries help prevent an error in one part of the application from destroying the entire user experience.

Not Found Pages

You can create:

text

not-found.tsx

for not-found UI.

Example:

tsx

import Link from "next/link";

export default function NotFound() {
  return (
    <main>
      <h1>Page not found</h1>

      <Link href="/">
        Return home
      </Link>
    </main>
  );
}

For resource-specific routes, you can also trigger a not-found response when the requested resource doesn't exist.

Metadata and SEO

Next.js provides metadata APIs for pages.

For example:

tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Developer Resources",
  description:
    "Learn software development and cloud technologies."
};

Metadata can help define:

page title
description
social sharing information
other document metadata

The current Next.js learning course includes metadata as a dedicated App Router topic.

oaicite

Dynamic Metadata

For pages where metadata depends on the route, metadata can be generated dynamically.

For example, a blog page might use:

text

/blog/[slug]

and generate a title based on the requested article.

This is useful for:

blog posts
product pages
job pages
documentation
profiles

Search and Pagination

Next.js can work with URL search parameters.

For example:

text

/jobs?query=react&page=2

The URL contains the search state.

This can be useful because:

users can share the URL
browser navigation works naturally
pages can be bookmarked
server-side rendering can use the parameters

The official Next.js App Router course includes search and pagination using URL search parameters.

oaicite

Forms and Server Actions

Modern Next.js applications can use server-side mechanisms for mutations.

For example:

text

Create Post
    ↓
Submit Form
    ↓
Server-side Mutation
    ↓
Database
    ↓
Refresh / Revalidate UI

The current Next.js learning course includes data mutations using Server Actions and cache revalidation.

oaicite

When building production forms, also consider:

validation
authorization
CSRF-related protections where applicable
rate limiting
error handling
user feedback

Authentication

Authentication determines who the user is.

Authorization determines what the user can access.

A typical application might have:

text

Login
  ↓
Authentication
  ↓
Session
  ↓
Protected Route
  ↓
Authorization
  ↓
Resource

Next.js itself provides the application framework, while authentication solutions can be added depending on your requirements.

The current Next.js learning material demonstrates authentication for protected dashboard routes.

oaicite

Middleware and Proxy Concepts

Modern Next.js applications can use request-level logic for concerns such as:

redirects
authentication checks
request handling
routing decisions

However, don't put every piece of application logic into request middleware or proxy behavior.

Keep business logic in appropriate server-side modules.

The exact APIs and conventions can change between Next.js releases, so consult the current Next.js documentation when implementing these features.

oaicite

Styling Next.js Applications

Next.js supports multiple styling approaches.

Common choices include:

CSS Modules
global CSS
Tailwind CSS
CSS-in-JS solutions
component libraries

The right choice depends on the project.

For a team project, consistency matters more than choosing the trendiest styling technology.

Images and Fonts

Next.js provides built-in components and optimizations for common assets.

The official learning course includes optimization of fonts and images as part of its App Router curriculum.

oaicite

For images, you can use:

tsx

import Image from "next/image";

export default function Profile() {
  return (
    <Image
      src="/profile.jpg"
      alt="Profile"
      width={400}
      height={400}
    />
  );
}

Always provide meaningful alternative text where appropriate.

A Practical Next.js Architecture

A medium-sized application might look like:

text

app/
├── layout.tsx
├── page.tsx
├── globals.css
│
├── dashboard/
│   ├── layout.tsx
│   ├── page.tsx
│   ├── loading.tsx
│   ├── error.tsx
│   └── settings/
│       └── page.tsx
│
├── jobs/
│   ├── page.tsx
│   └── [id]/
│       └── page.tsx
│
├── api/
│   └── ...
│
├── components/
│   └── ...
│
└── lib/
    └── ...

The exact organization can vary.

The important thing is to maintain clear boundaries between:

routes
reusable components
data access
business logic
configuration

Next.js Rendering Mental Model

A simplified model is:

Diagram / Architecture

Modern Next.js has several rendering and caching behaviors, so production applications should use the current documentation for version-specific details.

Next.js vs React

React	Next.js
UI library	React framework
Components	Components + application features
Routing requires additional solution	Built-in routing conventions
Data fetching architecture is flexible	Framework provides conventions
Rendering choices are broader	Framework integrates server/client rendering
You assemble more pieces	Many pieces are integrated

React is still the foundation.

Next.js builds an application framework around React.

Next.js vs Traditional React SPA

A traditional React SPA may look like:

text

Browser
  ↓
JavaScript Bundle
  ↓
React
  ↓
API

A Next.js application can use server and client components:

text

Browser
  ↓
Next.js
  ├── Server Components
  ├── Data
  └── Client Components

This gives developers more options for deciding where work should happen.

Common Next.js Mistakes

1. Making every component a Client Component

Don't add:

tsx

"use client";

unless client-side capabilities are actually required.

2. Fetching everything in the browser

Some data can be fetched on the server.

Choose the location based on the application's requirements.

3. Exposing secrets

Never put private credentials into client-side code.

4. Ignoring loading states

Slow network requests need useful UI feedback.

5. Ignoring error handling

Real applications fail.

Provide useful error states.

6. Building giant components

Don't put an entire dashboard into one page.tsx.

Break reusable UI into components.

7. Mixing business logic everywhere

Keep data access and business logic organized.

8. Ignoring accessibility

Buttons, forms, links, images, headings, and navigation should remain accessible.

Practical Project: Developer Jobs Dashboard

Let's design a small Next.js application.

Requirements

The application should provide:

job listings
search
pagination
job details
authentication
saved jobs
dashboard
responsive UI

Possible structure:

text

app/
├── page.tsx
├── jobs/
│   ├── page.tsx
│   └── [id]/
│       └── page.tsx
├── dashboard/
│   ├── layout.tsx
│   ├── page.tsx
│   └── saved/
│       └── page.tsx
└── login/
    └── page.tsx

Project Architecture

Diagram / Architecture

This project could demonstrate:

text

Next.js
React
TypeScript
Routing
Server Components
Client Components
Database
Authentication
Search
Pagination
Responsive Design

That makes it a strong portfolio project.

A Simple Next.js Page

tsx

export default function HomePage() {
  return (
    <main>
      <h1>Developer Jobs</h1>

      <p>
        Find software development opportunities.
      </p>
    </main>
  );
}

Simple is good.

Start with a working application before adding complexity.

Dynamic Job Page

File:

text

app/jobs/[id]/page.tsx

Example:

tsx

export default async function JobPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  return (
    <main>
      <h1>Job ID: {id}</h1>
    </main>
  );
}

Now:

text

/jobs/123

can represent job 123.

Learning Path for Next.js

If you're learning Next.js, follow this order:

text

React Fundamentals
        ↓
Next.js Project Setup
        ↓
App Router
        ↓
Pages
        ↓
Layouts
        ↓
Dynamic Routes
        ↓
Link Navigation
        ↓
Server Components
        ↓
Client Components
        ↓
Data Fetching
        ↓
Loading & Errors
        ↓
Search & Pagination
        ↓
Authentication
        ↓
Metadata
        ↓
Deployment

The official Next.js learning course follows a similar progression from application setup through routing, data fetching, rendering, streaming, search, mutations, authentication, accessibility, and metadata.

oaicite

Next.js Developer Skills Checklist

Before calling yourself comfortable with Next.js, try to understand:

Interview Questions

1. What is Next.js?

Next.js is a React framework for building full-stack web applications.

2. What is the App Router?

The App Router is Next.js's newer routing architecture based around the app directory and modern React features.

3. What does `page.tsx` do?

It defines the UI for a route.

4. What does `layout.tsx` do?

It defines UI that can be shared across routes within a layout hierarchy.

5. What is a dynamic route?

A route containing a dynamic segment such as:

text

app/products/[id]/page.tsx

6. What is a Server Component?

A component rendered using Next.js's server-side component model, which can perform server-side work without requiring that component to become a Client Component.

7. What is a Client Component?

A component marked with:

tsx

"use client";

when it needs client-side capabilities such as state, event handlers, or browser APIs.

8. When should you use a Client Component?

When the component needs browser-side interaction or APIs that aren't available in a Server Component.

9. Why use `Link`?

It provides Next.js-aware internal navigation and can take advantage of its navigation optimizations.

oaicite

10. How do you create a dynamic route?

Use a dynamic folder segment such as:

text

[id]

11. Why are layouts useful?

They allow shared UI and structure to persist across multiple routes.

12. Can Next.js connect to a database?

Yes. Server-side application code can communicate with databases, while credentials should remain server-side.

FAQ

Is Next.js only for frontend development?

No. Next.js can support full-stack web applications with server-side functionality and data access.

Do I need React before learning Next.js?

Yes, a basic understanding of React is strongly recommended. The official Next.js documentation lists familiarity with HTML, CSS, JavaScript, and React as prerequisite knowledge.

oaicite

Should I learn the Pages Router first?

For modern Next.js development, learning the App Router is the more relevant starting point. The Pages Router is still supported, but the current documentation emphasizes the App Router for newer React capabilities.

oaicite

Is every Next.js component a Server Component?

In the App Router, components are Server Components by default unless you opt into client behavior.

When should I use "use client"?

Use it when a component needs client-side capabilities such as interactive state, event handlers, or browser APIs.

Can I use TypeScript with Next.js?

Yes. Next.js supports TypeScript and can automatically configure the necessary packages and configuration when a project uses TypeScript.

oaicite

Can Next.js build APIs?

Next.js can support server-side application functionality and route handlers, allowing applications to implement backend behavior alongside their UI.

Final Takeaway

Next.js becomes much easier to understand when you stop treating it as a collection of unrelated features.

Think about the application structure:

text

Next.js
│
├── Routing
│   ├── page.tsx
│   ├── layout.tsx
│   └── Dynamic Routes
│
├── Rendering
│   ├── Server Components
│   └── Client Components
│
├── Data
│   ├── Fetching
│   ├── Mutations
│   └── Database
│
├── User Experience
│   ├── Loading
│   ├── Errors
│   └── Navigation
│
└── Production
    ├── Metadata
    ├── Security
    └── Deployment

The most important concepts to learn first are:

App Router → Pages → Layouts → Dynamic Routes → Server Components → Client Components → Data Fetching → Loading/Error States → Authentication → Deployment.

Once these concepts make sense, Next.js stops feeling like a complicated React framework and starts becoming a practical tool for building complete web applications.

The official Next.js documentation and current App Router course are good references for continuing beyond these fundamentals.

oaicite

Next.js App Router: Pages, Layouts, Server Components, and Data Fetching

Next.js App Router: Pages, Layouts, Server Components, and Data Fetching

Next.js App Router at a Glance

What Is Next.js?

Why Use Next.js?

App Router vs Pages Router

Creating a Next.js Application

Basic Next.js Project Structure

How File-System Routing Works

What Is page.tsx?

What Is layout.tsx?

Root Layout

Nested Layouts

Dynamic Routes

Nested Dynamic Routes

Route Groups

Navigation with Link

Link vs HTML Anchor

Server Components

Why Server Components Matter

Client Components

Server vs Client Components

Don't Make Everything a Client Component

Data Fetching

Fetching Data from a Database

Keep Secrets on the Server

Loading UI

Error Handling

Not Found Pages

Metadata and SEO

Dynamic Metadata

Search and Pagination

Forms and Server Actions

Authentication

Middleware and Proxy Concepts

Styling Next.js Applications

Images and Fonts

A Practical Next.js Architecture

Next.js Rendering Mental Model

Next.js vs React

Next.js vs Traditional React SPA

Common Next.js Mistakes

1. Making every component a Client Component

2. Fetching everything in the browser

3. Exposing secrets

4. Ignoring loading states

5. Ignoring error handling

6. Building giant components

7. Mixing business logic everywhere

8. Ignoring accessibility

Practical Project: Developer Jobs Dashboard

Requirements

Project Architecture

A Simple Next.js Page

Dynamic Job Page

Learning Path for Next.js

Next.js Developer Skills Checklist

Interview Questions

1. What is Next.js?

2. What is the App Router?

3. What does page.tsx do?

4. What does layout.tsx do?

5. What is a dynamic route?

6. What is a Server Component?

7. What is a Client Component?

8. When should you use a Client Component?

9. Why use Link?

10. How do you create a dynamic route?

11. Why are layouts useful?

12. Can Next.js connect to a database?

FAQ

Is Next.js only for frontend development?

Do I need React before learning Next.js?

Should I learn the Pages Router first?

Is every Next.js component a Server Component?

When should I use "use client"?

Can I use TypeScript with Next.js?

Can Next.js build APIs?

Final Takeaway

Comments (0)

3. What does `page.tsx` do?

4. What does `layout.tsx` do?

9. Why use `Link`?