Reputation: 11
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"
]
Upvotes: 1
Views: 20