如何在 Next.js 中实现重定向

搜索引擎和用户都不想找到不存在或不完整的页面。作为开发人员，您也应该避免使用它，因为它可以减少对您网站的重复访问次数并影响搜索引擎对其进行索引的方式。

Next.js 是一个流行的框架，它构建在 React 库之上，并带有许多有用的内置功能，其中一个是处理重定向以避免此类情况。

在本文中，我们将设置一个应用程序，并仔细研究在 Next.js 项目中实现重定向的不同方法。我还将提供配置文件和路由的代码片段，并解释它们在 Next.js 中的工作方式。

让我们开始吧。

• 什么是重定向？

• 设置 Next.js 项目

• 定义的路线

• 蛞蝓匹配

• 通配符

• 正则表达式查询

• 基本路径支持

• 请求参数

• API 重定向

• getStaticProps 和 getServerSideProps

什么是重定向？

重定向使用户能够将执行的 URL 传输到新的 URL，或者换句话说，将传入请求从一个路径重新路由到另一个路径。

这些通常由服务器通过 HTTP 重定向状态码 (3xx) 处理，网络爬虫也可以理解这些状态码。

重定向经常用于以下情况：网站的某个部分不存在或正在建设中、内容已移动到不同的 URL、路由系统已更改、用户因访问限制而被重定向或许多其他情况。

设置 Next.js 项目

我们将使用create-next-appNext.js 官方支持的方式来设置我们将用于测试重定向示例的开发服务器。

首先，打开终端并运行命令npx create-next-app test-app。这将创建一个新的项目文件夹，应用程序的所有逻辑都将在其中保存。

接下来，将工作目录更改为新创建的文件夹cd test-app，然后运行npm run dev以启动开发服务器。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

然后，打开浏览器并导航到https://localhost:3000以查看应用程序的实时预览。

定义的路线

在 Next.js 中创建重定向的最常见方法是使用该next.config.js文件，该文件应位于产品结构的根级别。如果不是，请创建一个并包含以下代码：

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        destination: '/welcome',
        permanent: true,
      },
    ]
  },
}

在上面的代码片段中，source属性是请求的路由，destination是我们希望将用户重定向到的路由，并permanent控制我们是否希望为客户端机器和搜索引擎缓存重定向路由。

让/welcome我们为配置中使用的新路由创建一个。在文件夹的根pages目录中，创建一个新文件welcome.js，并包含以下代码：

export default function Welcome() {
  return <h1>Welcome page</h1>;
}

现在，通过按键盘上的Ctrl+C重新启动开发服务器，然后运行；npm run dev重新开始。这是我们所做的更改next.config.js生效所必需的。请记住，对于本文中的更多示例，也要这样做。

要测试重定向，请打开浏览器并https://localhost:3000再次导航到。您现在应该被自动重定向到