ReactPress系列—Next.js 的动态路由使用介绍

ReactPress Github项目地址：https://github.com/fecommunity/reactpress 欢迎提出宝贵的建议，感谢Star。

Next.js 的动态路由使用介绍

Next.js 是一个流行的 React 框架，支持服务端渲染、静态站点生成和动态路由等功能，极大地简化了构建现代 Web 应用程序的过程。本文将详细介绍 Next.js 的动态路由功能，并通过简单的代码示例帮助理解。

一、动态路由的基本概念

动态路由允许开发者创建灵活的 URL 模式，对于管理不同类型的页面内容尤其有用，例如博客文章、产品页面等，可以根据 ID 或分类来加载相应的内容。

在 Next.js 中，可以通过向页面路径添加方括号 [param] 来创建动态路由。例如，pages/post/[pid].js 可以匹配 /post/1、/post/abc 等路由。

二、动态路由的使用示例

1. 基本动态路由

假设我们有一个博客应用，需要根据文章的 slug 来显示不同的文章详情页。我们可以创建一个 pages/post/[slug].js 文件来处理动态路由。

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

export default function Post() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Post: {slug}</h1>
      {/* 假设这是从 API 获取数据的部分，实际应用中可能通过 getServerSideProps 或 getStaticProps 实现 */}
    </div>
  );
}

在这个例子中&#