如何在 Next.js 中重定向页面以进行静态导出

Question

背景： 我的基于内容的网站中有一个 tag 页面，其中显示了指向其内容标记有该标签的页面的链接。但事实证明我的标签系统有问题，现在我想修剪页面。因此，我需要将其中只有一个帖子的标签重定向到单个帖子。以下是我迄今为止尝试过的：

export async function getStaticProps(context: any) {

  const res = await fetch(`${API_URL}/post/?tag=${context.params.tag}`)
  const posts = await res.json()

  for (var i = 0; i < posts.length; i++) {
    posts[i].link = '/blog/post/' + posts[i].slug;
  }
 
  if (posts.length===1){
    return {redirect: {
      permanent: true,
      destination: posts[0].link,
    },
  }
  }
  return {
    props: {
      posts: posts,
    },
  }
}

问题： 当我下一步在本地运行时，该解决方案有效。但是当我想将项目导出为静态时却失败了。

那么对于当前静态模式下工作的情况，正确的重定向方式是什么？

Answer 1

在 Next.js 中处理静态导出的重定向时，您应该使用

next.config.js

文件中的重定向配置。不幸的是，您不能在静态导出中使用 getStaticProps 进行重定向，因为它仅在

build time

运行，并且重定向需要在

runtime

运行。

以下是根据您的情况设置重定向的方法：

在您的

next.config.js

文件中，您可以使用redirects属性定义重定向。对于您的特定用例，您希望将只有一篇文章的标签重定向到一篇文章。这是一个例子：

// next.config.js file
module.exports = {
  async redirects() {
    const res = await fetch(`${API_URL}/tags`); // Fetch a list of tags or your data source
    const tags = await res.json();

    const redirects = [];

    tags.forEach((tag) => {
      if (tag.posts.length === 1) {
        redirects.push({
          source: `/tags/${tag.slug}`,
          destination: `/blog/post/${tag.posts[0].slug}`, // Redirect to the single post
          permanent: true, // Use permanent redirects if appropriate
        });
      }
    });

    return redirects;
  },
};