vercel / vercel/next.js

basePath is not applied to next/image public assets when using output: "export"

Open
#96,094 2 comments 0 reactions 0 assignees View on GitHub

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
  1. Create a new Next.js project.
npx create-next-app@latest bug
  1. 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.
  • basePath is correctly applied to <Link> routes.
  • Static assets under /_next/ are also prefixed correctly.
  • The issue only affects public assets rendered with next/image when using output: "export" and deploying under a subdirectory.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.