[wip] implementing multi language

2026-04-15 12:40:43 +03:30
parent e37f76ca5a
commit 415d794147
10 changed files with 90 additions and 6 deletions
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -1,18 +1,33 @@
+import { getDirection } from '@/i18n/direction'
+import { routing } from '@/i18n/routing'
 import { ClientAppProvider } from '@/providers/ClientAppProvider'
 import '@/styles/globals.css'
 import type { Metadata } from 'next'
+import { hasLocale, NextIntlClientProvider } from 'next-intl'
+import { getMessages } from 'next-intl/server'
+import { notFound } from 'next/navigation'

 export const metadata: Metadata = {
  title: 'Theater of dreams',
 }

-export default function RootLayout({
+export default async function RootLayout({
  children,
-}: {
+  params,
+}: Readonly<{
  children: React.ReactNode
-}) {
+  params: Promise<{ locale: string }>
+}>) {
+  const { locale } = await params
+  if (!hasLocale(routing.locales, locale)) {
+    notFound()
+  }
+
+  const messages = await getMessages()
+  const dir = getDirection(locale)
+
  return (
-    <html lang='en' suppressHydrationWarning>
+    <html dir={dir} lang={locale} suppressHydrationWarning>
      <head>
        {/* Prevent theme flicker before hydration */}
        <script
@@ -31,7 +46,9 @@ export default function RootLayout({
      </head>

      <body className='bg-primary'>
-        <ClientAppProvider>{children}</ClientAppProvider>
+        <NextIntlClientProvider locale={locale} messages={messages}>
+          <ClientAppProvider>{children}</ClientAppProvider>
+        </NextIntlClientProvider>
      </body>
    </html>
  )
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -1,10 +1,12 @@
 import ThemeToggle from '@/components/UI/ThemeToggle'
+import { useTranslations } from 'next-intl'

 export default function Home() {
+  const t = useTranslations('Home')
  return (
    <main>
      <ThemeToggle />
-      <h1>Offline Next.js Template 🚀</h1>
+      <h1>{t('title')}</h1>
      <p>This project was generated completely offline.</p>
    </main>
  )