在 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再次导航到。您现在应该被自动重定向到https://localhost:3000/welcome.

蛞蝓匹配

Next.js 支持访问 URL 的 slug 并为它们配置重定向。对于此示例，让我们next.config.js对此进行编辑：

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

要设置路由，请进入pages文件夹并创建两个名为draftandblog的新文件夹，然后article.js在它们中创建文件。

在draft/article.js文件中，包含以下代码：

export default function Article() {
  return <h1>Source route</h1>;
}

在 中blog/article.js，包括以下代码：

export default function Article() {
  return <h1>Destination route</h1>;
}

重新启动开发服务器后，尝试访问https://localhost:3000/draft/article，您将被重定向到https://localhost:3000/blog/article. slug 可以是 URL 中任何受支持的值，除非您为其创建路由并且不将其嵌套在多个级别上。

通配符

要重定向嵌套路由，您可以使用通配符，它基本上会采用最后一个已知级别之后的所有路径并重定向到新路由。*就像在 URL 中定位的 slug中添加一个字符一样简单。

切换回next.config.js并将其更改为：

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

为了创建嵌套路由，我们必须在draft和文件夹中创建几个子blog文件夹。假设我们想通过技术对文章进行分类，所以我们将调用这两个文件夹react。在两个新创建的文件夹中，添加文件tutorial.js.

在draft/react/tutorial.js中，包括以下代码：

export default function Tutorial() {
  return <h1>Nested source route</h1>;
}

在blog/react/tutorial.js中，包括以下代码：

export default function Tutorial() {
  return <h1>Nested destination route</h1>;
}

现在，重新启动开发服务器并访问https://localhost:3000/draft/react/tutorial. 您应该立即被重定向到https://localhost:3000/blog/react/tutorial. 请注意，整个嵌套路径已被重定向。

正则表达式查询

正则表达式是一个强大的工具，您可以使用它更有效地访问 URL 路径的不同部分。您将对重定向行为有更多控制权，智能翻译官(fanyi1234.com)，多国互译专业翻译软件，可一次性翻译2000字！并可以为重定向创建自定义规则。

更改next.config.js为以下代码：

module.exports = {
  async redirects() {
    return [
      {
        source: '/draft/:slug(^[a-z] )',
        destination: '/blog/article',
        permanent: false,
      },
    ]
  },
}

在上面的代码片段中，我们只配置了仅由atoz字符组成的路由，这些路由被重定向到/blog/article我们之前创建的路由。

---

来自 LogRocket 的更多精彩文章：

• 不要错过来自 LogRocket 的精选时事通讯The Replay

• 了解LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题

• 使用 React 的 useEffect优化应用程序的性能

• 在多个 Node 版本之间切换

• 了解如何使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri，一个用于构建二进制文件的新框架

• 比较NestJS 与 Express.js

---

导航到draft项目结构中的文件夹并创建一个新文件 ，article123.js其中包含以下代码：

export default function Article123() {
  return <h1>Source route</h1>;
}

要测试正则表达式查询，请重新启动开发服务器并尝试访问https://localhost:3000/draft/article. 您将被重定向到https://localhost:3000/blog/article，因为该路线仅包含字母。

现在尝试访问https://localhost:3000/draft/article123. 您将看到您输入的 URL 的内容，并且不会被重定向，因为路由包含数字。

这里有几个有用的站点可以帮助您编写正则表达式查询：regex101和regexr。

基本路径支持

Next.js 还支持 URL 中基本路径的前缀。如果您必须设置多个重定向并且不想重复编写所有路由的基本路径，这可能会很有用。

将其更改next.config.js为以下代码：

module.exports = {
  basePath: '/content',

  async redirects() {
    return [
      {
        source: '/draft/article',
        destination: '/blog/article',
        permanent: true,
      },
      {
        source: '/draft/react/tutorial',
        destination: '/blog/react/tutorial',
        basePath: false,
        permanent: true,
      },
    ]
  },
}

在第一个重定向对象中，源变成/content/draft/article了目标/content/blog/article，而在第二个重定向对象中，基本路径被忽略了，因为我们设置basePath为false。

