Building a Full-Stack App with Next.js 14 App Router

Next.js 14 introduces powerful features like Server Components and Server Actions that revolutionize how we build full-stack applications.

Project Setup

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

App Router Structure

app/
  layout.tsx       # Root layout
  page.tsx         # Home page
  about/
    page.tsx       # About page
  blog/
    page.tsx       # Blog listing
    [slug]/
      page.tsx     # Dynamic blog post

Server Components (Default)

Server Components render on the server, reducing client-side JavaScript:

// app/posts/page.tsx
async function getPosts() {
  const res = await fetch("https://api.example.com/posts");
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();
  
  return (
    <div>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
        </article>
      ))}
    </div>
  );
}

Server Actions

Handle form submissions and mutations with Server Actions:

// app/actions.ts
"use server"

export async function createPost(formData: FormData) {
  const title = formData.get("title");
  const content = formData.get("content");
  
  // Save to database
  await db.insert({ title, content });
  
  revalidatePath("/posts");
}

Conclusion

Next.js 14's App Router provides a modern, efficient way to build full-stack applications with excellent developer experience.