Next.js 14 introduces exciting new features including the App Router, Server Components, and improved performance. In this guide we'll walk you through setting up a new project, understanding the file-based routing system, and building your first pages with React Server Components.
The App Router uses a file-system based routing where folders define routes. Each page is a Server Component by default, which means your component code stays on the server and only the resulting HTML is sent to the client. This reduces JavaScript bundle size and improves initial load times.
Layouts and templates make it easy to share UI across routes. A layout.tsx file wraps child routes and persists across navigations, while template.tsx re-mounts on each visit. Use layouts for shared headers and footers, and templates when you need to reset state.
Data fetching in the App Router is straightforward: fetch directly in your Server Components. Next.js extends the native fetch API with automatic request deduplication and a default cache. For dynamic data, use the segment config options or call cookies() and headers() where needed.
When you're ready to add interactivity, use the "use client" directive at the top of a file to create a Client Component. Keep the client boundary as low as possible—push client components down the tree so that most of your app stays on the server and stays fast.
Key Takeaways
- The App Router uses folders for routes; pages are Server Components by default.
- Layouts persist across routes; templates re-mount on navigation.
- Fetch data in Server Components; Next.js deduplicates and caches automatically.
- Use "use client" only where you need interactivity to keep bundles small.
