feat: rewrite to Next.js v13 app directory

Improvements:
- Hide switch theme input (ugly little white square)
- i18n without subpath (e.g: /fr or /en), same url whatever the locale used

components/Profile/ProfileDescriptionBottom.tsx

@@ -1,12 +1,12 @@
-import useTranslation from 'next-translate/useTranslation'
+import { getI18n } from '@/i18n/i18n.server'
 
 export const ProfileDescriptionBottom: React.FC = () => {
-  const { t, lang } = useTranslation()
+  const i18n = getI18n()
 
   return (
     <p className='mb-8 mt-8 text-base font-normal text-gray dark:text-gray-dark'>
-      {t('home:about.description-bottom')}
-      {lang === 'fr' ? (
+      {i18n.translate('home.about.description-bottom')}
+      {i18n.locale === 'fr-FR' ? (
         <>
           <br />
           <br />

components/Profile/ProfileInfo.tsx

@@ -1,14 +1,16 @@
-import useTranslation from 'next-translate/useTranslation'
+import { getI18n } from '@/i18n/i18n.server'
 
 export const ProfileInformation: React.FC = () => {
-  const { t } = useTranslation()
+  const i18n = getI18n()
 
   return (
     <div className='mb-6 border-b-2 border-gray-600 pb-2 font-headline dark:border-gray-400'>
       <h1 className='mb-2 text-4xl font-semibold text-yellow dark:text-yellow-dark'>
         Théo LUDWIG
       </h1>
-      <h2 className='mb-3 text-base'>{t('home:about.description')}</h2>
+      <h2 className='mb-3 text-base'>
+        {i18n.translate('home.about.description')}
+      </h2>
     </div>
   )
 }

components/Profile/ProfileList/index.tsx

@@ -1,14 +1,21 @@
 'use client'
 
-import useTranslation from 'next-translate/useTranslation'
 import { useMemo } from 'react'
 
+import type { CookiesStore } from '@/i18n/i18n.client'
+import { useI18n } from '@/i18n/i18n.client'
 import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from '@/utils/getAge'
 
 import { ProfileItem } from './ProfileItem'
 
-export const ProfileList: React.FC = () => {
-  const { t } = useTranslation('home')
+export interface ProfileListProps {
+  cookiesStore: CookiesStore
+}
+
+export const ProfileList = (props: ProfileListProps): JSX.Element => {
+  const { cookiesStore } = props
+
+  const i18n = useI18n(cookiesStore)
 
   const age = useMemo(() => {
     return getAge(BIRTH_DATE)
@@ -17,14 +24,19 @@ export const ProfileList: React.FC = () => {
   return (
     <ul className='m-0 list-none p-0'>
       <ProfileItem
-        title={t('home:about.pronouns')}
-        value={t('home:about.pronouns-value')}
+        title={i18n.translate('home.about.pronouns')}
+        value={i18n.translate('home.about.pronouns-value')}
       />
       <ProfileItem
-        title={t('home:about.birth-date')}
-        value={`${BIRTH_DATE_STRING} (${age} ${t('home:about.years-old')})`}
+        title={i18n.translate('home.about.birth-date')}
+        value={`${BIRTH_DATE_STRING} (${age} ${i18n.translate(
+          'home.about.years-old'
+        )})`}
+      />
+      <ProfileItem
+        title={i18n.translate('home.about.nationality')}
+        value='Alsace, France'
       />
-      <ProfileItem title={t('home:about.nationality')} value='Alsace, France' />
       <ProfileItem
         title='Email'
         value='contact@theoludwig.fr'

components/Profile/index.tsx

@@ -1,15 +1,19 @@
+import { cookies } from 'next/headers'
+
 import { ProfileDescriptionBottom } from './ProfileDescriptionBottom'
 import { ProfileInformation } from './ProfileInfo'
 import { ProfileList } from './ProfileList'
 import { ProfileLogo } from './ProfileLogo'
 
 export const Profile: React.FC = () => {
+  const cookiesStore = cookies()
+
   return (
     <div className='flex flex-col items-center justify-center px-10 pt-2 md:flex-row md:pt-10'>
       <ProfileLogo />
       <div>
         <ProfileInformation />
-        <ProfileList />
+        <ProfileList cookiesStore={cookiesStore.toString()} />
         <ProfileDescriptionBottom />
       </div>
     </div>