我的 nextjs 应用程序中没有 index.html 文件。 Netlify 不喜欢这样

Question

Netlify 不允许您部署网站，除非有 index.html 文件。当我创建下一个应用程序时，Nextjs 没有为我设置一个。有人知道如何解决这个问题吗？

Answer 1

背景

在 Netlify 上部署 Next.js 有两种主要方法：作为静态网站或使用

next-on-netlify

。

默认情况下，Netlify 部署静态网站，Next.js 是动态的。 Next.js 需要服务器。当您运行

npm run build

来构建 Next.js 时，您实际上并没有创建 HTML 页面。相反，您正在创建生产资产，然后 Next.js 服务器将向访问者提供这些资产。这就是为什么您看不到

index.html

文件的原因。

静态网站

如果您的网站是完全静态的，这可能是一个值得考虑的好选择。您的网站将会快速发展。这会将您的整个网站导出为 HTML、CSS、JS 和所有静态资源（例如图片）。

要使用此功能，请将 package.json 中的构建命令更新为

next build && next export

。然后在站点的 Netlify 设置中，确保构建命令为

npm run build' and the publish directory is 

out`。

Next.js 文档中有更多关于此的详细信息。特别要注意了解此静态导出支持和不支持的内容。

https://nextjs.org/docs/advanced-features/static-html-export

Netlify 上的下一步

几个月前，Netlify 发布了一个名为“Next on Netlify”的插件。它只是一个插件，使使用他们的

next-on-netlify

npm 包更容易使用。

这将使您充分利用 Next.js。

要使用它，只需转到插件选项卡，搜索“Next on Netlify”，然后添加插件即可。

如果您想了解更多详细信息，请查看他们的博客文章：https://www.netlify.com/blog/2020/12/07/announcing-one-click-install-next.js-build-plugin-on-网络化/

这里是 Github 存储库的链接：https://github.com/netlify/next-on-netlify

Answer 2

如果您使用 CDN 或传统 Web 服务器（nginx、Apache httpd 等）等经典环境，静态导出非常重要。就我而言，next.js 由于图像优化警告而无法创建静态导出。当我使用以下命令构建项目时。

npm run build

我收到这样的警告。

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
  Read more: https://nextjs.org/docs/messages/export-image-api

一个可能的解决方案是禁用

next.config.js

文件中的图像优化。这个问题也在 GitHub Issue

中有说明

const nextConfig = {
  reactStrictMode: true,
  output: "export",
  images: {
    unoptimized: true,
  },
};

进行此更改后，您的

index.html

目录中可能会包含

out

。