Aimpress/Shumiland
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

fix(images): add dynamic remotePattern from NEXT_PUBLIC_SITE_URL
Some checks failed
CI / Type Check (push) Has been cancelled
Details
CI / Lint (push) Has been cancelled
Details
CI / Unit Tests (push) Has been cancelled
Details
Deploy / Build & Push Image (push) Has been cancelled
Details
Deploy / Deploy to VPS (push) Has been cancelled
Details

Browse source 
Payload media served from the deployment host (e.g. http://147.135.209.100)
was blocked by Next.js image optimiser with 400 because the host was absent
from remotePatterns. Now parsed at build time from NEXT_PUBLIC_SITE_URL so
it works for any environment (localhost, IP, or domain) without hardcoding.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-06-06 21:18:40 +01:00
parent 958de340c1
commit 3a44b986bc
1 changed files with 31 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
next.config.ts
View file

@ -4,6 +4,36 @@ import type { NextConfig } from 'next'
const ONE_YEAR = 'public, max-age=31536000, immutable'
const ONE_DAY = 'public, max-age=86400, must-revalidate'
// Dynamically allow the deployment origin so /_next/image can optimise CMS media
// regardless of whether it's localhost, an IP, or a domain.
function buildRemotePatterns(): NextConfig['images']['remotePatterns'] {
const patterns: NextConfig['images']['remotePatterns'] = [
{ protocol: 'http', hostname: 'localhost', port: '3000', pathname: '/media/**' },
{ protocol: 'http', hostname: 'localhost', port: '3000', pathname: '/api/media/**' },
{ protocol: 'https', hostname: 'shumiland.com.ua', pathname: '/api/media/**' },
{ protocol: 'https', hostname: 'shumi.ai-impress.com', pathname: '/api/media/**' },
]
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL
if (siteUrl) {
try {
const { protocol, hostname, port } = new URL(siteUrl)
const proto = protocol.replace(':', '') as 'http' | 'https'
const entry: (typeof patterns)[number] = {
protocol: proto,
hostname,
pathname: '/api/media/**',
}
if (port) entry.port = port
patterns.push(entry)
} catch {
// invalid URL — skip
}
}
return patterns
}
const nextConfig: NextConfig = {
output: 'standalone',
reactStrictMode: true,
@ -34,12 +64,7 @@ const nextConfig: NextConfig = {
deviceSizes: [375, 640, 768, 1024, 1280, 1536, 1920],
imageSizes: [16, 32, 64, 96, 128, 256, 384, 512, 694],
minimumCacheTTL: 31536000,
remotePatterns: [
{ protocol: 'http', hostname: 'localhost', port: '3000', pathname: '/media/**' },
{ protocol: 'https', hostname: 'shumiland.com.ua', pathname: '/media/**' },
{ protocol: 'https', hostname: 'shumi.ai-impress.com', pathname: '/api/media/**' },
{ protocol: 'http', hostname: 'localhost', port: '3000', pathname: '/api/media/**' },
],
remotePatterns: buildRemotePatterns(),
},
}