fix: migrate the codebase to use await params

eslint.config.mjs

@@ -3,7 +3,6 @@ import nextPlugin from '@next/eslint-plugin-next';
 import jestDom from 'eslint-plugin-jest-dom';
 import jsxA11y from 'eslint-plugin-jsx-a11y';
 import playwright from 'eslint-plugin-playwright';
-import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import tailwind from 'eslint-plugin-tailwindcss';
 import testingLibrary from 'eslint-plugin-testing-library';
 
@@ -34,14 +33,6 @@ export default antfu({
     ...nextPlugin.configs.recommended.rules,
     ...nextPlugin.configs['core-web-vitals'].rules,
   },
-}, {
-  plugins: {
-    'simple-import-sort': simpleImportSort,
-  },
-  rules: {
-    'simple-import-sort/imports': 'error',
-    'simple-import-sort/exports': 'error',
-  },
 }, {
   files: [
     '**/*.test.ts?(x)',
@@ -56,8 +47,6 @@ export default antfu({
   ...playwright.configs['flat/recommended'],
 }, {
   rules: {
-    'import/order': 'off', // Avoid conflicts with `simple-import-sort` plugin
-    'sort-imports': 'off', // Avoid conflicts with `simple-import-sort` plugin
     'style/brace-style': ['error', '1tbs'], // Use the default brace style
     'ts/consistent-type-definitions': ['error', 'type'], // Use `type` instead of `interface`
     'react/prefer-destructuring-assignment': 'off', // Vscode doesn't support automatically destructuring, it's a pain to add a new variable

next.config.mjs

@@ -24,9 +24,7 @@ export default withSentryConfig(
       },
       poweredByHeader: false,
       reactStrictMode: true,
-      experimental: {
-        serverComponentsExternalPackages: ['@electric-sql/pglite'],
-      },
+      serverExternalPackages: ['@electric-sql/pglite'],
     }),
   ),
   {

src/app/[locale]/(auth)/(center)/sign-in/[[...sign-in]]/page.tsx

@@ -1,11 +1,11 @@
+import { getI18nPath } from '@/utils/Helpers';
 import { SignIn } from '@clerk/nextjs';
 import { getTranslations } from 'next-intl/server';
 
-import { getI18nPath } from '@/utils/Helpers';
-
-export async function generateMetadata(props: { params: { locale: string } }) {
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }) {
+  const locale = (await props.params).locale;
   const t = await getTranslations({
-    locale: props.params.locale,
+    locale,
     namespace: 'SignIn',
   });
 
@@ -15,8 +15,12 @@ export async function generateMetadata(props: { params: { locale: string } }) {
   };
 }
 
-const SignInPage = (props: { params: { locale: string } }) => (
-  <SignIn path={getI18nPath('/sign-in', props.params.locale)} />
-);
+const SignInPage = async (props: { params: Promise<{ locale: string }> }) => {
+  const locale = (await props.params).locale;
+
+  return (
+    <SignIn path={getI18nPath('/sign-in', locale)} />
+  );
+};
 
 export default SignInPage;

src/app/[locale]/(auth)/(center)/sign-up/[[...sign-up]]/page.tsx

@@ -1,11 +1,11 @@
+import { getI18nPath } from '@/utils/Helpers';
 import { SignUp } from '@clerk/nextjs';
 import { getTranslations } from 'next-intl/server';
 
-import { getI18nPath } from '@/utils/Helpers';
-
-export async function generateMetadata(props: { params: { locale: string } }) {
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }) {
+  const locale = (await props.params).locale;
   const t = await getTranslations({
-    locale: props.params.locale,
+    locale,
     namespace: 'SignUp',
   });
 
@@ -15,8 +15,12 @@ export async function generateMetadata(props: { params: { locale: string } }) {
   };
 }
 
-const SignUpPage = (props: { params: { locale: string } }) => (
-  <SignUp path={getI18nPath('/sign-up', props.params.locale)} />
-);
+const SignUpPage = async (props: { params: Promise<{ locale: string }> }) => {
+  const locale = (await props.params).locale;
+
+  return (
+    <SignUp path={getI18nPath('/sign-up', locale)} />
+  );
+};
 
 export default SignUpPage;

src/app/[locale]/(auth)/dashboard/page.tsx

@@ -1,10 +1,10 @@
-import { getTranslations } from 'next-intl/server';
-
 import { Hello } from '@/components/Hello';
+import { getTranslations } from 'next-intl/server';
 
-export async function generateMetadata(props: { params: { locale: string } }) {
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }) {
+  const locale = (await props.params).locale;
   const t = await getTranslations({
-    locale: props.params.locale,
+    locale,
     namespace: 'Dashboard',
   });
 

src/app/[locale]/(auth)/dashboard/user-profile/[[...user-profile]]/page.tsx

@@ -1,11 +1,11 @@
+import { getI18nPath } from '@/utils/Helpers';
 import { UserProfile } from '@clerk/nextjs';
 import { getTranslations } from 'next-intl/server';
 
-import { getI18nPath } from '@/utils/Helpers';
-
-export async function generateMetadata(props: { params: { locale: string } }) {
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }) {
+  const locale = (await props.params).locale;
   const t = await getTranslations({
-    locale: props.params.locale,
+    locale,
     namespace: 'UserProfile',
   });
 
@@ -14,12 +14,16 @@ export async function generateMetadata(props: { params: { locale: string } }) {
   };
 }
 
