Next.js Discord

Discord Forum

I18N, Next13 app dir, middleware with redirect is making images impossible to load

Unanswered
Bartholomeas posted this in #help-forum
Open in Discord
Hi, im using i18n, and now in my middleware.ts file im redirecting user if there is no locale parameter in the url, but i have problem. When i redirect user everything is working correctly but not images from /public directory. Most (or maybe all) of them are throwing 404.

When i uncomment this
  // if (!req.headers.get('accept')?.includes('image')) {


Images are loading, but user is not redirected when going into route without language parameter (its throwing 404).

Any ideas what ill do to get back images from /public and keep redirecting logic? 😦


import acceptLanguage from 'accept-language'

import { NextResponse } from 'next/server'
import { cookieName, fallbackLng, languages } from 'misc/i18n/settings'
import type { NextRequest } from 'next/server'

acceptLanguage.languages(languages)

export const config = {
  // matcher: '/:lang*'
  matcher: ['/((?!api|_next/static|_next/image|assets|public|favicon.ico|sw.js).*)'],
}

export function middleware(req: NextRequest) {
  let lang
  if (req.cookies.has(cookieName)) lang = acceptLanguage.get(req.cookies.get(cookieName)?.value)
  if (!lang) lang = acceptLanguage.get(req.headers.get('Accept-Language'))
  if (!lang) lang = fallbackLng

  // Redirect if lang in path is not supported
  // if (!req.headers.get('accept')?.includes('image')) {
  if (
    !languages.some((loc) => req.nextUrl.pathname.startsWith(`/${loc}`)) &&
    !req.nextUrl.pathname.startsWith('/_next')
  ) {
    return NextResponse.redirect(new URL(`/${lang}${req.nextUrl.pathname}`, req.url))
  }

  if (req.headers && req.headers.has('referer')) {
    const refererUrl = new URL(req.headers.get('referer') ?? '')
    const langInReferer = languages.find((l) => refererUrl.pathname.startsWith(`/${l}`))
    const response = NextResponse.next()
    if (langInReferer) response.cookies.set(cookieName, langInReferer)
    return response
  }
  // }
  return NextResponse.next()
}

0 Replies