How to export stand-alone HTML-CSS-JS from next-js to use in websites like github-pages

Question

I have a simple nextjs application in next version 14.1.1. I tried to export my application into plain html format. But there is a problem. static contents like css, js, font, etc. files, have absolute address in exported html.

for example

/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2

But I need to export them like

./_next/static/media/c9a5bc6a7c948fb0-s.p.woff2

or like this:

_next/static/media/c9a5bc6a7c948fb0-s.p.woff2

How can I change this?

What I've tried:

In next.config.mjs I added assetPrefix:"./" like:

/** @type {import('next').NextConfig} */
const nextConfig = {
    output:'export',
    assetPrefix:"./",
};
 /* module.exports = nextConfig*/
export default nextConfig;

However, this led to the error message: assetPrefix must start with a leading slash or be an absolute URL(http:// or https://).

Is there any straight-forward solution to export Next-js application as plain html-css-js format?

Any help will be appreciated.

Answer 1

Absolute URLs of the referenced static content are required to properly work in the applications with routing. Basic approach in such applications is following:

1. Configure web server in a way, so it will send back index.html for any request for non-existing file;
2. index.html references our react app;
3. Once called, our app checks the actual URL in the browser's address bar and renders appropriate components.

Now, lets imagine we have stylesheet reference in out index.html like <link rel="stylesheet" href="./static/styles.css" />. And we have few pages on the https://example.com:

• / – our home page, for it stylesheet will resolve into https://example.com/static/styles.css and will be served successfully;
• /products – product list, for it styles URL will resolve into https://example.com/products/static/styles.css which does not exists;
• /products/17 – detail page for product #17, again will resolve our URL into non-existing https://example.com/products/17/static/styles.css.

Based on the link you've shared in comment, you're publishing the app on the non-root path, so you have to configure basePath, so it can generate correct absolute paths during the build:

/** @type {import('next').NextConfig} */
const nextConfig = {
    output:'export',
    basePath:"/Profile",
};
 /* module.exports = nextConfig*/
export default nextConfig;