搜索引擎和用户都不希望找到一个不存在或不完整的页面。作为一个开发者，你也应该避免，因为这可能会减少你网站的重复访问次数，并影响搜索引擎对它的索引。
Next.js是一个流行的框架，它建立在React库之上，并带有一堆有用的内置功能，其中之一是处理重定向以避免这种情况。
在这篇文章中，我们将设置一个应用程序，并仔细看看你可以在Next.js项目中实现重定向的不同方式。我还将提供配置文件和路由的代码片段，并解释它们在Next.js中如何工作。
什么是重定向？
重定向使用户能够将一个已执行的URL转移到一个新的URL上，或者换一种方式，将一个传入的请求从一个路径重新路由到另一个路径。
这些通常由服务器通过HTTP重定向状态代码（3xx）处理，网络爬虫也可以理解。
重定向经常用于以下情况：网站的某个部分不存在或正在建设中，内容被移到不同的URL，路由系统已经改变，用户因访问限制而被重定向，或许多其他情况。
设置Next.js项目
我们将使用create-next-app ，这是Next.js官方支持的设置开发服务器的方式，我们将用它来测试我们的重定向实例。
首先，打开你的终端，运行命令npx create-next-app test-app 。这将创建一个新的项目文件夹，应用程序的所有逻辑都将在这里。
接下来，通过cd test-app ，将工作目录改为新创建的文件夹，然后运行npm run dev ，启动开发服务器。
然后，打开你的浏览器并导航到 [https://localhost:3000](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)再一次。现在你应该会自动重定向到 [https://localhost:3000/welcome](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 文件夹内，创建两个新的文件夹，名为draft 和blog ，然后在这两个文件夹内创建文件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/draft/article)你将会被重定向到 [https://localhost:3000/blog/article](https://localhost:3000/blog/article).slug可以是URL中任何支持的值，除非你为它创建一个路由，并且不要在多个层次上嵌套它。
通配符
要重定向嵌套的路由，你可以使用通配符，这基本上会把最后一个已知级别之后的所有路径重定向到新的路由。这就像在URL中添加一个* 字符到你所针对的lug一样简单。
切换回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/draft/react/tutorial).你应该立即被重定向到 [https://localhost:3000/blog/react/tutorial](https://localhost:3000/blog/react/tutorial).注意，整个嵌套路径被重定向了。
Regex查询
Regex是一个强大的工具，你可以用它来更有效地访问URL路径的不同部分。你将对重定向行为有更多的控制，并允许为重定向创建自定义规则。
将next.config.js ，改为以下代码：
module.exports = {
async redirects() {
return [
{
source: '/draft/:slug(^[a-z]+)',
destination: '/blog/article',
permanent: false,
},
]
},
}
在上面的代码片段中，我们只配置了仅由a 到z 字符组成的路由被重定向到/blog/article 路由，这是我们早先创建的。
在你的项目结构中导航到draft 文件夹，并创建一个新的文件，article123.js ，其中包含以下代码：
export default function Article123() {
return <h1>Source route</h1>;
}
为了测试重合查询，重新启动开发服务器并尝试访问 [https://localhost:3000/draft/article](https://localhost:3000/draft/article).你将会被重定向到 [https://localhost:3000/blog/article](https://localhost:3000/blog/article)，因为该路径只由字母组成。
现在尝试访问 [https://localhost:3000/draft/article123](https://localhost:3000/draft/article123).你将被显示你输入的URL的内容，而不是被重定向，因为路由包括数字。
这里有几个有用的网站，可以帮助你写regex查询：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 的任何值都将被匹配。
在上面的代码片段中，我们使用了header ，并对host 关键值进行检查，以获得localhost:3000 。如果这些值在请求中得到满足，重定向将被进行。
重新启动开发服务器并尝试访问 [https://localhost:3000](https://localhost:3000).你将会被重定向到 [https://localhost:3000/welcome](https://localhost:3000/welcome)，因为host 值符合。
现在用Ctrl+C关闭开发服务器并运行npm run dev -- -p 8000 。这将在一个不同的端口上启动你的应用程序。现在访问你的应用程序在 [https://localhost:8000](https://localhost:8000).这一次你将不会被重定向，因为host 的值与你的重定向配置不匹配。
API重定向
Next.js内置了一个处理API调用的方法。你可以使用redirect 方法来执行重定向，如果某个响应是成功的。这在登录用户、提交表单和其他用例时非常方便。
要创建一个新的API路由，请浏览pages 内的api 文件夹，并创建一个新的文件，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](https://localhost:3000/form).你会看到一个输入字段，输入你的名字和提交按钮，将数值发送到API。输入任何值，提交，你应该被重定向到 [https://localhost:3000/welcome](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)，你就会自动被重定向到 [https://localhost:3000/welcome](https://localhost:3000/welcome)因为getStaticProps 或getServerSideProps 中的重定向规则被执行。
结语
在这篇文章中，我们研究了如何在Next.js中实现重定向的一些方法。首先，我们使用了next.config.js ，并为预定义路由编写了自定义配置，访问了单层和嵌套路由，并使用了regex来增加对重定向的控制。
然后，我们还仔细研究了如何根据收到的请求参数来创建重定向。最后，我们研究了如何使用API路由和静态网站生成与服务器端渲染来实现重定向。
我希望通过这篇文章你能学到一些新的东西，并且从现在开始你就能在你未来的Next.js应用中为所有的用例创建重定向。
