Getting Started with Next.js App Router

The products you build can never be better than the infrastructure you build them on. I have tried a LOT of different setups, and I'm really happy with what I've landed on.

Why App Router?

The App Router in Next.js is a game changer. It brings React Server Components, nested layouts, and streaming — all built into the framework.

Here's what makes it special:

• Server Components by default — less JavaScript shipped to the client
• Nested layouts — share UI between routes without re-rendering
• Loading states — built-in streaming with loading.tsx
• Error boundaries — graceful error handling with error.tsx

Getting Started

First, create a new Next.js project:

npx create-next-app@latest my-app

The App Router uses a file-system based router where folders define routes. Each folder represents a route segment that maps to a URL segment.

File Conventions

• page.tsx — the UI for a route
• layout.tsx — shared layout that wraps pages
• loading.tsx — loading UI
• error.tsx — error boundary

Server vs Client Components

By default, all components in the App Router are Server Components. To use client-side features like useState or useEffect, add "use client" at the top of your file.

The key insight is: keep as much as possible on the server, and only opt into client components when you need interactivity.

What I'm Using

Here's my current stack for building with Next.js:

• Tailwind CSS — for styling
• Framer Motion — for animations
• Vercel — for deployment
• PostgreSQL — for the database

It's a great time to be building on the web.