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?

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