-const UserProfilePage = (props: { params: { locale: string } }) => (
-  <div className="my-6 -ml-16">
-    <UserProfile
-      path={getI18nPath('/dashboard/user-profile', props.params.locale)}
-    />
-  </div>
-);
+const UserProfilePage = async (props: { params: Promise<{ locale: string }> }) => {
+  const locale = (await props.params).locale;
+
+  return (
+    <div className="my-6 -ml-16">
+      <UserProfile
+        path={getI18nPath('/dashboard/user-profile', locale)}
+      />
+    </div>
+  );
+};
 
 export default UserProfilePage;

src/app/[locale]/(auth)/layout.tsx

@@ -1,27 +1,27 @@
+import { AppConfig } from '@/utils/AppConfig';
 import { enUS, frFR } from '@clerk/localizations';
 import { ClerkProvider } from '@clerk/nextjs';
 
-import { AppConfig } from '@/utils/AppConfig';
-
-export default function AuthLayout(props: {
+export default async function AuthLayout(props: {
   children: React.ReactNode;
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 }) {
+  const locale = (await props.params).locale;
   let clerkLocale = enUS;
   let signInUrl = '/sign-in';
   let signUpUrl = '/sign-up';
   let dashboardUrl = '/dashboard';
   let afterSignOutUrl = '/';
 
-  if (props.params.locale === 'fr') {
+  if (locale === 'fr') {
     clerkLocale = frFR;
   }
 
-  if (props.params.locale !== AppConfig.defaultLocale) {
-    signInUrl = `/${props.params.locale}${signInUrl}`;
-    signUpUrl = `/${props.params.locale}${signUpUrl}`;
-    dashboardUrl = `/${props.params.locale}${dashboardUrl}`;
-    afterSignOutUrl = `/${props.params.locale}${afterSignOutUrl}`;
+  if (locale !== AppConfig.defaultLocale) {
+    signInUrl = `/${locale}${signInUrl}`;
+    signUpUrl = `/${locale}${signUpUrl}`;
+    dashboardUrl = `/${locale}${dashboardUrl}`;
+    afterSignOutUrl = `/${locale}${afterSignOutUrl}`;
   }
 
   return (

src/app/[locale]/(unauth)/about/page.tsx

@@ -1,10 +1,10 @@
 import Image from 'next/image';
-import { useTranslations } from 'next-intl';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
-export async function generateMetadata(props: { params: { locale: string } }) {
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }) {
+  const locale = (await props.params).locale;
   const t = await getTranslations({
-    locale: props.params.locale,
+    locale,
     namespace: 'About',
   });
 
@@ -14,9 +14,13 @@ export async function generateMetadata(props: { params: { locale: string } }) {
   };
 }
 
-const About = (props: { params: { locale: string } }) => {
-  unstable_setRequestLocale(props.params.locale);
-  const t = useTranslations('About');
+const About = async (props: { params: Promise<{ locale: string }> }) => {
+  const locale = (await props.params).locale;
+  setRequestLocale(locale);
+  const t = await getTranslations({
+    locale,
+    namespace: 'About',
+  });
 
   return (
     <>

src/app/[locale]/(unauth)/counter/page.tsx

@@ -1,14 +1,14 @@
+import { CounterForm } from '@/components/CounterForm';
+import { CurrentCount } from '@/components/CurrentCount';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 import { Suspense } from 'react';
 
-import { CounterForm } from '@/components/CounterForm';
-import { CurrentCount } from '@/components/CurrentCount';
-
-export async function generateMetadata(props: { params: { locale: string } }) {
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }) {
+  const locale = (await props.params).locale;
   const t = await getTranslations({
-    locale: props.params.locale,
+    locale,
     namespace: 'Counter',
   });
 

src/app/[locale]/(unauth)/layout.tsx

@@ -1,17 +1,19 @@
-import Link from 'next/link';
-import { useTranslations } from 'next-intl';
-import { unstable_setRequestLocale } from 'next-intl/server';
-
 import { DemoBanner } from '@/components/DemoBanner';
 import { LocaleSwitcher } from '@/components/LocaleSwitcher';
 import { BaseTemplate } from '@/templates/BaseTemplate';
+import Link from 'next/link';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
-export default function Layout(props: {
+export default async function Layout(props: {
   children: React.ReactNode;
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 }) {
-  unstable_setRequestLocale(props.params.locale);
-  const t = useTranslations('RootLayout');
+  const locale = (await props.params).locale;
+  setRequestLocale(locale);
+  const t = await getTranslations({
+    locale,
+    namespace: 'RootLayout',
+  });
 
   return (
     <>

src/app/[locale]/(unauth)/page.tsx

@@ -1,11 +1,10 @@
-import { useTranslations } from 'next-intl';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
-
 import { Sponsors } from '@/components/Sponsors';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
-export async function generateMetadata(props: { params: { locale: string } }) {
+export async function generateMetadata(props: { params: Promise<{ locale: string }> }) {
+  const locale = (await props.params).locale;
   const t = await getTranslations({
-    locale: props.params.locale,
+    locale,
     namespace: 'Index',
   });
 
@@ -15,9 +14,13 @@ export async function generateMetadata(props: { params: { locale: string } }) {
   };
 }
 
-const Index = (props: { params: { locale: string } }) => {
-  unstable_setRequestLocale(props.params.locale);
-  const t = useTranslations('Index');
+const Index = async (props: { params: Promise<{ locale: string }> }) => {
+  const locale = (await props.params).locale;
+  setRequestLocale(locale);
+  const t = await getTranslations({
+    locale,
+    namespace: 'Index',
+  });
 
   return (
     <>

src/app/[locale]/(unauth)/portfolio/[slug]/page.tsx

@@ -1,17 +1,15 @@
-import Image from 'next/image';
-import { useTranslations } from 'next-intl';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
-
 import { AppConfig } from '@/utils/AppConfig';
+import Image from 'next/image';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 type IPortfolioDetailProps = {
-  params: { slug: string; locale: string };
+  params: Promise<{ slug: string; locale: string }>;
 };
 
 export function generateStaticParams() {
   return AppConfig.locales
     .map(locale =>
-      Array.from(Array(6).keys()).map(elt => ({
+      Array.from(Array.from({ length: 6 }).keys()).map(elt => ({
         slug: `${elt}`,
         locale,
       })),
@@ -20,24 +18,29 @@ export function generateStaticParams() {
 }
 
 export async function generateMetadata(props: IPortfolioDetailProps) {
+  const { locale, slug } = await props.params;
   const t = await getTranslations({
-    locale: props.params.locale,
+    locale,
     namespace: 'PortfolioSlug',
   });
 
   return {
-    title: t('meta_title', { slug: props.params.slug }),
-    description: t('meta_description', { slug: props.params.slug }),
+    title: t('meta_title', { slug }),
+    description: t('meta_description', { slug }),
   };
 }
 
-const PortfolioDetail = (props: IPortfolioDetailProps) => {
-  unstable_setRequestLocale(props.params.locale);
-  const t = useTranslations('PortfolioSlug');
+const PortfolioDetail = async (props: IPortfolioDetailProps) => {
+  const { locale, slug } = await props.params;
+  setRequestLocale(locale);
+  const t = await getTranslations({
+    locale,
+    namespace: 'PortfolioSlug',
+  });
 
   return (
     <>
-      <h1 className="capitalize">{t('header', { slug: props.params.slug })}</h1>
+      <h1 className="capitalize">{t('header', { slug })}</h1>
       <p>{t('content')}</p>
 
       <div className="mt-5 text-center text-sm">