feat: i18n for page metatag

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

@@ -1,11 +1,18 @@
 import { SignIn } from '@clerk/nextjs';
-import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
 
-export const metadata: Metadata = {
-  title: 'Sign in',
-  description:
-    'Seamlessly sign in to your account with our user-friendly login process.',
-};
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: 'SignIn' });
+
+  return {
+    title: t('meta_title'),
+    description: t('meta_description'),
+  };
+}
 
 const SignInPage = () => <SignIn />;
 

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

@@ -1,11 +1,18 @@
 import { SignUp } from '@clerk/nextjs';
-import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
 
-export const metadata: Metadata = {
-  title: 'Sign up',
-  description:
-    'Effortlessly create an account through our intuitive sign-up process.',
-};
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: 'SignUp' });
+
+  return {
+    title: t('meta_title'),
+    description: t('meta_description'),
+  };
+}
 
 const SignUpPage = () => <SignUp />;
 

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

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 
+import LocaleSwitcher from '@/components/LocaleSwitcher';
 import { LogOutButton } from '@/components/LogOutButton';
 import { BaseTemplate } from '@/templates/BaseTemplate';
 
@@ -31,9 +32,15 @@ export default function DashboardLayout({
         </>
       }
       rightNav={
-        <li>
-          <LogOutButton />
-        </li>
+        <>
+          <li>
+            <LogOutButton />
+          </li>
+
+          <li>
+            <LocaleSwitcher />
+          </li>
+        </>
       }
     >
       {children}

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

@@ -1,11 +1,18 @@
-import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
 
 import { Hello } from '@/components/Hello';
 
-export const metadata: Metadata = {
-  title: 'Dashboard',
-  description: 'User dashboard',
-};
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: 'Dashboard' });
+
+  return {
+    title: t('meta_title'),
+  };
+}
 
 const Dashboard = () => (
   <div className="[&_p]:my-6">

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

@@ -1,11 +1,17 @@
 import { UserProfile } from '@clerk/nextjs';
-import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
 
-export const metadata: Metadata = {
-  title: 'User profile',
-  description:
-    'Seamlessly sign in to your account with our user-friendly login process.',
-};
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: 'UserProfile' });
+
+  return {
+    title: t('meta_title'),
+  };
+}
 
 const UserProfilePage = () => (
   <div className="my-6 -ml-16">

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

@@ -1,9 +1,17 @@
-import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
 
-export const metadata: Metadata = {
-  title: 'Lorem ipsum',
-  description: 'Lorem ipsum',
-};
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: 'About' });
+
+  return {
+    title: t('meta_title'),
+    description: t('meta_description'),
+  };
+}
 
 export default function About() {
   return (

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

@@ -1,16 +1,24 @@
-import type { Metadata } from 'next';
 import Image from 'next/image';
+import { getTranslations } from 'next-intl/server';
 
 import { DeleteGuestbookEntry } from '@/components/DeleteGuestbookEntry';
 import { EditableGuestbookEntry } from '@/components/EditableGuestbookEntry';
 import { GuestbookForm } from '@/components/GuestbookForm';
 import { db } from '@/libs/DB';
 import { guestbookTable } from '@/models/Schema';
 
-export const metadata: Metadata = {
-  title: 'Guestbook',
-  description: 'An example of CRUD operation',
-};
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: 'Guestbook' });
+
+  return {
+    title: t('meta_title'),
+    description: t('meta_description'),
+  };
+}
 
 const Guestbook = async () => {
   const guestbook = await db.select().from(guestbookTable).all();

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

@@ -1,13 +1,20 @@
-import type { Metadata } from 'next';
 import Image from 'next/image';
+import { getTranslations } from 'next-intl/server';
 
 import { Sponsors } from '@/components/Sponsors';
 
-export const metadata: Metadata = {
-  title: 'Next.js Boilerplate Presentation',
-  description:
-    'Next js Boilerplate is the perfect starter code for your project. Build your React application with the Next.js framework.',
-};
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: 'Index' });
+
+  return {
+    title: t('meta_title'),
+    description: t('meta_description'),
+  };
+}
 
 export default function Index() {
   return (

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

@@ -1,7 +1,7 @@
-import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
 
 type IPortfolioDetailProps = {
-  params: { slug: string };
+  params: { slug: string; locale: string };
 };
 
 export async function generateStaticParams() {
@@ -10,10 +10,15 @@ export async function generateStaticParams() {
   }));
 }
 
