Next.js 页面和路由（完整教程）

Next.js 页面和路由详解

Next.js 是一个基于 React 的服务端渲染框架，其最核心的特性之一就是“页面和路由”的自动处理机制。通过文件系统来组织页面，开发者无需手动配置路由表，即可实现动态、高效的页面导航。本文将围绕 Next.js 页面和路由，从基础到进阶，系统讲解其设计原理与使用方式。

核心概念

Next.js 通过 pages 目录下的文件结构自动生成对应的路由。每个 .js 或 .tsx 文件对应一个页面，文件名映射为路径，例如 pages/about.js 会生成 /about 路由。这种机制被称为“文件系统路由”，是 Next.js 的一大特色。

pages/
  index.js       // 对应路径 /
  about.js       // 对应路径 /about
  users/
    [id].js      // 动态路由，对应路径 /users/123

基础语法

页面文件命名

页面文件通常命名为 index.js 来表示该目录下的首页，例如 pages/blog/index.js 对应 /blog 路径。非 index.js 文件则会生成对应的子路径。

// pages/blog.js
export default function Blog() {
  return <h1>这是博客首页</h1>;
}

动态路由

通过在文件名中使用 [id].js，可以创建动态路由。Next.js 会自动解析参数并传递给页面组件。

// pages/users/[id].js
import { useRouter } from 'next/router';

export default function UserPage() {
  const router = useRouter();
  const { id } = router.query; // 从 URL 中提取 id 参数

  return <h1>用户 ID: {id}</h1>;
}

嵌套路由

Next.js 支持嵌套页面结构，例如 pages/dashboard/settings.js 会生成 /dashboard/settings 路由，无需额外配置即可实现多层路由。

// pages/dashboard/settings.js
export default function Settings() {
  return <h1>这是仪表盘设置页</h1>;
}

进阶特性

以下是 Next.js 路由系统的几个重要进阶功能，适合构建中大型项目：

实战应用

使用 next/router 实现页面跳转

通过 next/router 提供的 useRouter Hook，可以在客户端进行页面跳转，而无需页面刷新。

// components/LinkButton.js
import { useRouter } from 'next/router';

export default function LinkButton() {
  const router = useRouter();

  return (
    <button onClick={() => router.push('/about')}>前往关于页面</button>
  );
}

构建动态博客详情页

通过 [slug].js 创建动态页面，处理博客文章的详情展示。

// pages/blog/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query; // 获取 slug 参数

  return <h1>博客文章: {slug}</h1>;
}

创建自定义 API 路由

在 pages/api 目录下创建 .js 文件，可快速搭建服务端 API 接口。

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API' });
}

注意事项

1. 文件系统路由是大小写敏感的
   Next.js 默认区分路径的大小写，例如 /About 和 /about 会被视为两个不同的页面。

2. 动态路由参数不能包含特殊字符
   如果动态路由参数中包含特殊字符（如 / 或 .），需要使用 [...slug].js 语法来处理。

3. 避免在 pages 目录下放非页面文件
   只有 .js 或 .tsx 文件会被识别为页面，其他文件如样式表或工具函数应放在其他目录，如 utils/。

4. API 路由不能使用 Next.js 页面组件
   API 路由是服务端处理，不能使用 React 组件，应直接返回 res.status().json()。

常见问题

Q1：如何创建带参数的嵌套路由？
A：文件名中使用 [id].js 表示动态参数，例如 pages/users/[id]/posts/[postId].js 会生成 /users/123/posts/456 的路由。

Q2：页面组件中如何获取 URL 参数？
A：使用 useRouter().query 即可获取动态路由参数，例如 router.query.id。

Q3：Next.js 支持哪些跳转方式？
A：支持 router.push() 和 router.replace()，区别在于 push 会留下历史记录，replace 不会。

Q4：如何实现自定义 404 页面？
A：只需在 pages 目录下创建 404.js 或 404.tsx 即可，该页面会自动处理未匹配的路由。

总结

Next.js 通过文件系统自动管理页面和路由，开发者可以快速构建结构清晰的 Web 应用，同时支持动态路由、API 路由等高级功能，是现代 React 项目开发的首选框架。