nextJs13 using next-translate with app_ directory: images in the /public folder not displayed

359 views Asked by At

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
0

There are 0 answers