深入理解 Next.js 的路由机制

作者：码力无边

在上一篇文章中，我们成功创建并运行了第一个 Next.js 应用。当你打开项目文件夹时，你可能会注意到一个名为 pages 的目录。这个目录看似普通，但它却是 Next.js 路由系统的核心。今天，我们将深入探索这个“约定优于配置”的强大机制。

如果你有使用过其他前端框架（如 react-router-dom）的经验，你可能习惯于在一个集中的地方手动编写路由配置。你需要将 URL 路径映射到相应的组件上。

// react-router-dom 的传统方式
<Routes><Route path="/" element={<Home />} /><Route path="about" element={<About />} />
</Routes>

Next.js 则采取了一种截然不同的、更直观的方式：你的文件系统就是你的路由。

核心理念：`pages` 目录即路由

在 Next.js 中，pages 目录下的每个 React 组件文件都会自动成为应用程序中的一个页面（路由）。文件路径直接映射到 URL 路径。

这种方法有几个显而易见的好处：

直观：项目结构清晰地反映了网站的 URL 结构。
零配置：你不需要编写任何路由配置文件，只需创建文件即可。
易于维护：添加、删除或重命名页面就像操作文件一样简单。

现在，让我们通过几个实例来具体了解它是如何工作的。

1. 创建基础页面（静态路由）

这是最简单的情况。你只需在 pages 目录下创建一个 .js, .jsx, .ts, 或 .tsx 文件。

假设我们想创建一个“关于我们”的页面，其 URL 应该是 /about。我们只需要在 pages 目录下创建一个名为 about.tsx 的文件：

文件路径: pages/about.tsx

// pages/about.tsxfunction AboutPage() {return (<div><h1>关于我们</h1><p>这是一个使用 Next.js 构建的博客专栏。</p></div>);
}export default AboutPage;

就这样！现在启动你的开发服务器 (npm run dev)，然后访问 http://localhost:3000/about，你就能看到这个页面了。

特殊文件：pages/index.tsx 是一个特殊的文件，它对应的是网站的根路径 /。

2. 构建嵌套路由

如果你的网站结构更复杂，需要像 /dashboard/settings 这样的嵌套 URL 呢？同样简单，只需在 pages 目录下创建相应的文件夹结构即可。

让我们来创建一个用户仪表盘的路由结构：

在 pages 目录下创建一个名为 dashboard 的文件夹。
在 dashboard 文件夹内创建 index.tsx 和 settings.tsx。

文件结构:

pages/
├── dashboard/
│   ├── index.tsx
│   └── settings.tsx
└── ...

对应的路由:

pages/dashboard/index.tsx -> /dashboard
pages/dashboard/settings.tsx -> /dashboard/settings

这种方式让你的项目结构与 URL 保持高度一致，一目了然。

3. 探索动态路由

这是 Next.js 路由最强大的功能之一。很多时候，我们需要的页面路径不是固定的，而是包含动态参数的。例如，博客文章的 URL (/posts/my-first-post)，商品详情页的 URL (/products/123)。

为了实现这一点，Next.js 引入了方括号 [] 语法。

假设我们要为博客文章创建动态路由。我们可以在 pages 目录下创建一个这样的文件：

文件路径: pages/posts/[slug].tsx

这里的 [slug] 就是一个动态段（dynamic segment）。slug 是一个占位符，它可以匹配 /posts/ 之后的任何字符串，比如 /posts/hello-world 或 /posts/getting-started。

那么，我们如何在页面组件中获取到这个动态的 slug 值呢？这就需要用到 Next.js 提供的 useRouter 钩子（Hook）。

// pages/posts/[slug].tsximport { useRouter } from 'next/router';function PostPage() {const router = useRouter();const { slug } = router.query; // 从 router.query 中解构出 slug// 在页面首次加载时，router.query 可能为空，需要处理这种情况if (!router.isReady) {return <div>加载中...</div>;}return (<div><h1>文章标题：{slug}</h1><p>这里是文章的具体内容...</p></div>);
}export default PostPage;

现在，当你访问 http://localhost:3000/posts/my-first-article 时，页面上就会显示 “文章标题：my-first-article”。

提示：你也可以创建更复杂的动态路由，比如 pages/shop/[category]/[id].tsx，它会匹配像 /shop/electronics/123 这样的 URL。

总结

今天，我们学习了 Next.js 路由系统的三大核心用法：

路由类型	文件结构示例	对应的 URL
静态路由	`pages/contact.tsx`	`/contact`
嵌套路由	`pages/profile/index.tsx`	`/profile`
动态路由	`pages/blog/[slug].tsx`	`/blog/any-post-name`