Next.js自定义404页面本地生效、Netlify部署后不显示如何解决？

你遇到的问题是Next.js v10版本的路由映射逻辑和Netlify默认部署规则不匹配导致的，具体解决步骤如下：

• 如果你使用的是Netlify标准Next.js部署方案（非全静态导出）：
  1. 先卸载可能存在的高版本Netlify Next.js适配插件：
     npm uninstall @netlify/plugin-nextjs
  2. 安装兼容Next.js v10的插件版本：
     npm install @netlify/plugin-nextjs@3.9.2 --save-dev
  3. 修改项目根目录的netlify.toml配置，添加插件声明并修正重定向规则：

  [[plugins]]
    package = "@netlify/plugin-nextjs"
  
  [[redirects]]
    from = "/*"
    to = "/404"
    status = 404
  

  注意：不要将重定向目标设置为/404.html，Next.js v10默认不会生成带html后缀的404页面资源
• 如果你使用next export做全静态站点导出：
  直接修改项目根目录的next.config.js配置，主动指定404页面的导出规则：

  module.exports = {
    // 保留你原有配置的基础上添加以下内容
    exportPathMap: async function (defaultPathMap) {
      return {
        ...defaultPathMap,
        '/404': { page: '/404' },
      }
    },
    trailingSlash: true,
  }
  

  配置完成后执行构建，导出的out目录下会自动生成根路径的404.html，你之前配置的指向/404.html的重定向规则即可正常生效。

修改完成后重新推送代码触发Netlify构建部署，自定义404页面即可正常展示。

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