no index.html file in my nextjs app. Netlify doesn't like that

Question

Netlify wont allow you to deploy a website unless there is an index.html file. Nextjs didn't set me up with one when I did create-next-app. Anyone know how to fix this?

Rocha

Answer 1

Background

There are two main ways to deploy Next.js on Netlify: as a static website or with next-on-netlify.

By default, Netlify deploys static websites, and Next.js is dynamic. Next.js requires a server. When you run npm run build to build Next.js, you aren't actually creating the HTML pages. Instead, you're creating the production assets that the Next.js server will then serve to visitors. That's why you're not seeing an index.html file.

Static website

If your website is completely static, this may a good option to consider. Your website will be blazing fast. This will export your entire site as HTML, CSS, JS, and all the static assets (e.g., pictures).

To use this, update your build command in your package.json to next build && next export. Then in your Netlify settings for the site, make sure the build command is npm run build' and the publish directory is out`.

There are a lot more details about this in the Next.js docs. Especially take care to read about what is and isn't supported in this static export.

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

Next on Netlify

A few months ago, Netlify released a plugin called "Next on Netlify". It's just a plugin that makes using their next-on-netlify npm package easier to use.

This will let you take full advantage of Next.js.

To use it, just go to your plugins tab, search for "Next on Netlify", then add the plugin.

If you want more details, check out their blog post: https://www.netlify.com/blog/2020/12/07/announcing-one-click-install-next.js-build-plugin-on-netlify/

Here's a link to the Github repo: https://github.com/netlify/next-on-netlify

Caesar

"next export" is deprecated – Noddle

Answer 2

Static exporting is important if you're using a CDN or a classical environment like a traditional web server (nginix, Apache httpd, etc.). In my case, next.js cannot create a static export because of an image optimization warning. When I build the project with the following command.

npm run build

I get such a warning.

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

A possible solution is to disable image optimization in next.config.js file. This problem is also stated in a GitHub Issue

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

After this change, you will probably have the index.html in your out directory.

Merissa

Answer 3

Just in case anyone's looking for the index.html file when using next build without static export or using any of the previous stated methods, know that you can find the file inside the ./.next/server/app/index.html folder.

Ichthyosaur