fix(og-image): resolve 404s, migrate middleware to proxy.ts, and fix local port conflict

app/[locale]/[slug]/opengraph-image.tsx

@@ -3,6 +3,8 @@ import { getPageBySlug } from '@/lib/pages';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
 export default async function Image({

app/[locale]/blog/[slug]/opengraph-image.tsx

@@ -4,6 +4,8 @@ import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 import { SITE_URL } from '@/lib/schema';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
 export default async function Image({

app/[locale]/blog/opengraph-image.tsx

@@ -3,6 +3,8 @@ import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
 export default async function Image({ params }: { params: Promise<{ locale: string }> }) {

app/[locale]/contact/opengraph-image.tsx

@@ -3,6 +3,8 @@ import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
 export default async function Image({ params }: { params: Promise<{ locale: string }> }) {

app/[locale]/layout.tsx

@@ -43,15 +43,13 @@ export const viewport: Viewport = {
   themeColor: '#001a4d',
 };
 
-export default async function LocaleLayout({
+export default async function Layout(props: {
-  children,
-  params,
-}: {
   children: React.ReactNode;
   params: Promise<{ locale: string }>;
 }) {
-  const { locale } = await params;
+  const params = await props.params;
-
+  const { locale } = params;
+  const { children } = props;
   const supportedLocales = ['en', 'de'];
   const localeStr = (typeof locale === 'string' ? locale : '').trim();
   const safeLocale = supportedLocales.includes(localeStr) ? localeStr : 'en';

app/[locale]/opengraph-image.tsx

@@ -3,9 +3,12 @@ import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
 export default async function Image({ params }: { params: Promise<{ locale: string }> }) {
+  console.log('🖼️ OG Image Handler Called');
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: 'Index.meta' });
   const fonts = await getOgFonts();

app/[locale]/products/opengraph-image.tsx

@@ -3,6 +3,8 @@ import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
 export default async function Image({ params }: { params: Promise<{ locale: string }> }) {

app/[locale]/team/opengraph-image.tsx

@@ -3,6 +3,8 @@ import { getTranslations } from 'next-intl/server';
 import { OGImageTemplate } from '@/components/OGImageTemplate';
 import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';
 
+export const size = OG_IMAGE_SIZE;
+export const contentType = 'image/png';
 export const runtime = 'nodejs';
 
 export default async function Image({ params }: { params: Promise<{ locale: string }> }) {

docker-compose.yml

@@ -9,8 +9,10 @@ services:
     image: registry.infra.mintel.me/mintel/klz-cables.com:${IMAGE_TAG:-latest}
     restart: unless-stopped
     networks:
-      - default
+      default:
-      - infra
+      infra:
+        aliases:
+          - klz.localhost
     env_file:
       - ${ENV_FILE:-.env}
     labels:

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -1,10 +1,18 @@
-import createNextIntlPlugin from 'next-intl/plugin';
 import withMintelConfig from '@mintel/next-config';
 
-const withNextIntl = createNextIntlPlugin();
+console.log('🚀 NEXT CONFIG LOADED FROM:', process.cwd());
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  onDemandEntries: {
+    // Make sure entries are not disposed too quickly
+    maxInactiveAge: 60 * 1000,
+  },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
   output: 'standalone',
   async redirects() {
     return [
@@ -342,6 +350,4 @@ const nextConfig = {
   },
 };
 
-const nextIntlConfig = withNextIntl(nextConfig);
+export default withMintelConfig(nextConfig);
-
-export default withMintelConfig(nextIntlConfig);

proxy.ts

@@ -42,11 +42,8 @@ export default function middleware(request: NextRequest) {
     // Prioritize x-forwarded-host (passed by Traefik) over the local Host header
     const hostHeader =
       headers.get('x-forwarded-host') || headers.get('host') || 'testing.klz-cables.com';
-    hostHeader.split(':');
 
     urlObj.protocol = proto;
-    // urlObj.hostname = publicHostname; // Don't rewrite hostname yet as it breaks internal fetches in dev
-    // urlObj.port = ''; // DON'T clear internal port (3000) anymore
 
     effectiveRequest = new NextRequest(urlObj, {
       headers: request.headers,
@@ -55,7 +52,7 @@ export default function middleware(request: NextRequest) {
     });
 
     console.log(
-      `🛡️ Middleware: Fixed internal URL leak: ${url} -> ${urlObj.toString()} | Proto: ${proto} | Host: ${hostHeader}`,
+      `🛡️ Proxy: Fixed internal URL leak: ${url} -> ${urlObj.toString()} | Proto: ${proto} | Host: ${hostHeader}`,
     );
   }
 
@@ -95,6 +92,5 @@ export default function middleware(request: NextRequest) {
 }
 
 export const config = {
-  // Match only internationalized pathnames
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
-  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)', '/', '/(de|en)/:path*'],
 };

scripts/check-og-images.ts

@@ -22,7 +22,7 @@ async function verifyImage(path: string): Promise<boolean> {
 
     console.log(`Checking ${url}...`);
 
-    const body = await response.text();
+    const body = await response.clone().text();
     const contentType = response.headers.get('content-type');
 
     if (response.status !== 200) {