如何在Next.js中配置服务端永久重定向替代404页面

根据你的需求，要把所有未匹配到已知路由（/home、/about、/contact）的请求通过服务端永久重定向到/home，下面分两种Next.js路由方案给出具体实现：

一、Pages Router 项目（使用pages目录） #

在项目根目录的next.config.js中配置redirects函数，利用路径匹配+排除规则实现：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        // 匹配所有路径（包括子路径）
        source: '/:path*',
        // 重定向目标页面
        destination: '/home',
        // 设置为301永久重定向
        permanent: true,
        // 排除合法路由，仅对未知路径生效
        missing: [
          { type: 'pathname', value: '/home' },
          { type: 'pathname', value: '/about' },
          { type: 'pathname', value: '/contact' },
          // 若需要保留根路径/，可添加此行
          // { type: 'pathname', value: '/' },
        ],
      },
    ]
  },
}

module.exports = nextConfig

关键说明： #

• source: '/:path*'是Next.js的通配符匹配语法，*表示匹配任意层级的子路径
• missing数组用来筛选出需要重定向的路径，只有当请求路径不在这个列表内时，才会触发重定向
• permanent: true对应HTTP 301状态码，会被浏览器和搜索引擎缓存，测试阶段可先设为false（302临时重定向）避免缓存干扰

二、App Router 项目（使用app目录，Next.js 13+） #

App Router推荐用中间件（Middleware）处理全局路由逻辑，在项目根目录创建middleware.js（或middleware.ts）文件：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // 定义允许访问的合法路由
  const allowedPaths = ['/home', '/about', '/contact']
  // 可选：若需要保留根路径/，将其加入数组
  // allowedPaths.push('/')
  
  const currentPath = request.nextUrl.pathname

  // 排除Next.js内部资源、API接口和静态文件，避免误重定向
  const excludedPrefixes = ['/_next/', '/api/', '/favicon.ico', '/images/']
  const isExcluded = excludedPrefixes.some(prefix => currentPath.startsWith(prefix))

  // 仅对未知且非排除路径执行重定向
  if (!allowedPaths.includes(currentPath) && !isExcluded) {
    return NextResponse.redirect(new URL('/home', request.url), { status: 301 })
  }

  // 合法路径直接放行
  return NextResponse.next()
}

// 指定中间件对所有路径生效
export const config = {
  matcher: '/:path*',
}

关键说明： #

• matcher: '/:path*'确保中间件覆盖所有请求路径
• excludedPrefixes可根据项目实际情况调整，比如添加静态资源目录、CDN路径等，避免这些资源被错误重定向
• status: 301设置永久重定向，测试阶段可改为302临时重定向

额外注意事项 #

1. 测试时优先使用302临时重定向，确认逻辑无误后再切换为301，防止浏览器缓存错误的重定向规则
2. 如果项目存在动态路由（如/blog/[id]），需要将对应的路径规则加入合法路由列表，避免被误重定向
3. 确保收购的旧域名已完成DNS解析，指向你的Next.js应用服务器，重定向逻辑才能生效

内容的提问来源于stack exchange，提问作者Mohammad Farhan