CODEWITHSUNDEEP
javascriptnext.js
Arless
Arless

Reputation: 51

Can we no longer export static pages in nextjs 14?

I'm trying to export my project to static HTML pages and I don't get the CSS styles

My configuration in next.config.js

** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: true,
  },
  output: "export",
  reactStrictMode: false,
};

module.exports = nextConfig;

and when I try to run npm run build I find that the files do appear in the output folder but when I put them on a web server the CSS styles are not there

Try making a new example by running

npx create-next-app@lates

in next.config.js I put output: "export", and execute

npm run build

and the CSS is not exported either

Maybe nextjs no longer allows you to export static pages?

In the console I don't get any errors, only the files are without styles and probably also without JavaScript

Upvotes: 4

Views: 3121

Answers (2)

Swapnil Sharma
Swapnil Sharma

Reputation: 1

You need to put it on a server or the paths would be messed up and the CSS wont show, so what I usually do is use a package called serve. Install this globally on your machine with npm i -g serve, then you can run serve -s ./build -p 8000 to run the server on port 8000.

Upvotes: 0

Iacob Erik
Iacob Erik

Reputation: 21

Try this

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  distDir: "build",
  output: "export",
};

module.exports = nextConfig;

Ensure that your CSS files are being imported correctly in your components/pages. Verify that the import paths are correct, and the CSS files are present in the expected locations.

Worked for me.

css location should be there

yourApp\build_next\static\css

Here you can find more.

https://nextjs.org/docs/pages/building-your-application/deploying/static-exports

Hope It will work. I am new to this too. Good Luck!

Upvotes: 2

Related Questions