Getting Started with Next.js 14 and the App Router

Next.js 14 brings significant improvements to the React ecosystem with the stable release of the App Router. This new routing system provides better performance, improved developer experience, and powerful new features that make building modern web applications easier than ever.

What's New in Next.js 14?

The App Router represents a paradigm shift in how we build Next.js applications. Here are the key features:

1. Server Components by Default

Server Components run on the server and send rendered HTML to the client, reducing bundle size and improving performance.

// app/page.tsx - Server Component by default
export default function HomePage() {
  // This runs on the server
  const data = await fetchData()
  
  return (
    <div>
      <h1>Welcome to Next.js 14</h1>
      <DataList data={data} />
    </div>
  )
}

2. Improved File-Based Routing

The new routing system uses a more intuitive folder structure:

3. Built-in Loading and Error States

Create better user experiences with built-in loading and error handling:

// app/blog/loading.tsx
export default function Loading() {
  return <div>Loading blog posts...</div>
}

// app/blog/error.tsx
export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

Setting Up Your First App Router Project

Let's create a new Next.js 14 project with the App Router:

npx create-next-app@latest my-app --app
cd my-app
npm run dev

This creates a new project with:

• TypeScript support
• Tailwind CSS
• ESLint configuration
• App Router enabled

Key Concepts to Understand

Server vs Client Components

Server Components (default):

• Run on the server
• Can access backend resources directly
• Don't have access to browser APIs
• Reduce bundle size

Client Components:

• Run in the browser
• Can use hooks and event handlers
• Have access to browser APIs
• Mark with 'use client' directive

'use client' // This makes it a Client Component

import { useState } from 'react'

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

Data Fetching

The App Router introduces new patterns for data fetching:

// Server Component - fetch data directly
async function getData() {
  const res = await fetch('https://api.example.com/posts')
  return res.json()
}

export default async function Posts() {
  const posts = await getData()
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  )
}

Best Practices

1. Use Server Components When Possible

Start with Server Components and only use Client Components when you need:

• Browser APIs
• Event handlers
• State or effects
• Browser-only libraries

2. Optimize Your Bundle

Keep your client-side JavaScript minimal:

// ❌ Don't do this - imports entire library to client
'use client'
import _ from 'lodash'

// ✅ Do this - use server component with specific imports
import { debounce } from 'lodash'

3. Leverage Streaming

Use Suspense boundaries to improve perceived performance:

import { Suspense } from 'react'

export default function Page() {
  return (
    <div>
      <h1>Blog Posts</h1>
      <Suspense fallback={<PostsSkeleton />}>
        <Posts />
      </Suspense>
    </div>
  )
}

Migrating from Pages Router

If you're coming from the Pages Router, here's a quick migration guide:

| Pages Router | App Router | |--------------|------------| | pages/index.js | app/page.js | | pages/about.js | app/about/page.js | | pages/blog/[slug].js | app/blog/[slug]/page.js | | pages/_app.js | app/layout.js | | pages/_document.js | app/layout.js |

Conclusion

Next.js 14 with the App Router provides a powerful foundation for building modern React applications. The combination of Server Components, improved routing, and better developer experience makes it an excellent choice for your next project.

The learning curve might seem steep initially, but the benefits in terms of performance, maintainability, and developer experience are worth it. Start with a simple project and gradually explore the advanced features as you become more comfortable with the new paradigms.

Ready to start building? Check out the official Next.js documentation for more detailed guides and examples.

Want to learn more about modern web development? Subscribe to our newsletter and follow us for more tutorials and insights.