Next.js 应用在 Netlify 上首页空白且重定向失效的解决方案

next.js 应用部署到 netlify 后出现根路径（/）白屏、无法渲染首页，但其他路由正常访问——该问题通常由 netlify 的静态预渲染与 next.js app router（或混合渲染模式）不兼容导致，根本原因在于构建配置与平台能力错配。

当你将 Next.js 应用（尤其是使用 App Router 或启用了 output: 'standalone' / appDir: true 的项目）部署至 Netlify 时，若未正确启用 Next.js 插件支持 或误用静态导出（next export），Netlify 默认会以纯静态站点方式托管——它仅服务生成的 HTML 文件，而无法执行服务端逻辑（如 SSR、动态路由解析、中间件重定向等）。这直接导致：

• / 路径请求返回一个空或未水合的 HTML（常为
  但无 JS 加载或 hydration 失败）；
• redirects 在 next.config.js、_redirects 或 netlify.toml 中定义的规则被忽略（因 Next.js 的服务端重定向需运行时支持，静态托管下不生效）；
• 即使 index.tsx 存在，也可能因构建产物缺失、客户端路由未接管或 CSS/JS 加载失败而呈现空白。

✅ 正确解决方案（无需更换平台）：

1. 启用 Netlify 官方 Next.js 插件（推荐且最可靠）：

   

   VIVA

   一个免费的AI创意视觉设计平台

   下载
   • 在项目根目录安装插件：

     npm install --save-dev @netlify/nextjs

   • 在 netlify.toml 中启用（确保使用 next dev 兼容的构建命令）：

     [[plugins]]
       package = "@netlify/nextjs"

   • 确保 next.config.js 中未禁用 App Router 或 SSR（如 output: 'export' 必须移除）；
   • 构建命令保持为默认 next build（非 next export）。

2. 验证构建输出类型：
   运行本地构建并检查 .next/server/pages/index.js（Pages Router）或 .next/server/app/page.js（App Router）是否存在。若仅存在 .next/export/ 目录，则说明误启用了 next export —— Next.js 13+ 的 App Router 不支持 next export，必须依赖服务端渲染能力。

3. 替代方案：使用 Vercel（零配置）或手动配置 Serverless 函数（高级）：
   若插件仍异常，可改用 Vercel（Next.js 官方平台，自动适配所有渲染模式）；或在 Netlify 中通过 @netlify/functions 手动封装 Next.js serverless handler（适用于深度定制场景，但复杂度高）。

⚠️ 重要注意事项：

• 不要将 next export 与 App Router 混用 —— 这是常见误区，会导致全部动态功能失效；
• getStaticProps / generateStaticParams 仍可工作，但 / 必须有对应静态生成或服务端响应；
• 检查浏览器控制台是否有 Failed to load resource（JS/CSS 404）或 hydrate 错误，这可能指向 public 资源路径配置问题；
• 清理 Netlify 缓存（Build & Deploy → Clear cache and deploy）后再重试。

总结：该问题本质是平台能力与框架需求不匹配，而非代码缺陷。启用 @netlify/nextjs 插件即可让 Netlify 正确识别并运行 Next.js 的服务端逻辑，恢复 / 的正常渲染与重定向能力——无需放弃 Netlify，也无需回退到纯 React CSR 方案。