Add i18n

cesalberca · Jul 16, 2024 · ee9f3df · ee9f3df
1 parent 3a36314
commit ee9f3df
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 7 deletions.
diff --git a/global.d.ts b/global.d.ts
@@ -1,4 +1,4 @@
-type Messages = typeof import('./src/core/i18n/en.json')
+type Messages = typeof import('./src/core/i18n/translations/en.json')
 declare interface IntlMessages extends Messages {}
 
 declare module '*.svg' {

diff --git a/next.config.mjs b/next.config.mjs
@@ -1,3 +1,7 @@
+import createNextIntlPlugin from 'next-intl/plugin'
+
+const withNextIntl = createNextIntlPlugin('./src/core/i18n/i18n.ts')
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   async redirects() {
@@ -11,4 +15,4 @@ const nextConfig = {
   },
 }
 
-export default nextConfig
+export default withNextIntl(nextConfig)
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -0,0 +1,6 @@
+import { useTranslations } from 'next-intl'
+
+export default function Index() {
+  const t = useTranslations('common')
+  return <h1>{t('coverage')}</h1>
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -13,15 +13,15 @@ const inter = Inter({ subsets: ['latin'] })
 export const metadata: Metadata = {
   metadataBase: new URL(baseUrl),
   title: {
-    default: 'Next.js Portfolio Starter',
-    template: '%s | Next.js Portfolio Starter',
+    default: 'César Alberca',
+    template: '%s | Blog',
   },
   description: 'This is my portfolio.',
   openGraph: {
-    title: 'My Portfolio',
-    description: 'This is my portfolio.',
+    title: 'My blog',
+    description: 'César Alberca blog.',
     url: baseUrl,
-    siteName: 'My Portfolio',
+    siteName: 'cesalberca',
     locale: 'en_US',
     type: 'website',
   },

diff --git a/src/app/locale/layout.tsx b/src/app/locale/layout.tsx
@@ -0,0 +1,21 @@
+import { NextIntlClientProvider } from 'next-intl'
+import { getMessages } from 'next-intl/server'
+import type { ReactNode } from 'react'
+
+export default async function LocaleLayout({
+  children,
+  params: { locale },
+}: {
+  children: ReactNode
+  params: { locale: string }
+}) {
+  const messages = await getMessages()
+
+  return (
+    <html lang={locale}>
+      <body>
+        <NextIntlClientProvider messages={messages}>{children}</NextIntlClientProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/src/app/middleware/middleware.ts b/src/app/middleware/middleware.ts
@@ -0,0 +1,14 @@
+import createMiddleware from 'next-intl/middleware'
+
+export default createMiddleware({
+  // A list of all locales that are supported
+  locales: ['en', 'de'],
+
+  // Used when no locale matches
+  defaultLocale: 'en',
+})
+
+export const config = {
+  // Match only internationalized pathnames
+  matcher: ['/', '/(en|es)/:path*'],
+}
diff --git a/src/core/i18n/i18n.ts b/src/core/i18n/i18n.ts
@@ -0,0 +1,14 @@
+import { notFound } from 'next/navigation'
+import { getRequestConfig } from 'next-intl/server'
+
+// Can be imported from a shared config
+const locales = ['en', 'es']
+
+export default getRequestConfig(async ({ locale }) => {
+  // Validate that the incoming `locale` parameter is valid
+  if (!locales.includes(locale as any)) notFound()
+
+  return {
+    messages: (await import(`../translations/${locale}.json`)).default,
+  }
+})
diff --git a/src/core/i18n/en.json → src/core/i18n/translations/en.json b/src/core/i18n/en.json → src/core/i18n/translations/en.json
diff --git a/src/core/i18n/es.json → src/core/i18n/translations/es.json b/src/core/i18n/es.json → src/core/i18n/translations/es.json