templates: fix broken images on Next.js 16 by using relative paths for local media#16058
Merged
Conversation
DanRibbens
reviewed
Mar 25, 2026
| images: { | ||
| localPatterns: [ | ||
| { | ||
| pathname: '/api/media/file/**', |
Contributor
There was a problem hiding this comment.
We can't make /api/ dynamic based on the config.routes.api can we?
Contributor
There was a problem hiding this comment.
@DanRibbens I believe the next.config runs before the Payload config is loaded so I don't think we could.
@AlessioGr thoughts?
Member
Author
There was a problem hiding this comment.
We could import the payload config in the next config and read config.routes.api - I just don't know if we should / if this will cause any performance degradations, since the payload config can be a heavy import, and will run sanitization.
Member
Author
There was a problem hiding this comment.
I believe the next.config runs before the Payload config is loaded so I don't think we could.
We could just import it. Then we'd need a top-level await to run sanitization. Even then I'm worried about any performance implications, I have not tested or investigated this
Contributor
There was a problem hiding this comment.
I am fine with merging this asap.
We don't need to my question delay this since right now templates are broken.
Contributor
📦 esbuild Bundle Analysis for payloadThis analysis was generated by esbuild-bundle-analyzer. 🤖
Largest pathsThese visualization shows top 20 largest paths in the bundle.Meta file: packages/next/meta_index.json, Out file: esbuild/index.js
Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js
Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js
Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js
Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js
Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js
DetailsNext to the size is how much the size has increased or decreased compared with the base branch of this PR.
|
PatrikKozak
previously requested changes
Mar 25, 2026
DanRibbens
approved these changes
Mar 25, 2026
Contributor
|
🚀 This is included in version v3.81.0 |
milamer
pushed a commit
to milamer/payload
that referenced
this pull request
Apr 20, 2026
…r local media (payloadcms#16058) Fixes payloadcms#16051 Next.js 16 tightened image security so that absolute URLs resolving to private IPs are now blocked. This broke all media in the templates because `getMediaUrl` was prepending `getClientSideURL()` to build absolute URLs like `http://localhost:3000/api/media/file/image.webp`, which then got rejected during image optimization. This PR removes the `getClientSideURL()` prepend from `getMediaUrl` for local paths and adds a required `localPatterns` entry. External URLs from storage plugins are still returned as-is. --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1213794221084158
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
3 participants
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.
Fixes #16051
Next.js 16 tightened image security so that absolute URLs resolving to private IPs are now blocked. This broke all media in the templates because
getMediaUrlwas prependinggetClientSideURL()to build absolute URLs likehttp://localhost:3000/api/media/file/image.webp, which then got rejected during image optimization.This PR removes the
getClientSideURL()prepend fromgetMediaUrlfor local paths and adds a requiredlocalPatternsentry. External URLs from storage plugins are still returned as-is.