标签导航：

nextjs 中的路由 – 如何在您的下一个应用程序中使用 app router

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 (
    <html>
      <body>
        我的应用
        {children}
      </body>
    </html>
  );
}

嵌套路由和布局:

每个布局文件都适用于其文件夹及其任何嵌套文件夹，从而支持一致布局的嵌套路由结构。

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 <div>{JSON.stringify(data)}</div>;
}

服务器操作

服务器操作允许您直接在组件代码中处理服务器端逻辑，例如处理表单提交。

// 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 (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* ...表单内容... */}
      <input type="submit" value="提交" />
    </form>
  );
}

部署 App Router

使用 App Router 部署应用与任何 Next.js 应用相同。Vercel 等平台针对 Next.js 应用进行了优化，提供最佳性能和集成。

部署流程：

  • 为 API 密钥或其他敏感数据配置环境变量。
  • 使用以下命令构建并导出项目：npm run build
  • 部署到 Vercel：使用 Vercel CLI 或连接您的仓库实现无缝部署。

Next.js 14 的 App Router 灵活且模块化，使用更简洁的代码构建可扩展且快速的应用。 通过以上方法，您能够充分利用 App Router 的所有功能。