I18N, Next13 app dir, middleware with redirect is making images impossible to load
Unanswered
Bartholomeas posted this in #help-forum
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
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? 😦
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()
}