6

I am new in nextJS and trying to deploy project in html.

Develop your app as you normally do with Next.js. Then run:

next build && next export
For that you may want to update the scripts in your package.json like this:

"scripts": {
  "build": "next build && next export"
}
And run it with:

npm run build
Then you'll have a static version of your app in the out directory.

above is from https://nextjs.org/docs/advanced-features/static-html-export#how-to-use-it

On npm run build its creating out folder but it have only js files, index.html file is missing.

How to export nextJS project in html.

Thanks

Update

on export i am getting this error

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.
    - Use any provider which supports Image Optimization (like Vercel).
    - Configure a third-party loader in `next.config.js`.
    - Use the `loader` prop for `next/image`.
  Read more: https://nextjs.org/docs/messages/export-image-api
Yogesh Saroya
  • 1,401
  • 5
  • 23
  • 52

2 Answers2

6

replacing Image with img and npm run build. Image optimization not supported next export

<img width={70} height={70} src="https://sun1.beTCOYGm.jpg" alt="мое фото" />
DMyrzich
  • 81
  • 1
  • 5
0

Add the following to module.exports in next.config.js:

  experimental: {
    images: {
      unoptimized: true,
    },
  },

This turns off image optimization.

Read more here: https://nextjs.org/docs/messages/export-image-api

And here: https://nextjs.org/docs/api-reference/next/image#unoptimized

Martin
  • 199
  • 2
  • 6