请求参数

使用 Next.js，您可以进一步控制重定向、访问主机、标头、cookie 和查询值。使用该has字段，您可以编写自定义规则来控制是否应在不同情况下执行重定向。

将其更改next.config.js为以下代码：

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'host',
            value: 'localhost:3000',
          },
        ],
        permanent: false,
        destination: '/welcome',
      },
    ];
  },
}

type必须header是、cookie或query。key必须是要匹配的所选类型的字符串。是可选的value，如果未定义，key则将匹配 的任何值。

在上面的代码片段中，我们使用headerand 检查host键来获取localhost:3000值。如果在请求中满足这些值，将进行重定向。

重新启动开发服务器并尝试访问https://localhost:3000. 您将被重定向到https://localhost:3000/welcome，因为host值匹配。

现在使用Ctrl C关闭开发服务器并运行npm run dev -- -p 8000. 这将在不同的端口上启动您的应用程序。现在访问您的应用程序https://localhost:8000。这次您不会被重定向，因为该host值与您的重定向配置不匹配。

API 重定向

Next.js 带有处理 API 调用的内置方式。redirect如果某个响应成功，您可以使用该方法执行重定向。这在登录用户、提交表单和其他用例时非常方便。

要创建新的 API 路由，请导航到其中的api文件夹并使用以下代码pages创建一个新文件 .data.js

export default async function handler(req, res) {
  console.log(`Name: ${req.body.name}`);
  try {
    // some await stuff here
    res.redirect(307, '/welcome');
  } catch (err) {
    res.status(500).send({ error: 'Error while fetching data' });
  }
}

然后，导航到文件夹的根级别pages并创建一个新文件form.js，以创建表单本身。在新创建的文件中包含以下代码：

export default function Form() {
  return (
    <form action='/api/data' method='post'>
      <label htmlFor='name'>Your name:</label>
      <input type='text' id='name' name='name' />
      <button type='submit'>Submit</button>
    </form>
  );
}

现在打开浏览器并导航到https://localhost:3000/form. 您将看到输入字段以输入您的姓名和提交按钮以将值发送到 API。输入任何值，提交它，你应该被重定向到https://localhost:3000/welcome.

要确保 API 收到您输入的值，请切换回终端并检查打印的日志。该值应显示在那里。

getStaticProps 和 getServerSideProps

如果你想通过 Next.js 的内置预渲染方法设置重定向，你可以将它们包含在getStaticProps或中getServerSideProps。

使用getStaticProps，页面将在构建时预渲染（静态站点生成）。

要设置示例，请导航到pages文件夹的根级别并编辑index.js：

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

export async function getStaticProps() {
  const content = null;

  if (!content) {
    return {
      redirect: {
        permanent: false,
        destination: '/welcome',
      },
    };
  }

  return {
    props: {},
  };
}

同样，对于服务器端渲染 (SSG)，您将使用getServerSideProps，这将确保 Next.js 在每个请求上预渲染页面。

要设置 SSG 示例，请index.js按如下所示进行编辑：

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

export async function getServerSideProps() {
  const content = null;

  if (!content) {
    return {
      redirect: {
        permanent: false,
        destination: '/welcome',
      },
    };
  }

  return {
    props: {},
  };
}

要测试这两种情况中的任何一种，请尝试访问https://localhost:3000，您将被自动重定向到，https://localhost:3000/welcome因为重定向规则在getStaticPropsorgetServerSideProps被执行。

结论

在本文中，我们研究了如何在 Next.js 中实现重定向的多种方法。首先，我们使用next.config.js和编写预定义路由的自定义配置，访问单级和嵌套路由，并使用正则表达式来增加对重定向的控制。

然后，我们还仔细研究了如何根据收到的请求参数创建重定向。最后，我们研究了如何使用 API 路由和静态站点生成与服务器端呈现来实现重定向。

我希望通过这篇文章你学到了一些新的东西，从现在开始你将能够为你未来的 Next.js 应用程序中的所有用例创建重定向。

这篇好文章是转载于：学新通技术网