Next.js Discord

Discord Forum

Cannot display public assets (image) after next build && next export

Answered
Birman posted this in #help-forum
Open in Discord
Avatar
BirmanOP
Hi. I am trying to export my website as static HTML files using app router. So I ran next build && next export and the output is generated in my out directory. However, when running using npx serve out/, my website runs fine but the images in my public folder are not displayed.
I use image src as such
<img src="/images/logo.png" alt="Site logo" />

where my logo.png file is located in /public/images/logo.png and the output logo file is generated in /out/images/logo.png.
My next.config.js file looks like
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    images: { unoptimized: true }
}
module.exports = nextConfig

I am using Next 14.1.4. Can anyone help me understand why this issue occurs? Before migrating to app router, I was generating static HTML files just fine. Thank you for reading.
Answered by Birman
I don't know if this is the fix but modifying my next.config.js like this fixed the issue
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    images: { unoptimized: true },
    distDir: 'out',
    trailingSlash: true,
}
module.exports = nextConfig
View full answer

1 Reply

Avatar
BirmanOP
I don't know if this is the fix but modifying my next.config.js like this fixed the issue
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    images: { unoptimized: true },
    distDir: 'out',
    trailingSlash: true,
}
module.exports = nextConfig
Answer