Next.js - 动态路由

简介

Next.js 是一个 React 应用程序框架，它可以帮助我们构建 SSR（服务器端渲染）应用程序。Next.js 提供了很多优秀的特性，比如预渲染、静态导出、动态导入，这些特性使得 Next.js 成为一个现代化的、易用的 React 开发框架。

在 Next.js 中，我们可以通过动态路由来实现动态的页面渲染。本文将详细介绍 Next.js 中的动态路由。

动态路由的概念

动态路由是指通过 URL 中的参数来动态地指定渲染的页面。例如对于一个博客网站，我们可以通过 URL 中的博客 ID 来动态地渲染不同的博客页面，而不是为每一个博客都写一个固定的路由规则。

Next.js 中的动态路由是由方括号括起来的参数组成，例如 /blog/[id].js，其中 id 是动态参数，我们可以使用这个参数来动态地渲染页面。

创建动态路由

我们可以通过在 pages 文件夹下创建方括号括起来的参数来创建动态路由，例如：

pages/
--| blog/
-----| [id].js

在这个例子中，我们创建了一个 blog 文件夹，其中包含一个 id.js 文件，这个文件的路径是 /blog/[id].js，其中 id 是动态参数。

在 id.js 文件中，我们可以通过 getInitialProps 方法来获取动态参数，并通过参数动态生成页面：

function Blog(props) {
  return (
    <div>
      <h1>{props.blog.title}</h1>
      <p>{props.blog.content}</p>
    </div>
  )
}

Blog.getInitialProps = async ({query}) => {
  const {id} = query;
  // 通过 id 获取博客数据
  const blog = await fetch(`/api/blog/${id}`);
  return {blog};
};

export default Blog;

在上面的例子中，我们通过 getInitialProps 方法来获取动态参数 id，并通过这个参数来获取博客数据，然后生成对应的页面。

动态参数的验证

在 Next.js 中，我们可以通过使用 next/router 来验证和获取动态参数。例如，我们可以使用 withRouter 或 useRouter 来获取动态参数，并执行验证：

import { withRouter } from 'next/router';

function Blog(props) {
  // 必须是数字才能匹配
  const {id} = props.router.query;
  if (!/^[0-9]+$/.test(id)) {
    return <div>博客 ID 必须是数字</div>
  }
  // ...
}

export default withRouter(Blog);

在上面的例子中，我们使用了 withRouter 来获取动态参数，并执行了一个简单的数字验证。如果验证失败则返回错误页面。

总结

本文介绍了 Next.js 中的动态路由，包括动态路由的概念、创建动态路由和动态参数的验证。使用动态路由可以让我们更容易地实现动态页面渲染，提高网站用户体验。