Merge pull request #175 from nr2f1/locale-fix

fix: not found
nr2f1 · Jan 27, 2025 · b8e5a23 · b8e5a23
2 parents a9ca0a4 + 8a1c47d
commit b8e5a23
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -66,8 +66,6 @@
     "@apollo/client": "^3.12.2",
     "@apollo/experimental-nextjs-app-support": "^0.11.7",
     "@contentful/rich-text-react-renderer": "^16.0.0",
-    "@formatjs/intl-getcanonicallocales": "^2.5.4",
-    "@formatjs/intl-locale": "^4.2.9",
     "@formatjs/intl-localematcher": "^0.5.10",
     "@mui/base": "5.0.0-beta.64",
     "formik": "^2.4.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
@@ -1,11 +1,12 @@
-import { match } from '@formatjs/intl-localematcher';
-import {
-  AVAILABLE_LOCALES,
-  type AvailableLocale,
-  DEFAULT_LOCALE,
-} from '@i18n/locales';
+import '@styles/main.scss';
+
+import { ApolloWrapper } from '@app/apollo-wrapper';
+import Footer from '@components/footer';
+import Header from '@components/header';
+import { AVAILABLE_LOCALES } from '@i18n/locales';
+import type { PagePropsWithLocale } from '@shared/types/page-with-locale-params';
+import { getLocale } from '@shared/utils/get-locale';
 import { Nunito_Sans } from 'next/font/google';
-import { headers } from 'next/headers';
 
 const nunitoSans = Nunito_Sans({
   display: 'swap',
@@ -15,13 +16,6 @@ const nunitoSans = Nunito_Sans({
   preload: true,
 });
 
-import '@styles/main.scss';
-
-import { ApolloWrapper } from '@app/apollo-wrapper';
-import Footer from '@components/footer';
-import Header from '@components/header';
-import type { PagePropsWithLocale } from '@shared/types/page-with-locale-params';
-
 export const metadata = {
   title: 'NR2F1 Foundation',
   metadataBase: new URL('https://website-nr2f1.vercel.app'), // TODO: update this once we migrate
@@ -48,14 +42,7 @@ const RootLayout: React.FC<RootLayoutProps> = async ({ children, params }) => {
   let { lang } = await params;
 
   if (!lang) {
-    const headersList = await headers();
-    const acceptLanguagesHeader = headersList.get('accept-language');
-
-    lang = match(
-      (acceptLanguagesHeader ?? '').split(', '),
-      AVAILABLE_LOCALES,
-      DEFAULT_LOCALE,
-    ) as AvailableLocale;
+    lang = await getLocale();
   }
 
   return (

diff --git a/website/src/app/not-found.tsx b/website/src/app/not-found.tsx
@@ -1,13 +1,8 @@
 import styles from './not-found.module.scss';
 
 import SupportBanner from '@components/support-banner';
-import { match } from '@formatjs/intl-localematcher';
-import {
-  AVAILABLE_LOCALES,
-  type AvailableLocale,
-  DEFAULT_LOCALE,
-} from '@i18n/locales';
-import { headers } from 'next/headers';
+import type { AvailableLocale } from '@i18n/locales';
+import { getLocale } from '@shared/utils/get-locale';
 import Link from 'next/link';
 
 const translations: Record<AvailableLocale, Record<string, string>> = {
@@ -38,14 +33,7 @@ const translations: Record<AvailableLocale, Record<string, string>> = {
 };
 
 export default async function NotFound() {
-  const headersList = await headers();
-  const acceptLanguagesHeader = headersList.get('accept-language');
-
-  const lang = match(
-    (acceptLanguagesHeader ?? '').split(', '),
-    AVAILABLE_LOCALES,
-    DEFAULT_LOCALE,
-  ) as AvailableLocale;
+  const lang = await getLocale();
 
   return (
     <div className={styles.notfound}>

diff --git a/website/src/i18n/locales.ts b/website/src/i18n/locales.ts
@@ -44,3 +44,5 @@ export interface LocaleParamsPath {
 }
 
 export type LocalisedString = Record<AvailableLocale, string>;
+
+export const changeLocaleFormat = (locale: string) => locale.replace('_', '-');
diff --git a/website/src/middleware.ts b/website/src/middleware.ts
@@ -1,7 +1,9 @@
-import '@formatjs/intl-getcanonicallocales/polyfill';
-import '@formatjs/intl-locale/polyfill';
 import { match } from '@formatjs/intl-localematcher';
-import { AVAILABLE_LOCALES, DEFAULT_LOCALE } from '@i18n/locales';
+import {
+  AVAILABLE_LOCALES,
+  DEFAULT_LOCALE,
+  changeLocaleFormat,
+} from '@i18n/locales';
 import Negotiator from 'negotiator';
 import { type NextRequest, NextResponse } from 'next/server';
 
@@ -12,7 +14,7 @@ const getLocale = (request: NextRequest) => {
     },
   });
 
-  const userLocales = negotiator.languages();
+  const userLocales = negotiator.languages().map(changeLocaleFormat);
 
   return match(userLocales, AVAILABLE_LOCALES, DEFAULT_LOCALE);
 };

diff --git a/website/src/shared/utils/get-locale.ts b/website/src/shared/utils/get-locale.ts
@@ -0,0 +1,34 @@
+'use server';
+
+import { match } from '@formatjs/intl-localematcher';
+import {
+  AVAILABLE_LOCALES,
+  type AvailableLocale,
+  DEFAULT_LOCALE,
+  changeLocaleFormat,
+} from '@i18n/locales';
+import Negotiator from 'negotiator';
+import { headers } from 'next/headers';
+
+export const getUserLocales = async () => {
+  const headersList = await headers();
+
+  const negotiator = new Negotiator({
+    headers: {
+      'accept-language': headersList.get('accept-language') ?? '',
+    },
+  });
+
+  return negotiator.languages().map(changeLocaleFormat);
+};
+
+export const getLocale = async () => {
+  const userLocales = await getUserLocales();
+  const lang = match(
+    userLocales,
+    AVAILABLE_LOCALES,
+    DEFAULT_LOCALE,
+  ) as AvailableLocale;
+
+  return lang;
+};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -44,3 +44,5 @@ export interface LocaleParamsPath {
		}

		export type LocalisedString = Record<AvailableLocale, string>;

		export const changeLocaleFormat = (locale: string) => locale.replace('_', '-');