refactor: re-run middleware process if language is not set

Author: mrlemoos

packages/i18n/src/detect-language-middleware.ts

@@ -1,3 +1,4 @@
+import prependString from '@louffee/lib/prepend-string'
 import { NextResponse, type NextRequest } from 'next/server'
 
 import constants from './constants'
@@ -19,8 +20,9 @@ export interface DetectLanguageMiddlewareOptions extends MatchLanguageOptions {
 }
 
 /**
- * Detects the language from the request and redirects to the correct language
- * if the language is not set.
+ * The `detectLanguageMiddleware()` creates a function which detects the
+ * language from the request and redirects to the correct language if the
+ * language is not set.
  *
  * If the language is not set, it will redirect to the `default` language. The
  * language is defined in the `NEXT_language` cookie and the user is redirected
@@ -55,27 +57,35 @@ function detectLanguageMiddleware({ defaultLanguage, languages, ignoredPaths }:
     //       of the object must be "accept-language" (case sensitive). For
     //       reference, see:
     //       https://github.com/jshttp/negotiator/blob/master/index.js#L62C1-L63C1
-    request.headers.forEach((value, key) => {
-      negotiatorHeaders[key] = value
-    })
+    for (const [key, value] of request.headers) {
+      if (key.toLowerCase() === 'accept-language') {
+        negotiatorHeaders[key] = value
+      }
+    }
 
     const isPathnameMissingLocale = !hasPathnameAnyLanguage(pathname, languages)
 
     if (isPathnameMissingLocale) {
       const locale = matchLanguage(negotiatorHeaders, { defaultLanguage, languages })
 
-      const slashAfterLocale = `${pathname.startsWith('/') ? '' : '/'}`
       const searchParams = request.nextUrl.searchParams?.length ? `?${request.nextUrl.searchParams}` : ''
+      const pathnameWithSlash = prependString('/', pathname)
 
-      const redirectPath = `${locale}${slashAfterLocale}${pathname}${searchParams}`
+      const redirectPath = `${locale}${pathnameWithSlash}${searchParams}`
       const redirectBase = request.url
 
       const href = `${redirectBase}${redirectPath}`
 
-      const response = NextResponse.next()
+      // NOTE: We have to set the language cookie here because the `redirect()`.
+      //       So we create the NextResponse from the redirect() static method,
+      //       inject the LANGUAGE_COOKIE_NAME and return the response, which
+      //       Next.js interprets as the end of the middleware chain. See the
+      //       official documentation on how to use the `redirect()` method:
+      //       https://nextjs.org/docs/app/api-reference/functions/next-response#redirect
+      const response = NextResponse.redirect(href)
       response.cookies.set(constants.LANGUAGE_COOKIE_NAME, locale)
 
-      return NextResponse.rewrite(href, response)
+      return response
     }
 
     const response = NextResponse.next()

packages/i18n/src/should-ignore-path.ts

@@ -1,3 +1,6 @@
+/**
+ * @internal The list containing the paths to be ignored by default.
+ */
 const DEFAULT_IGNORE_PATHS = [
   '/api',
   '/_next',
@@ -9,9 +12,35 @@ const DEFAULT_IGNORE_PATHS = [
   '/apple-touch-icon.png',
   '/android-chrome-',
   '/safari-pinned-tab.svg',
-  'site.webmanifest',
+  '/site.webmanifest',
 ] as const
 
+/**
+ * @internal The list containing the extensions of the files to be ignored.
+ */
+const IGNORED_FILE_EXTENSIONS = ['.svg', '.png', '.ico', '.xml', '.webmanifest'] as const
+
+/**
+ * @internal The `isIgnoredFileExtension()` function checks if the `pathname` is
+ *           an ignored file extension, returning the boolean-ish value.
+ */
+function isIgnoredFileExtension(pathname: string): boolean {
+  return IGNORED_FILE_EXTENSIONS.some((extension) => pathname.endsWith(extension))
+}
+
+/**
+ * @internal The list containing the folder names to be ignored.
+ */
+const IGNORED_FOLDER_NAMES = ['assets'] as const
+
+/**
+ * @internal The `isIgnoredFolderName()` function checks if the `pathname` is an
+ *           ignored folder name, returning the boolean-ish value.
+ */
+function isIgnoredFolderName(pathname: string): boolean {
+  return IGNORED_FOLDER_NAMES.some((folderName) => pathname.includes(`/${folderName}/`))
+}
+
 /**
  * The `shouldIgnorePath()` function checks if the `pathname` should be ignored
  * based on the `ignoredPaths` array and ignored paths by default, returning the
@@ -22,14 +51,12 @@ const DEFAULT_IGNORE_PATHS = [
  * shouldIgnorePath('/_next/data/development/...', ['/_next', '/api']) // true
  * ```
  */
-function shouldIgnorePath(pathname: string, ignoredPaths: string[] = []): boolean {
-  if (pathname.endsWith('.svg') || pathname.includes('/assets/')) {
+export default function shouldIgnorePath(pathname: string, ignoredPaths: string[] = []): boolean {
+  if (isIgnoredFileExtension(pathname) || isIgnoredFolderName(pathname)) {
     return true
   }
 
   const paths = [...DEFAULT_IGNORE_PATHS, ...ignoredPaths]
 
   return paths.some((ignoredPath) => pathname.startsWith(ignoredPath))
 }
-
-export default shouldIgnorePath