Next.jsJan 15, 2024•8 min read

Mastering Next.js 14 App Router

A comprehensive guide to building modern web applications with Next.js 14 App Router, Server Components, and the latest features.

Krishna Phatkure

Software Engineer & Full-Stack Developer

Next.js 14 represents a major evolution in how we build React applications. The App Router, now stable, fundamentally changes how we think about routing, data fetching, and component architecture.

What's New in Next.js 14

Server Components by Default

In the App Router, all components are Server Components by default. This means they run on the server and send only HTML to the client, resulting in smaller JavaScript bundles and faster page loads.

tsx

// This is a Server Component by default
export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  return <h1>{data.title}</h1>;
}

The 'use client' Directive

When you need interactivity, add the 'use client' directive:

tsx

import { useState } from 'react'

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

File-Based Routing

The App Router uses a file-system based router where folders define routes:

- `app/page.tsx` → `/`
`app/about/page.tsx` → `/about`
`app/blog/[slug]/page.tsx` → `/blog/:slug`

Layouts and Templates

Layouts wrap child pages and persist across navigations:

tsx

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

Data Fetching

With Server Components, you can fetch data directly in your components:

tsx

async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()

export default async function Page() { const data = await getData() return

{data.title}

} ```

Conclusion

Next.js 14 with the App Router provides a powerful foundation for building modern web applications. The combination of Server Components, improved data fetching, and file-based routing makes it easier than ever to create fast, SEO-friendly applications.