wendoj/developer-portfolio

Generating Static HTML Pages

Closed this issue · 6 comments

J4ckFr05t commented

I modified the next.config.js to include:
const config = withPWA({
reactStrictMode: true,
output: 'export'
});

it generates a output folder, but there no index.html file in it.

How can i create a static HTML file for this NextJS project

wendoj commented

You have to disable the image optimization API so it would look something like this:

const config = withPWA({
  output: 'export',
  reactStrictMode: true,
  images: {
    unoptimized: true,
  }
});
J4ckFr05t commented

I added that got the below when opening index.html
image

❯ npm run build

portfolio@0.1.0 build
next build

▲ Next.js 14.2.16

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
✓ Linting and checking validity of types
Creating an optimized production build ...

[PWA] Compile server
[PWA] Compile server
[PWA] Compile client (static)
[PWA] Auto register service worker with: /Users/jibingeorge/Documents/portfolio/developer-portfolio/node_modules/next-pwa/register.js
[PWA] Service worker: /Users/jibingeorge/Documents/portfolio/developer-portfolio/public/service-worker.js
[PWA] url: /service-worker.js
[PWA] scope: /
(node:27983) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
✓ Compiled successfully
✓ Collecting page data
✓ Generating static pages (3/3)
✓ Collecting build traces
✓ Finalizing page optimization

Route (pages) Size First Load JS
┌ ○ / 620 kB 701 kB
├ └ css/9021ea1e0784d42f.css 1.49 kB
├ /_app 0 B 81.4 kB
└ ○ /404 180 B 81.6 kB

  • First Load JS shared by all 87.2 kB
    ├ chunks/framework-49c6cecf1f6d5795.js 44.9 kB
    ├ chunks/main-f67601b1ccf81ce3.js 34.3 kB
    └ other shared chunks (total) 8 kB

○ (Static) prerendered as static content

wendoj commented

Could you please export the code to CodeSandbox so that I can review it? Thank you.

wendoj commented

This happens because Next.js is designed to be run on a server, and it expects the files to be served over HTTP so the assets are prefixed with '/' so if you try to open it directly, it would try and fetch resources from, for example,
'file:///C:/_next/static/css/9021ea1e0784d42f.css' instead of including the full path on your local directory.

To fix this, you can use a static file server to serve the files from the out directory:
npx serve out

Alternatively, you can deploy the out directory to any static hosting service like Github Pages, Vercel, Netlify, etc.

J4ckFr05t commented

Thank you, I really appreciate your help.

  • 👍1