fix: public/ assets 404 in PR previews (basePath) + lint guard#276
Merged
Conversation
Next prefixes /_next/* build assets with basePath but NOT public/ assets referenced by string src (e.g. <Image src="/branch-logo.png" />), so those 404 in ephemeral previews served under /pr-<N>/ (the file is actually at /pr-<N>/branch-logo.png). Images were broken in preview environments. - next.config.ts: expose NEXT_PUBLIC_BASE_PATH (= "/pr-<N>") in preview builds. - lib/asset.ts: assetPath() prefixes a public path with it (no-op in prod). - Route the 3 existing public-asset <Image src>s (Navbar logo + leaves bg, Header profile icon) through assetPath(). - ESLint: no-restricted-syntax rule flags any raw leading-slash src literal so future public-asset refs must use assetPath(). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Bug
Images (sidebar Branch logo, leaves background, profile icon) don't load in ephemeral PR preview environments.
Cause: previews are served under
/pr-<N>/with NextbasePath=/pr-<N>. Next prefixes/_next/*build assets with basePath but notpublic/assets referenced by a stringsrc(<Image src="/branch-logo.png" />). So the browser requests/branch-logo.png(root of the shared CloudFront) → 404; the file actually lives at/pr-<N>/branch-logo.png.Fix
next.config.ts: exposeNEXT_PUBLIC_BASE_PATH(=/pr-<N>) in preview builds only.src/lib/asset.ts:assetPath("/foo.png")prefixes it with that base path — no-op in prod (empty var).<Image src>s throughassetPath().Lint guard (requested)
Added an ESLint
no-restricted-syntaxrule that flags any raw leading-slashsrcstring literal, pointing devs atassetPath():Verified: fixed files pass, a raw
<Image src="/x.png">is flagged, and 0 violations exist acrosssrc/.Notes
Draft — needs a preview to visually confirm. After merge to main, the throwaway PR #275 (rebased on main) should render the logo correctly under its preview URL.
Prod deploy path is unchanged (
NEXT_PUBLIC_BASE_PATHis empty →assetPathreturns the path as-is).