Next.js 如何进行页面路由？

推荐答案

在 Next.js 中，页面路由是基于文件系统的。每个在 pages 目录下的文件都会自动成为一个路由。例如：

• pages/index.js 对应 / 路由。
• pages/about.js 对应 /about 路由。
• pages/blog/[slug].js 对应 /blog/:slug 动态路由。

Next.js 还支持嵌套路由，通过在 pages 目录下创建子目录来实现。例如：

• pages/blog/index.js 对应 /blog 路由。
• pages/blog/first-post.js 对应 /blog/first-post 路由。

对于动态路由，可以使用方括号 [] 来定义动态段。例如：

• pages/blog/[slug].js 可以匹配 /blog/any-slug 这样的路由。

本题详细解读

文件系统路由

Next.js 使用文件系统作为路由的基础。每个在 pages 目录下的文件都会自动映射到一个路由。例如：

• pages/index.js 文件会自动映射到 / 路由。
• pages/about.js 文件会自动映射到 /about 路由。

嵌套路由

Next.js 支持嵌套路由，通过在 pages 目录下创建子目录来实现。例如：

• pages/blog/index.js 文件会自动映射到 /blog 路由。
• pages/blog/first-post.js 文件会自动映射到 /blog/first-post 路由。

动态路由

Next.js 支持动态路由，使用方括号 [] 来定义动态段。例如：

• pages/blog/[slug].js 文件可以匹配 /blog/any-slug 这样的路由。在组件中，可以通过 useRouter 钩子或 getStaticProps、getServerSideProps 等方法来获取动态路由参数。

// www.javascriptcn.com code example
import { useRouter } from 'next/router';

const BlogPost = () => {
  const router = useRouter();
  const { slug } = router.query;

  return <p>Post: {slug}</p>;
};

export default BlogPost;

API 路由

Next.js 还支持 API 路由，通过在 pages/api 目录下创建文件来实现。例如：

• pages/api/hello.js 文件会自动映射到 /api/hello 路由。

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

自定义路由

虽然 Next.js 默认使用文件系统路由，但你也可以通过自定义服务器配置或使用 next-routes 等库来实现自定义路由。不过，通常情况下，文件系统路由已经足够灵活，能够满足大多数应用的需求。