Issue with Static HTML Export in NextJS [duplicate]

Question

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

Yes but nothing for index.html

Yogesh Saroya
– Yogesh Saroya

2021-06-14 07:57:24 +00:00
Commented Jun 14, 2021 at 7:57 — Yogesh Saroya
– Yogesh Saroya, Commented Jun 14, 2021 at 7:57

DMyrzich · Accepted Answer · 2021-10-01 18:36:05Z

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="мое фото" />

edited Oct 1, 2021 at 18:36

answered Oct 1, 2021 at 15:48

DMyrzich

811 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin · Accepted Answer · 2022-09-06 12:27:57Z

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

answered Sep 6, 2022 at 12:27

Martin

3833 silver badges8 bronze badges

Collectives™ on Stack Overflow

Issue with Static HTML Export in NextJS [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related