-export function generateMetadata(props: IPortfolioDetailProps): Metadata {
+export async function generateMetadata(props: IPortfolioDetailProps) {
+  const t = await getTranslations({
+    locale: props.params.locale,
+    namespace: 'PortfolioSlug',
+  });
+
   return {
-    title: `Porfolio ${props.params.slug}`,
-    description: `Porfolio ${props.params.slug} description`,
+    title: t('meta_title', { slug: props.params.slug }),
+    description: t('meta_description', { slug: props.params.slug }),
   };
 }
 

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

@@ -1,11 +1,19 @@
-import type { Metadata } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
+import { getTranslations } from 'next-intl/server';
 
-export const metadata: Metadata = {
-  title: 'Portfolio',
-  description: 'Welcome to my portfolio page!',
-};
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: 'Portfolio' });
+
+  return {
+    title: t('meta_title'),
+    description: t('meta_description'),
+  };
+}
 
 const Portfolio = () => (
   <>

src/locales/en.json

@@ -1,5 +1,36 @@
 {
   "Index": {
-    "title": "Hello world!"
+    "meta_title": "Next.js Boilerplate Presentation",
+    "meta_description": "Next js Boilerplate is the perfect starter code for your project. Build your React application with the Next.js framework."
+  },
+  "Guestbook": {
+    "meta_title": "Guestbook",
+    "meta_description": "An example of CRUD operation"
+  },
+  "About": {
+    "meta_title": "About",
+    "meta_description": "About page description"
+  },
+  "Portfolio": {
+    "meta_title": "Portfolio",
+    "meta_description": "Welcome to my portfolio page!"
+  },
+  "PortfolioSlug": {
+    "meta_title": "Portfolio {slug}",
+    "meta_description": "Porfolio {slug} description"
+  },
+  "SignIn": {
+    "meta_title": "Sign in",
+    "meta_description": "Seamlessly sign in to your account with our user-friendly login process."
+  },
+  "SignUp": {
+    "meta_title": "Sign up",
+    "meta_description": "Effortlessly create an account through our intuitive sign-up process."
+  },
+  "Dashboard": {
+    "meta_title": "Dashboard"
+  },
+  "UserProfile": {
+    "meta_title": "User Profile"
   }
 }

src/locales/fr.json

@@ -1,5 +1,36 @@
 {
   "Index": {
-    "title": "Bonjour monde!"
+    "meta_title": "Présentation de Next.js Boilerplate",
+    "meta_description": "Next js Boilerplate is the perfect starter code for your project. Build your React application with the Next.js framework."
+  },
+  "Guestbook": {
+    "meta_title": "Livre d'or",
+    "meta_description": "Un exemple de fonctionnement CRUD"
+  },
+  "About": {
+    "meta_title": "A propos",
+    "meta_description": "A propos description"
+  },
+  "Portfolio": {
+    "meta_title": "Portfolio",
+    "meta_description": "Bienvenue sur ma page portfolio!"
+  },
+  "PortfolioSlug": {
+    "meta_title": "Portfolio {slug}",
+    "meta_description": "Porfolio {slug} description"
+  },
+  "SignIn": {
+    "meta_title": "Se connecter",
+    "meta_description": "Connectez-vous à votre compte avec facilité."
+  },
+  "SignUp": {
+    "meta_title": "S'inscrire",
+    "meta_description": "Créez un compte sans effort grâce à notre processus d'inscription intuitif."
+  },
+  "Dashboard": {
+    "meta_title": "Dashboard"
+  },
+  "UserProfile": {
+    "meta_title": "Profil de l'utilisateur"
   }
 }