1

I have a simple Next.js application (Login Page - Home Page) in Next.js version 15.1.4. I tried to export my application into plain HTML format. However, there is a problem: static contents like CSS, JS, font files, etc., have absolute addresses in the exported HTML.

For example:

/_next/static/chunks/app/layout-92d6c334a1dc3901.js

But I need them to be exported like this:

./_next/static/chunks/app/layout-92d6c334a1dc3901.js

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

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

However, this led to the following error:

assetPrefix must start with a leading slash or be an absolute URL (http:// or https://)

I tried another configuration:

\`/\*\* @type {import('next').NextConfig} \*/
const nextConfig = {
output: 'export',
images: {
unoptimized: true,
},
assetPrefix: process.env.ELECTRON === 'true' ? './' : '/',
};

export default nextConfig;\`

In this case, the build was successful, but the paths in the exported HTML files were still absolute.

Electron Configuration: In main.js, I changed mainWindow.loadURL from using localhost to the following:

// Load the static files from the `out` directory
mainWindow.loadURL(
    url.format({
        pathname: path.join(__dirname, 'out', 'index.html'),
        protocol: 'file:',
        slashes: true,
    })
);

package.json Configuration:

"scripts": {
    "dev": "concurrently \"next dev\" \"electron .\"",
    "build": "next build && electron-builder",
    "start": "electron .",
    "lint": "next lint"
},
"main": "main.js",
"files": [
    "build/**/*",
    "node_modules/**/*",
    "main.js",
    "preload.js",
    "preloader.html",
    "package.json",
    "out/**/*"
],
"extraResources": [
    "assets/**/*",
    "database.sqlite"
]

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.