Getting Started with Next.js 14 and App Router

Next.js 14 introduces powerful new features that make building web applications faster and more intuitive. In this guide, we'll explore the App Router, Server Components, and best practices for modern Next.js development.

What's New in Next.js 14?

Next.js 14 brings several exciting improvements:

• Turbopack: Faster local development with the new bundler
• Server Actions: Simplified form handling and mutations
• Partial Prerendering: Combine static and dynamic rendering

Setting Up Your Project

To create a new Next.js 14 project, run:

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

This will scaffold a new project with TypeScript, Tailwind CSS, and the App Router enabled by default.

Understanding the App Router

The App Router uses a file-system based routing approach within the app directory:

app/
├── page.tsx          # Home page (/)
├── layout.tsx        # Root layout
├── blog/
│   ├── page.tsx      # /blog
│   └── [slug]/
│       └── page.tsx  # /blog/:slug

Server Components vs Client Components

By default, all components in the App Router are Server Components. To use client-side features like useState or useEffect, add the "use client" directive:

"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 Actions

Server Actions allow you to define server-side functions that can be called directly from your components:

async function submitForm(formData: FormData) {
  "use server";
  
  const name = formData.get("name");
  // Process the form data on the server
  await saveToDatabase({ name });
}
 
export default function ContactForm() {
  return (
    <form action={submitForm}>
      <input name="name" type="text" />
      <button type="submit">Submit</button>
    </form>
  );
}

Conclusion

Next.js 14's App Router represents a significant step forward in React framework development. The combination of Server Components, Server Actions, and improved performance makes it an excellent choice for building modern web applications.

Start experimenting with these features in your next project!