Next.js 14 的 App Router 引入了一种基于文件的路由方法，让开发者构建更结构化、模块化且高性能的应用。本文将指导您如何在 Next.js 应用中有效使用 App Router。
什么是 App Router？
App Router 提供了一种全新的路由定义方式。只需创建组件即可定义路由，/app 目录下的每个文件夹都对应一个 URL 路径。这种组织方式支持嵌套布局和分组路由，在处理大型应用时更易于数据获取和路由管理。
设置 App Router
- 创建新的 Next.js 项目 (若尚未创建):
npx create-next-app@latest - 启用 App Router: Next.js 14 默认使用
/app目录，自动启用 App Router，无需额外配置。
基本路由
/app 目录下的每个文件夹和文件都自动映射到应用中的路径。
app/
├── page.tsx # 首页 (例如： "/")
├── about/
│ └── page.tsx # 关于页面 (例如： "/about")
└── blog/
├── page.tsx # 博客索引页 (例如： "/blog")
└── [slug]/
└── page.tsx # 动态博客文章 (例如： "/blog/my-post")
-
静态路由:
app/about/page.tsx自动映射到/about路径。 -
动态路由: 使用方括号
[]创建动态路由。例如，app/blog/[slug]/page.tsx将动态渲染/blog/my-first-post或/blog/hello-world等路径的页面。
布局和嵌套
App Router 允许您在一个位置定义布局并在不同页面中复用，轻松实现应用各个部分的 UI 元素一致性。
创建布局:
在文件夹中添加 layout.tsx 文件即可创建布局。该布局将应用于该文件夹内的所有页面和组件。
app/ ├── layout.tsx # 应用根布局 ├── about/ │ ├── layout.tsx # 关于页面特定布局 │ └── page.tsx # 关于页面内容
// app/layout.tsx
export default function RootLayout({ children }) {
return (
我的应用
{children}
);
}
嵌套路由和布局:
每个布局文件都适用于其文件夹及其任何嵌套文件夹，从而支持一致布局的嵌套路由结构。
app/
├── dashboard/
│ ├── layout.tsx # 仪表盘区域布局
│ ├── page.tsx # 仪表盘首页 ("/dashboard")
│ └── settings/
│ └── page.tsx # 仪表盘设置 ("/dashboard/settings")
-
仪表盘布局:
/dashboard内的layout.tsx文件适用于/dashboard和/dashboard/settings。
路由组
路由组允许通过在括号中添加组文件夹来组织路由，而不影响 URL 结构。这对于构建应用代码而不影响 URL 非常有用。
app/ ├── (dashboard)/ │ ├── profile/ │ │ └── page.tsx # "/profile" │ ├── settings/ │ │ └── page.tsx # "/settings"
/profile 和 /settings 的文件夹配置文件和设置将显示，但 (dashboard) 将它们直观地分组以实现代码结构。
通配符路由
当您需要在一个路由文件中处理多个 URL 段时，可以使用通配符路由。这通过在文件名中使用 ... 来实现。
-
示例:
[...]slug].tsx捕获多个路径段，例如/blog/a/b/c。
错误和加载状态处理
Next.js 14 允许您使用每个路由中的特殊组件来管理错误和加载状态。
错误边界:
在文件夹中添加 error.tsx 来处理路由中的错误。
app/ ├── blog/ │ ├── error.tsx # 博客页面的错误边界 │ └── page.tsx # 博客主页
-
加载状态: 使用
loading.tsx显示特定路由的加载指示器。
App Router 中的数据获取
使用 Next.js 14，您可以使用 use hook 或 async/await 直接在组件中获取服务器端数据。
// app/dashboard/page.tsx
async function getData() {
const res = await fetch('https://api.example.com/data');
return res.json();
}
export default async function DashboardPage() {
const data = await getData();
return {JSON.stringify(data)};
}
服务器操作
服务器操作允许您直接在组件代码中处理服务器端逻辑，例如处理表单提交。
// app/contact/page.tsx
"use client";
import { useForm } from 'react-hook-form';
export default function ContactForm() {
const { register, handleSubmit } = useForm();
const onSubmit = async (data) => {
"use server";
await fetch('/api/contact', { method: 'POST', body: JSON.stringify(data) });
};
return (
);
}
部署 App Router
使用 App Router 部署应用与任何 Next.js 应用相同。Vercel 等平台针对 Next.js 应用进行了优化，提供最佳性能和集成。
部署流程：
- 为 API 密钥或其他敏感数据配置环境变量。
- 使用以下命令构建并导出项目：
npm run build - 部署到 Vercel：使用 Vercel CLI 或连接您的仓库实现无缝部署。
Next.js 14 的 App Router 灵活且模块化，使用更简洁的代码构建可扩展且快速的应用。 通过以上方法，您能够充分利用 App Router 的所有功能。
