Next.js静态导出模式下，如何将仅含单篇文章的标签页重定向至对应文章页

你遇到的问题其实是Next.js静态导出模式的特性导致的——静态导出会生成纯静态HTML文件，不会保留服务器端的动态逻辑，所以你在getStaticProps里写的redirect配置在导出后完全不会生效，因为没有服务器来处理这个重定向请求。

下面给你两种可行的解决方案，你可以根据自己的需求选择：

方案一：客户端侧重定向（简单易实现） #

这种方法是在标签页组件加载到客户端后，判断文章数量，如果只有一篇，就用Next.js的路由工具跳转到对应的文章页。

修改你的代码如下：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function TagPage({ posts }) {
  const router = useRouter();

  useEffect(() => {
    // 当页面加载后，检查文章数量，仅一篇就跳转
    if (posts.length === 1) {
      // 使用replace避免在浏览器历史记录里留下标签页的记录
      router.replace(posts[0].link);
    }
  }, [posts, router]);

  // 如果文章数量大于1，正常渲染标签页内容
  if (posts.length > 1) {
    return (
      <div className="tag-page">
        <h1>标签：{router.query.tag}</h1>
        <ul>
          {posts.map(post => (
            <li key={post.id}>
              <a href={post.link}>{post.title}</a>
            </li>
          ))}
        </ul>
      </div>
    );
  }

  // 跳转过程中可以显示加载状态，避免页面闪烁
  return <div>加载中...</div>;
}

export async function getStaticProps(context: any) {
  const res = await fetch(`${API_URL}/post/?tag=${context.params.tag}`);
  const posts = await res.json();

  // 给每篇文章拼接链接
  posts.forEach(post => {
    post.link = `/blog/post/${post.slug}`;
  });

  // 静态导出时redirect不生效，直接返回文章数据
  return {
    props: { posts },
  };
}

优点&缺点 #

• 优点：实现非常简单，不需要额外的接口或构建配置，适合快速解决问题。
• 缺点：会先加载标签页的HTML，然后再跳转，可能会有短暂的页面闪烁（可以通过加载状态优化）。

方案二：构建时生成静态映射（无闪烁体验更好） #

如果你想要更流畅的用户体验，避免客户端跳转的闪烁，可以在构建阶段就提前处理所有标签，把仅含单篇文章的标签路径直接映射到文章页面。

修改next.config.js，利用exportPathMap来实现：

module.exports = {
  async exportPathMap() {
    const paths = {};

    // 第一步：获取网站所有的标签列表（需要你有对应的API接口）
    const tagsRes = await fetch(`${API_URL}/tags`);
    const tags = await tagsRes.json();

    // 第二步：遍历每个标签，检查对应的文章数量
    for (const tag of tags) {
      const postsRes = await fetch(`${API_URL}/post/?tag=${tag.name}`);
      const posts = await postsRes.json();

      if (posts.length === 1) {
        // 如果仅一篇文章，直接把标签路径映射到文章页面
        paths[`/tags/${tag.name}`] = {
          page: '/blog/post/[slug]',
          query: { slug: posts[0].slug },
        };
      } else {
        // 否则正常生成标签页的静态路径
        paths[`/tags/${tag.name}`] = {
          page: '/tags/[tag]',
          query: { tag: tag.name },
        };
      }
    }

    // 别忘了添加其他页面的路径（比如首页、博客列表等）
    paths['/'] = { page: '/' };
    paths['/blog'] = { page: '/blog' };

    return paths;
  },
};

优点&缺点 #

• 优点：构建时直接生成对应文章的静态文件，访问标签路径会直接加载文章内容，没有跳转闪烁，对SEO更友好。
• 缺点：需要你有获取所有标签的API接口，并且构建时间会随着标签数量增加而变长。

备注：内容来源于stack exchange，提问作者Ehsan88