Next.js静态导出场景下实现301 redirect的方案求助

由于静态导出模式下，Next.js的redirects配置和getServerSideProps都无法生效，以下是几种可行的实现方式：

1. 服务器端配置（推荐，真正的301重定向） #

如果你的静态文件部署在有服务器控制权的环境（如Nginx、Apache），直接在服务器配置中添加重定向规则，这是对SEO最友好的方案。

Nginx 示例配置 #

server {
    # 其他基础配置...

    # 单个页面重定向
    rewrite ^/old-page$ /new-page permanent;

    # 批量路径重定向（如旧目录下的所有页面）
    rewrite ^/old-category/(.*)$ /new-category/$1 permanent;
}

permanent标记会发送标准的301状态码，搜索引擎会正确识别并更新索引。

2. 生成静态重定向HTML文件 #

适合纯静态托管环境（如AWS S3、Vercel静态导出、Netlify），通过exportPathMap为每个旧URL生成专门的重定向页面。

步骤1：配置next.config.js #

module.exports = {
    exportPathMap: async function () {
        return {
            '/': { page: '/' },
            '/new-page': { page: '/new-page' },
            // 为旧URL映射到重定向组件
            '/old-page': { page: '/redirect', query: { to: '/new-page', status: 301 } },
            // 可添加更多旧URL规则
            '/old-post/123': { page: '/redirect', query: { to: '/new-post/456', status: 301 } }
        };
    }
};

步骤2：创建重定向组件（/pages/redirect.js） #

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

export default function RedirectPage() {
    const router = useRouter();
    const { to, status } = router.query;

    useEffect(() => {
        if (to) {
            // 301重定向使用replace，避免保留旧URL在浏览器历史栈
            status === '301' ? window.location.replace(to) : window.location.href = to;
        }
    }, [to, status]);

    return (
        <div style={{ textAlign: 'center', padding: '2rem' }}>
            <meta http-equiv="refresh" content={`0; url=${to}`} />
            <meta name="robots" content="noindex" />
            <p>正在跳转到新页面... 如果未自动跳转，请<a href={to}>点击这里</a></p>
        </div>
    );
}

执行next build && next export后，会生成old-page.html等静态文件，访问时会自动跳转到目标URL。

3. 客户端组件内重定向 #

适合单个旧页面的快速处理，直接在旧页面组件中添加重定向逻辑。

旧页面组件示例（/pages/old-page.js） #

import { useEffect } from 'react';

export default function OldPage() {
    useEffect(() => {
        window.location.replace('/new-page');
    }, []);

    return (
        <>
            <meta http-equiv="refresh" content="0; url=/new-page" />
            <meta name="robots" content="noindex" />
            <p>正在跳转到新页面... 如果没跳转，请<a href="/new-page">点击这里</a></p>
        </>
    );
}

注意：这种方式本质是客户端触发的跳转，虽然添加了meta标签辅助搜索引擎识别，但优先级低于服务器端的301配置。

内容的提问来源于stack exchange，提问作者aman pandey