CODEWITHSUNDEEP
next.jspathexportcustom-fontstatic-html
aaRitsch
aaRitsch

Reputation: 83

Next.js Static Html Export: Asset paths not working (CSS, custom fonts, images)

I created a Next.js project using next build && next export. When i open the index.html file from the 'out' folder in a browser, assets were not loaded. Not css, images and custom fonts. Because of wrong asset paths.

The exported paths are for example: /vercel.svg but should be ./vercel.svg to load properly. The problem is that the latter path gives an error on npm run dev, so can't be changed in the repo. What is the recommended way to use next export which leads to correct asset paths? The Static HTML Export documentation does not mention any requirements for configuration.

I already found out that adding assetPrefix: './' or assetPrefix: '.' to next.config.js makes CSS load correctly. But not custom fonts and images. But is that the recommended way to solve the problem partly? What approach should be used to solve the custom font and image paths?

I am aware of another workaround which works good for images: Changing paths by environment variable: process.env.NODE_ENV === 'development' ? '/vercel.svg' : './vercel.svg'

But I was still unable to find a solution for custom fonts. There are some discussions about this topic out there, but I couldn't find a satisfying answer.

Any recommendations?

Here is an example to work with: https://github.com/aaRitsch/next-build-static-asset-path

Upvotes: 2

Views: 683

Answers (0)

Related Questions