Introduction to Next.js App Router

The Next.js App Router represents a paradigm shift in how we build React applications. It introduces React Server Components as a first-class citizen, changing how we think about rendering and data fetching.

Server Components by Default

In the app directory, all components are Server Components by default. This means:

• Zero bundle size for the component code.
• Direct access to backend resources (database, filesystem).
• Improved security for sensitive data.

To use a Client Component (for interactivity, useState, useEffect), you simply add the 'use client' directive at the top of the file.

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Nested Layouts

The App Router makes creating complex layouts incredibly easy. You can define a layout.tsx at any directory level, and it will wrap all child pages and segments.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <section>
      <nav>Dashboard Nav</nav>
      {children}
    </section>
  )
}

Streaming and Suspense

With Server Components, you can stream UI updates to the client. By wrapping a slow component in <Suspense>, you can show a loading CLI instantly while the data fetches in the background.

import { Suspense } from 'react'
import Loading from './loading'

export default function Page() {
  return (
    <Suspense fallback={<Loading />}>
      <SlowComponent />
    </Suspense>
  )
}

Conclusion

The App Router brings powerful new capabilities to Next.js. While there is a learning curve, the benefits in performance and developer experience are well worth the switch.