NextJS 14（Vercel部署）如何修改默认404错误页面路由

步骤1：创建自定义404错误页面 #

在项目的pages/errors目录下新建404.js文件（若errors目录不存在则先创建），编写自定义错误页面内容：

function Custom404() {
  return (
    <div>
      <h1>404 - 页面不存在</h1>
      <p>你访问的页面无法找到，请检查网址是否正确。</p>
    </div>
  )
}

export default Custom404

步骤2：全局错误处理重定向 #

在pages目录下新建或修改_error.js文件，通过状态码判断重定向到自定义404页面：

function Error({ statusCode }) {
  if (statusCode === 404) {
    // 客户端环境直接跳转
    if (typeof window !== 'undefined') {
      window.location.href = '/errors/404'
    }
    return <></>
  }
  return (
    <div>
      <h1>发生错误</h1>
      <p>状态码: {statusCode}</p>
    </div>
  )
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

步骤3：确保用户路由优先级 #

在pages/[username]/index.js中，通过getServerSideProps校验用户存在性，避免错误拦截合法的"404"用户页面：

export async function getServerSideProps(context) {
  const { username } = context.params
  // 替换为实际获取用户数据的逻辑
  const userData = await fetchUserByUsername(username)
  
  if (!userData) {
    // 用户不存在时触发404错误
    return {
      notFound: true,
    }
  }

  return {
    props: { userData },
  }
}

function UserPage({ userData }) {
  return (
    <div>
      <h1>用户 {userData.username} 的主页</h1>
      {/* 用户页面内容 */}
    </div>
  )
}

export default UserPage

步骤4：Vercel路由规则配置（可选） #

若部署后路由匹配异常，在项目根目录创建vercel.json添加重写规则：

{
  "routes": [
    { "src": "/404", "dest": "/[username]" },
    { "src": "/errors/404", "dest": "/errors/404" },
    { "src": "/(.*)", "dest": "/$1" }
  ]
}

完成以上配置后：

• 访问.com/404会匹配用户路由，展示已注册的"404"用户页面
• 不存在的路由会触发404错误，重定向到.com/errors/404展示自定义错误页

内容的提问来源于stack exchange，提问作者Broda Noel