Introduction
Next.js 14 introduces significant improvements to the App Router, making it the recommended way to build new Next.js applications. This tutorial covers everything you need to know to get started.
File-Based Routing
The App Router uses a file-system based router where folders define routes.
bash
Copy
1app/ 2├── page.tsx # / 3├── about/ 4│ └── page.tsx # /about 5├── blog/ 6│ ├── page.tsx # /blog 7│ └── [slug]/ 8│ └── page.tsx # /blog/my-post 9└── layout.tsx # Root layout
Server Components (Default)
By default, all components in the App Router are Server Components:
typescript
Copy
1// app/users/page.tsx 2async function UsersPage() { 3 const users = await fetch('https://api.example.com/users'); 4 const data = await users.json(); 5 6 return ( 7 <ul> 8 {data.map(user => ( 9 <li key={user.id}>{user.name}</li>10 ))}11 </ul>12 );13}1415export default UsersPage;
#
Benefits of Server Components
- Smaller bundle size - Server code never reaches the client
- Direct database access - Query databases without an API
- Improved security - Keep sensitive data on the server
- Better SEO - Pages are server-rendered
Client Components
For interactivity, use the "use client" directive:
typescript
Copy
1"use client"; 2 3import { useState } from 'react'; 4 5export default function Counter() { 6 const [count, setCount] = useState(0); 7 8 return ( 9 <button onClick={() => setCount(count + 1)}>10 Count: {count}11 </button>12 );13}
Layouts
Layouts wrap pages and preserve state across navigations:
typescript
Copy
1// app/layout.tsx 2export default function RootLayout({ 3 children, 4}: { 5 children: React.ReactNode; 6}) { 7 return ( 8 <html lang="en"> 9 <body>10 <nav>Navigation</nav>11 <main>{children}</main>12 <footer>Footer</footer>13 </body>14 </html>15 );16}
Loading States
Create loading.tsx for automatic loading UI:
typescript
Copy
1// app/dashboard/loading.tsx 2export default function Loading() { 3 return ( 4 <div className="animate-pulse"> 5 <div className="h-4 bg-gray-200 rounded w-3/4 mb-4"></div> 6 <div className="h-4 bg-gray-200 rounded w-1/2"></div> 7 </div> 8 ); 9}
Error Handling
Handle errors gracefully with error.tsx:
typescript
Copy
1"use client"; 2 3export default function Error({ 4 error, 5 reset, 6}: { 7 error: Error; 8 reset: () => void; 9}) {10 return (11 <div>12 <h2>Something went wrong!</h2>13 <button onClick={() => reset()}>Try again</button>14 </div>15 );16}
Conclusion
The App Router in Next.js 14 provides a powerful foundation for building modern web applications. Server Components, combined with intuitive file-based routing, make it easier than ever to create fast, SEO-friendly websites.
Tags
