I want to use nextjs13.2.4 with the new app_ directory and the plugin next-translate.
I use a middleware.ts to rewrite the paths. I wish to use the language as a subpath /en/page-name,
export function middleware(request: NextRequest) {
const locale = request.nextUrl.locale || i18n.defaultLocale
request.nextUrl.searchParams.set('lang', locale)
request.nextUrl.href = request.nextUrl.href.replace(`/${locale}`, "")
return NextResponse.rewrite(request.nextUrl)
}
On the page I have an image
<Image
src= {'/P1560079.JPG'}
alt={'test volle größe'}
priority= {false}
quality = {80}
width = {1920}
height ={1200}
/>
The image is in the /public folder on the same level as src.
Locally (localhost:3000) everything works fine, the image is displayed, translations work. When I deploy to production (netlify), the image is not shown(only a placeholder), the correct "alt" of this image is shown on the page.
I contacted netlify support. They gave me the hint, that the problem is probably within the rewriting of the urls. So I tried to exclude the images from rewriting using a matcher within middleware.ts. This breaks the page, I receive a 404. I tried various ways of the "matcher"- all broke the page.
middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import i18n from '../i18n'
export function middleware(request: NextRequest) {
const locale = request.nextUrl.locale || i18n.defaultLocale
request.nextUrl.searchParams.set('lang', locale)
request.nextUrl.href = request.nextUrl.href.replace(`/${locale}`, "")
return NextResponse.rewrite(request.nextUrl)
}
export const config = {
matcher: '/((?!_next/image).*)'
}
I have also tried:
- use img instead of Image
- small capitals in the filename + extension