update nextjs

.npmrc

@@ -1 +1,2 @@
 enable-pre-post-scripts=true
+legacy-peer-deps=true

app/[locale]/404/page.tsx

@@ -1,14 +1,14 @@
 import { ArrowRightIcon } from '@heroicons/react/24/outline';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import ButtonLink from '~/components/Common/Button/Link/index.tsx';
 import styles from './page.module.css';
 import type { FC } from 'react';
 import type { Metadata } from 'next';
 import type { BaseParams } from '~/types/params.ts';
 
-type NotFoundProps = {
-  params: BaseParams;
-};
+type NotFoundProps = BaseParams;
+
+export const dynamic = 'force-static';
 
 export const generateMetadata = async (): Promise<Metadata> => {
   const t = await getTranslations('app.notFound');
@@ -20,7 +20,8 @@ export const generateMetadata = async (): Promise<Metadata> => {
 };
 
 const NotFound: FC<NotFoundProps> = async ({ params }) => {
-  unstable_setRequestLocale(params.locale);
+  const { locale } = await params;
+  setRequestLocale(locale);
   const t = await getTranslations('app.notFound');
 
   return (
@@ -35,6 +36,4 @@ const NotFound: FC<NotFoundProps> = async ({ params }) => {
   );
 };
 
-export const dynamic = 'error';
-
 export default NotFound;

app/[locale]/about/page.tsx

@@ -8,16 +8,16 @@ import type { Metadata } from 'next';
 import type { AboutFrontmatter } from '~/types/frontmatter.ts';
 import type { BaseParams } from '~/types/params.ts';
 
-type PageProps = {
-  params: BaseParams;
-};
+type PageProps = BaseParams;
+
+export const dynamic = 'force-static';
 
 export const generateMetadata = async ({
   params,
 }: PageProps): Promise<Metadata | null> => {
   const rawSource = await getContent({
     section: 'about',
-    lang: params.locale,
+    lang: (await params).locale,
   });
 
   if (!rawSource) return null;
@@ -36,7 +36,7 @@ export const generateMetadata = async ({
 const Page: FC<PageProps> = async ({ params }) => {
   const rawSource = await getContent({
     section: 'about',
-    lang: params.locale,
+    lang: (await params).locale,
   });
 
   if (!rawSource) notFound();

app/[locale]/blog/[[...page]]/page.tsx

@@ -15,17 +15,19 @@ import type { BaseParams } from '~/types/params.ts';
 const MAX_POSTS_PER_PAGE = 6;
 
 type PageProps = {
-  params: {
+  params: Promise<{
     page?: string[];
-  } & BaseParams;
-};
+  }>;
+} & BaseParams;
 
 type StaticParams = {
   params: {
     locale: string;
   };
 };
 
+export const dynamic = 'force-static';
+
 export const generateMetadata = async (): Promise<Metadata | null> => {
   const t = await getTranslations('app.blog');
 
@@ -47,16 +49,20 @@ export const generateStaticParams = async ({ params }: StaticParams) => {
 };
 
 const Page: FC<PageProps> = async ({ params }) => {
+  const { page, locale } = await params;
   let pageNumbers = null;
-  if (params.page && params.page[0] === 'index') {
+  if (page && page[0] === 'index') {
     pageNumbers = 0;
-  } else if (params.page && Number.isInteger(parseInt(params.page[0], 10))) {
-    pageNumbers = parseInt(params.page[0], 10);
+  } else if (page && Number.isInteger(parseInt(page[0], 10))) {
+    pageNumbers = parseInt(page[0], 10);
   }
 
   if (pageNumbers === null) notFound();
 
-  const posts = await getSlugs({ section: 'blog', lang: params.locale });
+  const posts = await getSlugs({
+    section: 'blog',
+    lang: (await params).locale,
+  });
   const metadata = await Promise.all(
     posts
       .slice(
@@ -66,7 +72,7 @@ const Page: FC<PageProps> = async ({ params }) => {
       .map(slug =>
         getFrontmatter<BlogFrontmatter>({
           section: 'blog',
-          lang: params.locale,
+          lang: locale,
           slug,
         })
       )

app/[locale]/blog/post/[post]/page.tsx

@@ -9,10 +9,8 @@ import type { Metadata } from 'next';
 import type { BlogFrontmatter } from '~/types/frontmatter.ts';
 import type { BaseParams } from '~/types/params.ts';
 
-type PageProps = {
-  params: {
-    post: string;
-  } & BaseParams;
+type PageProps = BaseParams & {
+  params: Promise<{ post: string }>;
 };
 
 const slugToParams = (slug: string) => {
@@ -26,8 +24,8 @@ export const generateMetadata = async ({
 }: PageProps): Promise<Metadata | null> => {
   const rawSource = await getContent({
     section: 'blog',
-    lang: params.locale,
-    slug: params.post,
+    lang: (await params).locale,
+    slug: (await params).post,
   });
 
   if (!rawSource) return null;
@@ -57,8 +55,8 @@ export const generateStaticParams = async () => {
 const Page: FC<PageProps> = async ({ params }) => {
   const rawSource = await getContent({
     section: 'blog',
-    slug: params.post,
-    lang: params.locale,
+    slug: (await params).post,
+    lang: (await params).locale,
   });
 
   if (!rawSource) notFound();

app/[locale]/feed/blog/rss.xml/route.ts

@@ -1,21 +1,19 @@
 import { generateRssFeed } from '~/lib/rss.ts';
-import { availableLocales } from '~/utils/i18n/index.ts';
+import { availableLocales } from '~/lib/i18n/config.ts';
 import type { BaseParams } from '~/types/params.ts';
 
+export const dynamic = 'force-static';
+
 export const generateStaticParams = () => {
   return availableLocales.map(lang => ({
     locale: lang.code,
   }));
 };
 
-type GETProps = {
-  params: BaseParams;
-};
-
-export const GET = async (_: Request, { params }: GETProps) => {
+export const GET = async (_: Request, { params }: BaseParams) => {
   const feed = await generateRssFeed({
     section: 'blog',
-    lang: params.locale,
+    lang: (await params).locale,
   });
 
   return new Response(feed, {

app/[locale]/layout.tsx

@@ -1,25 +1,23 @@
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import classNames from 'classnames';
 import { GeistSans } from 'geist/font/sans';
 import { GeistMono } from 'geist/font/mono';
 import { LocaleProvider } from '~/providers/localeProvider.tsx';
-import { availableLocales } from '~/utils/i18n/index.ts';
+import { routing } from '~/lib/i18n/routing';
 import type { FC, PropsWithChildren } from 'react';
 import type { Metadata } from 'next';
 import type { BaseParams } from '~/types/params.ts';
 import '~/styles/globals.css';
 
-type RootLayoutProps = PropsWithChildren<{
-  params: BaseParams;
-}>;
+type RootLayoutProps = PropsWithChildren<BaseParams>;
 
-export const generateStaticParams = () => {
-  return availableLocales.map(lang => ({
-    locale: lang.code,
-  }));
-};
+export const dynamic = 'force-static';
+
+// Generate params for all available locales
+// It's allow us to build the website statically for all locales
+export const generateStaticParams = () =>
+  routing.locales.map(locale => ({ locale }));
 
-// @TODO: Generate metadata using i18n
 export const generateMetadata = async (): Promise<Metadata | null> => {
   const t = await getTranslations('app.metadata');
 
@@ -28,13 +26,15 @@ export const generateMetadata = async (): Promise<Metadata | null> => {
     description: t('description'),
   };
 };
-const RootLayout: FC<RootLayoutProps> = ({ children, params }) => {
-  unstable_setRequestLocale(params.locale);
+
+const RootLayout: FC<RootLayoutProps> = async ({ children, params }) => {
+  const { locale } = await params;
+  setRequestLocale(locale);
 
   return (
-    <html lang={params.locale}>
+    <html lang={locale}>
       <body className={classNames(GeistSans.className, GeistMono.className)}>
-        <LocaleProvider locale={params.locale}>{children}</LocaleProvider>
+        <LocaleProvider locale={locale}>{children}</LocaleProvider>
       </body>
     </html>
   );

app/[locale]/projects/page.tsx

@@ -8,16 +8,16 @@ import type { Metadata } from 'next';
 import type { ProjectsFrontmatter } from '~/types/frontmatter.ts';
 import type { BaseParams } from '~/types/params.ts';
 
-type PageProps = {
-  params: BaseParams;
-};
+type PageProps = BaseParams;
+
+export const dynamic = 'force-static';
 
 export const generateMetadata = async ({
   params,
 }: PageProps): Promise<Metadata | null> => {
   const rawSource = await getContent({
     section: 'projects',
-    lang: params.locale,
+    lang: (await params).locale,
   });
 
   if (!rawSource) return null;
@@ -36,7 +36,7 @@ export const generateMetadata = async ({
 const Page: FC<PageProps> = async ({ params }) => {
   const rawSource = await getContent({
     section: 'projects',
-    lang: params.locale,
+    lang: (await params).locale,
   });
 
   if (!rawSource) notFound();

app/robots.ts

@@ -1,6 +1,8 @@
 import type { MetadataRoute } from 'next';
 
-function robots(): MetadataRoute.Robots {
+export const dynamic = 'force-static';
+
+export default function robots(): MetadataRoute.Robots {
   return {
     rules: {
       userAgent: '*',
@@ -10,5 +12,3 @@ function robots(): MetadataRoute.Robots {
     sitemap: 'https://augustinmauroy.github.io/sitemap.xml',
   };
 }
-
-export default robots;

app/sitemap.ts

@@ -1,7 +1,9 @@
 import { generateSitemap } from '~/lib/sitemap';
-import { availableLocaleCodes } from '~/utils/i18n/index.ts';
+import { availableLocaleCodes } from '~/lib/i18n/config.ts';
 import type { MetadataRoute } from 'next';
 
+export const dynamic = 'force-static';
+
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const sitemapEntries: MetadataRoute.Sitemap = [];
 

components/Common/LanguageSelector/index.tsx

@@ -3,12 +3,12 @@ import { LanguageIcon } from '@heroicons/react/24/outline';
 import { useTranslations } from 'next-intl';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import Dropdown from '~/components/Common/Dropdown';
-import { availableLocales } from '~/utils/i18n';
+import { availableLocales } from '~/lib/i18n/config.ts';
 
 const LanguageSelector = () => {
   const router = useRouter();
   const pathname = usePathname();
-  const locale = useParams().locale;
+  const locale = useParams().locale ?? 'en';
   const t = useTranslations('components.common.languageSelector');
 
   const handleLocaleChange = (newLocale: string) => {

utils/i18n/index.ts → lib/i18n/config.ts

@@ -1,4 +1,4 @@
-import localeConfig from '~/i18n/config.json' with { type: 'json' };
+import localeConfig from '~/i18n/config.json' assert { type: 'json' };
 
 // As set of available and enabled locales for the website
 // This is used for allowing us to redirect the user to any
@@ -10,7 +10,8 @@ const availableLocaleCodes = availableLocales.map(locale => locale.code);
 
 // This provides the default locale information for the Next.js Application
 // This is marked by the unique `locale.default` property on the `en` locale
-const defaultLocale = availableLocales.find(locale => locale.default);
+const defaultLocale =
+  availableLocales.find(locale => locale.default) || availableLocales[0];
 
 // Creates a Map of available locales for easy access
 const availableLocalesMap = Object.fromEntries(

utils/i18n/config.ts → lib/i18n/request.ts

@@ -1,5 +1,6 @@
 import { getRequestConfig } from 'next-intl/server';
-import { availableLocaleCodes } from './index.ts';
+import { routing } from './routing.ts';
+import { availableLocaleCodes } from './config.ts';
 
 // Loads the Application Locales/Translations Dynamically
 const loadLocaleDictionary = async (locale: string) => {
@@ -18,10 +19,18 @@ const loadLocaleDictionary = async (locale: string) => {
   throw new Error(`Unsupported locale: ${locale}`);
 };
 
-// Provides `next-intl` configuration for RSC/SSR
-export default getRequestConfig(async ({ locale }) => ({
-  // This is the dictionary of messages to be loaded
-  messages: await loadLocaleDictionary(locale),
-  // We always define the App timezone as UTC
-  timeZone: 'Etc/UTC',
-}));
+export default getRequestConfig(async ({ requestLocale }) => {
+  // This typically corresponds to the `[locale]` segment
+  let locale = await requestLocale;
+
+  // Ensure that the incoming locale is valid
+  if (!locale || !routing.locales.includes(locale))
+    locale = routing.defaultLocale;
+
+  const messages = await loadLocaleDictionary(locale);
+
+  return {
+    locale,
+    messages,
+  };
+});

lib/i18n/routing.ts

@@ -0,0 +1,11 @@
+import { createNavigation } from 'next-intl/navigation';
+import { defineRouting } from 'next-intl/routing';
+import { availableLocaleCodes, defaultLocale } from './config.ts';
+
+export const routing = defineRouting({
+  locales: availableLocaleCodes,
+  defaultLocale: defaultLocale.code,
+});
+
+export const { Link, redirect, usePathname, useRouter } =
+  createNavigation(routing);

lib/sitemap.ts

@@ -1,4 +1,4 @@
-import { availableLocaleCodes } from '~/utils/i18n/index.ts';
+import { availableLocaleCodes } from './i18n/config.ts';
 import { getSlugs, getFrontmatter } from './content.ts';
 import type { MetadataRoute } from 'next';
 import type { BlogFrontmatter } from '~/types/frontmatter.ts';