feat: introduce new middleware engine (#5396)

Author: ovflowd

middleware.ts

@@ -1,56 +1,11 @@
 import { NextResponse } from 'next/server';
-import localeConfig from './i18n/config.json';
-import type { NextRequest } from 'next/server';
+import createMiddleware from './next.middleware';
 
-// As set of available and enabled locales for the website
-// This is used for allowing us to redirect the user to any
-// of the available locales that we have enabled on the website
-const localeCodes = localeConfig
-  .filter(locale => locale.enabled)
-  .map(locale => locale.code);
+const nextMiddleware = createMiddleware(NextResponse);
 
-export async function middleware(req: NextRequest) {
-  const { pathname, search } = req.nextUrl;
+const { middleware, matcher } = nextMiddleware([
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  require('./middlewares/detectLanguage').default,
+]);
 
-  // This function allows us to redirect with a Locale Code
-  const redirectWithLocale = (locale: string) => {
-    const redirectUrl = `/${locale}${pathname}${search}`;
-
-    return NextResponse.redirect(new URL(redirectUrl, req.url));
-  };
-
-  const localeCookie = req.cookies.get('NEXT_LOCALE');
-
-  // If we already have a NEXT_LOCALE Cookie, then Redirect to the stored Locale Code
-  if (localeCookie && localeCookie.value) {
-    return redirectWithLocale(localeCookie.value);
-  }
-
-  // If not, we try to check if the Browser is sending `Accept-Language` Header
-  const acceptedLanguagesRaw = req.headers.get('Accept-Language') || 'en';
-
-  // If present, we try to split the format into ['code', 'q=order', ...]
-  // Where q= is the precedence of the Accepted Language
-  // We then filter those out as we don't want them
-  const acceptedLanguages = acceptedLanguagesRaw
-    .split(';')
-    .map(collection => collection.split(','))
-    .flat()
-    .filter(locale => !locale.startsWith('q='));
-
-  // We check if we have any matching Language in the order of preference given
-  // And if yes, we return that Locale Code
-  const matchedLocaleCode = acceptedLanguages.find(acceptedLocale =>
-    localeCodes.some(supportedLocale => supportedLocale === acceptedLocale)
-  );
-
-  // We create a new Response Object containing the Locale Match or the default Language
-  const responseWithCookie = redirectWithLocale(matchedLocaleCode || 'en');
-
-  // Then we set a Cookie to avoid this calculation from happening on every / hit
-  responseWithCookie.cookies.set('NEXT_LOCALE', matchedLocaleCode || 'en');
-
-  return responseWithCookie;
-}
-
-export const config = { matcher: '/' };
+export { middleware, matcher };

middlewares/detectLanguage.ts

@@ -0,0 +1,51 @@
+import type { CustomMiddleware } from '../types';
+
+const detectLanguage: CustomMiddleware = {
+  handler: async (request, response, { availableLocales }) => {
+    const { pathname, search } = request.nextUrl;
+
+    // This function allows us to redirect with a Locale Code
+    const redirectWithLocale = (_locale: string) => {
+      const redirectUrl = `/${_locale}${pathname}${search}`;
+
+      return response.redirect(new URL(redirectUrl, request.url));
+    };
+
+    const localeCookie = request.cookies.get('NEXT_LOCALE');
+
+    // If we already have a NEXT_LOCALE Cookie, then Redirect to the stored Locale Code
+    if (localeCookie?.value && localeCookie.value !== 'default') {
+      return redirectWithLocale(localeCookie.value);
+    }
+
+    // If not, we try to check if the Browser is sending `Accept-Language` Header
+    const acceptedLanguagesRaw = request.headers.get('Accept-Language') || 'en';
+
+    // If present, we try to split the format into ['code', 'q=order', ...]
+    // Where q= is the precedence of the Accepted Language
+    // We then filter those out as we don't want them
+    const acceptedLanguages = acceptedLanguagesRaw
+      .split(';')
+      .map(collection => collection.split(','))
+      .flat()
+      .filter(locale => !locale.startsWith('q='));
+
+    // We check if we have any matching Language in the order of preference given
+    // And if yes, we return that Locale Code
+    const matchedLocaleCode = acceptedLanguages.find(acceptedLocale =>
+      availableLocales.some(locale => locale === acceptedLocale)
+    );
+
+    // We create a new Response Object containing the Locale Match or the default Language
+    const responseWithCookie = redirectWithLocale(matchedLocaleCode || 'en');
+
+    // Then we set a Cookie to avoid this calculation from happening on every / hit
+    responseWithCookie.cookies.set('NEXT_LOCALE', matchedLocaleCode || 'en');
+
+    return responseWithCookie;
+  },
+  matcher: request => request.nextUrl.pathname === '/',
+  routes: ['/'],
+};
+
+export default detectLanguage;

next.middleware.ts

@@ -0,0 +1,39 @@
+import { availableLocales, getCurrentLocale } from './next.locales.mjs';
+import type { NextRequest, NextResponse } from 'next/server';
+import type { CustomMiddleware, NextMiddlewareLocale } from './types';
+
+const availableLocaleCodes = availableLocales.map(locale => locale.code);
+
+const createMiddleware = (response: typeof NextResponse) => {
+  const localeMiddleware = (request: NextRequest): NextMiddlewareLocale => {
+    const currentLocale = getCurrentLocale(request.nextUrl.pathname);
+
+    return {
+      currentLocale: currentLocale.code,
+      availableLocales: availableLocaleCodes,
+      isLocalisedRoute: currentLocale.code !== 'en',
+    };
+  };
+
+  return (middlewares: CustomMiddleware[]) => {
+    const middleware = async (request: NextRequest) => {
+      const locale = localeMiddleware(request);
+
+      const matchedMiddleware = middlewares.find(middleware =>
+        middleware.matcher(request, locale)
+      );
+
+      if (matchedMiddleware) {
+        return matchedMiddleware.handler(request, response, locale);
+      }
+
+      return response.next();
+    };
+
+    const matcher = middlewares.map(middleware => middleware.routes).flat();
+
+    return { middleware, matcher };
+  };
+};
+
+export default createMiddleware;

types/index.ts

@@ -1,4 +1,3 @@
-// @TODO: These types will be splitted on individual files for better organisation in the future
 import type { AppProps as DefaultAppProps } from 'next/app';
 
 import type { BlogData } from './blog';
@@ -15,6 +14,7 @@ export * from './navigation';
 export * from './nodeVersions';
 export * from './prevNextLink';
 export * from './releases';
+export * from './middlewares';
 
 export interface AppProps {
   nodeVersionData: Array<NodeVersionData>;

types/middlewares.ts

@@ -0,0 +1,17 @@
+import type { NextRequest, NextResponse } from 'next/server';
+
+export type NextMiddlewareLocale = {
+  isLocalisedRoute: boolean;
+  currentLocale: string | null;
+  availableLocales: string[];
+};
+
+export type CustomMiddleware = {
+  handler: (
+    request: NextRequest,
+    response: typeof NextResponse,
+    locale: NextMiddlewareLocale
+  ) => Promise<NextResponse>;
+  matcher: (request: NextRequest, locale: NextMiddlewareLocale) => boolean;
+  routes: string[];
+};