Error Page and Page-not-found issue

Question

Hi, I am using a dynamic routing to manage internationalisation in my app.##CONTEXT- All my routes are wrapped in the [lang] param- I implemented a middleware in  middleware.ts  to handle the route dispatching (check if there is a prefered language, set the default language, redirect the user etc...) example :
if user lands on /en/about, the middleware is bypassed.
if user lands on /about
if user's default language is english, then he is redirected to /en/about etc...##MY ISSUE- I added the convention files not-found.tsx, global-error.tsx and error.tsx to catch HTTP errors when ressources or URL is not corrected/invalid/not-found.Everything was working properly since I add the internationalisation handeling.- Now when I navigate to an invalid path i got the defualt Next 404 page###My Question is :- Since I am using the middleware, do i need to handle or manage the error and not-found page specifically through the middleware or add a specific method ?

Max · Answer

Here is my middleware  :import routes from '@/static-content/route.static.content'
import {NextRequest} from 'next/server'

export function middleware(request: NextRequest) {
   const {
      headers,
      nextUrl: {pathname},
   } = request

let availableLanguages = ['fr', 'en']
   const pathnameHasLocale = availableLanguages.some(
      locale => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
   )
   if (pathnameHasLocale) return

const defaultLanguage = 'fr'
   const userPreferredLanguages = headers.get('accept-language')?.split(',')
   let selectedLanguage: 'en' | 'fr' = defaultLanguage // match default language variable by default

if (userPreferredLanguages) {
      const userPrefersFrench = userPreferredLanguages.some(lang => lang.includes('fr'))
      if (userPrefersFrench) {
         selectedLanguage = 'fr'
      } else {
         // statement won't reach this scope and loop again if user have a French preference in request.header['accept-language']
         const userPrefersEnglish = userPreferredLanguages.some(lang => lang.includes('en'))
         if (userPrefersEnglish) {
            selectedLanguage = 'en'
         }
         // else : sticks with the defaultLanguage declaration
      }
   }

request.nextUrl.pathname = `/${selectedLanguage}/${pathname}`
   // e.g. incoming request is /about
   // The new URL is now /en/about
   return Response.redirect(request.nextUrl)
}

export const config = {
   matcher: [
      '/((?!api|_next/static|_next/image|assets|favicon.ico|error|global-error|not-found).*)',
// I already tried adding : |error|global-error|not-found

],
}

Error Page and Page-not-found issue

2 Replies