basePath is not applied to next/image public assets when using output: "export"
Open
Nobody has claimed this yet.
Image (next/image)
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://github.com/Dikshit-Sapkota/bug_issuee
To Reproduce
- Create a new Next.js project.
npx create-next-app@latest bug
- Configure
next.config.ts:
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
output: "export",
basePath: "/bug",
trailingSlash: true,
images: {
unoptimized: true,
},
};
export default nextConfig;
3.Run:
npm run build
Deploying the exported site under /bug results in 404 errors for all public images.
Current vs. Expected behavior
When the application is hosted under:
https://example.com/bug/
the browser requests:
https://example.com/logo.png
Provide environment information
Node.js v24.18.0
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 25.5.0: Mon Apr 27 20:38:00 PDT 2026; root:xnu-12377.121.6~2/RELEASE_ARM64_T8103
Available memory (MB): 8192
Available CPU cores: 8
Binaries:
Node: 24.18.0
npm: 11.16.0
Yarn: 1.22.22
pnpm: N/A
Relevant Packages:
next: 16.2.11 // Latest available version is detected (16.2.11).
eslint-config-next: N/A
react: 19.2.4
react-dom: 19.2.4
typescript: 5.9.3
Next.js Config:
output: export
Which area(s) are affected? (Select all that apply)
Image (next/image)
Which stage(s) are affected? (Select all that apply)
Other (Deployed)
Additional context
- The issue is reproducible in a newly created Next.js project.
- It does not require any third-party libraries.
basePathis correctly applied to<Link>routes.- Static assets under
/_next/are also prefixed correctly. - The issue only affects public assets rendered with
next/imagewhen usingoutput: "export"and deploying under a subdirectory.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction and its next.config.ts, then run npm run build with output: "export", basePath, trailingSlash, and unoptimized images enabled. Inspect the generated requests for public images rendered with next/image and add regression coverage for the exported site; done means those requests include /bug and no longer return 404.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100