Next.js仓库部署至Netlify后显示空白页面

我之前也碰到过一模一样的问题！别着急，咱们一步步排查常见的原因，大部分情况都能快速解决：

• 检查Next.js版本与Netlify插件适配
  如果你用的是Next.js 13+的App Router，一定要确保Netlify的构建配置正确。首先在项目根目录创建或修改netlify.toml文件，配置如下：

  [build]
    command = "npm run build"
    publish = ".next"
  [[plugins]]
    package = "@netlify/plugin-nextjs"
  

  同时别忘了在项目里安装@netlify/plugin-nextjs依赖（执行npm install @netlify/plugin-nextjs --save-dev），这个插件是Netlify适配Next.js新路由的关键，缺失的话很容易出现空白页。

• 排查路由基础文件是否缺失
  要是用的是Pages Router，先确认pages目录下有没有_app.js/_app.tsx和_document.js/_document.tsx这两个核心文件。它们是Next.js渲染页面的基础框架，少了其中一个都可能导致页面无法正常初始化。另外也检查下Netlify的_redirects文件，有没有写错路由规则导致请求被错误重定向。

• 确认环境变量是否配置完整
  很多项目会依赖环境变量（比如API地址、第三方服务密钥），如果这些变量在Netlify上没配置，页面初始化时就会报错，进而显示空白。你可以打开浏览器开发者工具（按F12）切换到Console标签页，看看有没有类似process.env.XXX is undefined的报错。如果有，就去Netlify的站点设置 > 环境变量里把所有需要的变量补全。

• 查看构建日志找隐藏错误
  有时候构建过程看起来“成功”，但其实有隐藏的警告或错误。去Netlify的部署页面，找到最近的构建记录，点开查看完整日志。比如常见的依赖安装失败、代码编译错误（比如Module not found），这些都会导致最终部署的页面有问题。

• 检查静态资源路径配置
  如果你用了绝对路径引用静态资源，或者站点部署在Netlify的子路径下，要在next.config.js里配置basePath：

  module.exports = {
    basePath: '/你的子路径'
  }
  

  另外确保图片、CSS等资源的引用路径是正确的相对路径，避免出现404错误导致页面渲染失败。

备注：内容来源于stack exchange，提问作者sadegh