Next.js 服务器端永久重定向：将所有未知路由 301 跳转至 /home-js教程-PHP中文网

Next.js 服务器端永久重定向：将所有未知路由 301 跳转至 /home

本文详解如何在 Next.js 中通过 next.config.js 的 redirects 配置，实现对所有未定义路由的服务器端永久（301）重定向到 /home，避免 404 页面，提升 SEO 友好性与用户体验。

本文详解如何在 next.js 中通过 `next.config.js` 的 `redirects` 配置，实现对所有未定义路由的服务器端永久（301）重定向到 `/home`，避免 404 页面，提升 seo 友好性与用户体验。

在 Next.js 应用中，当用户访问如 /nonexistent 或 /old-page 等未定义路由时，框架默认返回 HTTP 404 状态并渲染 app/not-found.tsx（App Router）或 pages/404.tsx（Pages Router）。但正如实际业务场景所述——你已迁移域名、旧 URL 大量失效——此时返回 404 不仅损害用户体验，更会稀释搜索引擎权重。真正的解决方案不是客户端跳转（如 useEffect + router.push），而是服务端发起的 HTTP 301 永久重定向，确保状态码正确、SEO 友好、且无闪烁或白屏。

✅ 正确做法：使用 next.config.js 中的 redirects 配置（支持 App Router 和 Pages Router）

以下为适用于 Next.js 13.4+（App Router） 的完整配置示例：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: '/:path*',
        destination: '/home',
        permanent: true, // → 发送 301 状态码
        has: [
          {
            type: 'header',
            key: 'x-nextjs-data', // 排除数据请求（如 getServerSideProps 的 /_next/data 请求）
            value: undefined,
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

⚠️ 关键说明：

cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。

下载

source: '/:path*' 使用通配符匹配所有路径（包括 /, /abc, /x/y/z），但不匹配静态资源（如 /favicon.ico, /_next/...）——Next.js 内部已自动排除。
permanent: true 是核心：它等价于 statusCode: 301，明确告知浏览器和搜索引擎该重定向是永久性的，利于链接权重传递。
has 条件用于排除数据请求（如客户端触发的 fetch('/api/...') 或 Next.js 自动发起的 RSC 数据请求），避免将 API 请求错误重定向导致功能异常。若未使用 getServerSideProps 或 fetch 数据请求，此条件可省略。

? 补充建议（提升健壮性）：

若你仍需保留部分 404 场景（如明确废弃的敏感路径），可在 redirects 数组中前置更具体的规则，利用“匹配优先”原则：

{
  source: '/admin/:path*',
  destination: '/403',
  permanent: false, // 307 临时重定向
},
{
  source: '/:path*',
  destination: '/home',
  permanent: true,
}