Next.js App Router 学习指南
1. 核心概念
-
路由文件结构
-
app/文件夹：所有路由从app/开始。 -
文件名作用：
-
page.js：定义页面内容（必须）。 -
layout.js：定义共享布局。 -
loading.js：定义加载状态。 -
error.js：定义错误边界。 -
not-found.js：定义 404 页面。 -
嵌套路由：通过文件夹层级实现嵌套路由。
-
动态路由
-
动态路由通过
[param]定义。 -
示例：
app/blog/[id]/page.js对应/blog/:id。 -
布局组件
-
layout.js：定义共享布局，减少重复代码。 -
示例：
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<header>My Header</header>
{children}
<footer>My Footer</footer>
</body>
</html>
);
}
-
数据获取
-
Server Components：默认使用，支持直接调用异步函数。
-
客户端组件：使用
"use client"指定。
2. 创建简单项目
-
初始化项目
-
命令：
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev
-
添加第一个页面
-
文件路径：
app/page.js -
示例：
export default function HomePage() {
return <h1>Welcome to the Home Page</h1>;
}
3. 路由基本用法
-
静态路由
-
创建页面
/about：
mkdir app/about
touch app/about/page.js
- 示例：
export default function AboutPage() {
return <h1>About Us</h1>;
}
-
动态路由
-
创建动态路由
/blog/:id：
mkdir -p app/blog/[id]
touch app/blog/[id]/page.js
- 示例：
export default function BlogPost({ params }) {
return <h1>Blog Post ID: {params.id}</h1>;
}
4. 使用布局组件
-
根布局
-
文件路径：
app/layout.js -
示例：
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<header style={{ background: '#f0f0f0', padding: '1rem' }}>
<h1>My Website</h1>
</header>
<main>{children}</main>
<footer style={{ background: '#f0f0f0', padding: '1rem' }}>
<p>© 2023 My Website</p>
</footer>
</body>
</html>
);
}
-
嵌套布局
-
文件路径：
app/dashboard/layout.js -
示例：
export default function DashboardLayout({ children }) {
return (
<div>
<h2>Dashboard Layout</h2>
{children}
</div>
);
}
5. 数据获取
-
Server Components
-
示例：
async function getProducts() {
const res = await fetch('https://api.example.com/products');
return res.json();
}
export default async function ProductsPage() {
const products = await getProducts();
return (
<ul>
{products.map((product) => (
<li key={product.id}>{product.name}</li>
))}
</ul>
);
}
-
客户端组件
-
示例：
"use client";
import { useState } from 'react';
export default function CounterPage() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
6. 高级功能
-
加载状态
-
文件路径：
app/products/loading.js -
示例：
export default function Loading() {
return <p>Loading products...</p>;
}
-
错误边界
-
文件路径：
app/products/error.js -
示例：
"use client";
export default function Error({ error, reset }) {
return (
<div>
<p>Something went wrong: {error.message}</p>
<button onClick={() => reset()}>Try again</button>
</div>
);
}
7. 推荐学习资源
-
官方文档：Next.js App Router
-
示例项目：Next.js Examples
-
教程视频：YouTube 上的相关教程
总结
-
逐步掌握 App Router 的核心功能，包括路由、布局、数据获取和高级特性。
-
从简单项目开始，逐步尝试更复杂的场景。
