Getting Started with Next.js 16 (App Router)

Next.js 16 ships with the App Router as the recommended way to build modern React apps. Here's the lean setup I use on every new project.

Folder layout

app/
  layout.tsx
  page.tsx
  components/
  blog/
  api/
lib/
content/

I keep route-level components inside app/components and shared primitives in components/ui. Domain logic lives in lib/.

Async params

Dynamic route handlers receive params as a Promise, so always await it:

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

What I always install

• tailwindcss for styling
• framer-motion for animation
• zod for runtime validation
• gray-matter + remark for content

That's enough to ship a clean, content-driven site.