language i18n added and tested for server and client side

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

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export default function AuthLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

ServicesFrontEnd/frontend/src/app/[locale]/(auth)/select/page.tsx

@@ -0,0 +1,3 @@
+export default function SelectPage() {
+    return <div></div>;
+}

ServicesFrontEnd/frontend/src/app/[locale]/(protected)/dashboard/page.tsx

@@ -0,0 +1,3 @@
+export default function DashboardPage() {
+  return <div></div>;
+}

ServicesFrontEnd/frontend/src/app/[locale]/(protected)/layout.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export default function ProtectedLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

ServicesFrontEnd/frontend/src/app/[locale]/(public)/about/page.tsx

@@ -0,0 +1,34 @@
+'use client';
+import { useTranslations } from 'next-intl';
+
+export default function IndexPage() {
+    const t = useTranslations('Index');
+
+    return (
+        <div className="max-w-4xl mx-auto p-4">
+            <h1 className="text-2xl font-bold mb-4">{t('title')}</h1>
+            <p className="mb-4">{t('description')}</p>
+
+            <div className="my-8">
+                <h2 className="text-xl font-semibold mb-2">{t('navigation.title')}</h2>
+                <ul className="list-disc pl-5">
+                    <li>{t('navigation.home')}</li>
+                    <li>{t('navigation.about')}</li>
+                    <li>{t('navigation.contact')}</li>
+                </ul>
+            </div>
+
+            <div className="my-8">
+                <h2 className="text-xl font-semibold mb-2">{t('auth.title')}</h2>
+                <div className="flex gap-2">
+                    <button className="px-4 py-2 bg-blue-500 text-white rounded">
+                        {t('auth.login')}
+                    </button>
+                    <button className="px-4 py-2 bg-green-500 text-white rounded">
+                        {t('auth.register')}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

ServicesFrontEnd/frontend/src/app/[locale]/(public)/home/page.tsx

@@ -0,0 +1,42 @@
+// Server Component
+import { getTranslations } from 'next-intl/server';
+import { Link } from '@/i18n/navigation';
+import { Locale } from '@/i18n/locales';
+import LocaleSwitcherServer from '@/components/LocaleSwitcherServer';
+
+// Define the props type to get the locale parameter
+type Props = {
+    params: Promise<{ locale: string }>;
+};
+
+export default async function HomePage({ params }: Props) {
+    // Get the locale from params
+    const { locale } = await params;
+
+    // Get translations with the correct locale
+    const t = await getTranslations({ locale: locale as Locale, namespace: 'Index' });
+
+    return (
+        <div className="max-w-4xl mx-auto p-4">
+            <h1 className="text-2xl font-bold mb-4">{t('title')}</h1>
+            <p className="mb-4">{t('description')}</p>
+
+            <div className="my-8">
+                <h2 className="text-xl font-semibold mb-2">{t('navigation.title')}</h2>
+                <ul className="list-disc pl-5 mb-4">
+                    <li>
+                        <Link href="/">{t('navigation.home')}</Link>
+                    </li>
+                    <li>
+                        <Link href="/about">{t('navigation.about')}</Link>
+                    </li>
+                    <li>
+                        <Link href="/contact">{t('navigation.contact')}</Link>
+                    </li>
+                </ul>
+                <p>{t('navigation.current')} </p>
+                <LocaleSwitcherServer locale={locale} pathname="/home" />
+            </div>
+        </div>
+    );
+}

ServicesFrontEnd/frontend/src/app/[locale]/(public)/layout.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export default function PublicLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

ServicesFrontEnd/frontend/src/app/[locale]/layout.tsx

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { Inter } from 'next/font/google';
+import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { Locale, locales } from "@/i18n/locales";
+import { routing } from "@/i18n/routing";
+import { NextIntlClientProvider } from 'next-intl';
+import '../globals.css';
+
+const inter = Inter({ subsets: ["latin"] });
+
+type Props = {
+  children: ReactNode;
+  params: Promise<{ locale: Locale }>;
+};
+
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export async function generateMetadata({ params }: Omit<Props, 'children'>) {
+  // Properly await params before accessing properties
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'LocaleLayout' });
+
+  return {
+    title: t('title')
+  };
+}
+
+export default async function LocaleLayout({ children, params }: Props) {
+  // Properly await params before accessing properties
+  const { locale } = await params;
+
+  // Validate that the incoming locale is valid
+  if (!locales.includes(locale as Locale)) {
+    notFound();
+  }
+
+  // Load messages for all child components
+  const messages = (await import(`@/i18n/${locale}.json`)).default;
+
+  // Enable static rendering
+  // Note: unstable_setRequestLocale is removed as it's causing TypeScript errors
+
+  return (
+    <html lang={locale}>
+      <body className={inter.className}>
+        <NextIntlClientProvider
+          locale={locale}
+          messages={messages}
+          timeZone="Europe/Istanbul" // Configure a default timezone for Turkey
+        >
+          {children}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

ServicesFrontEnd/frontend/src/app/[locale]/page.tsx

@@ -0,0 +1,6 @@
+'use server';
+import HomePage from '@/app/home-page';
+
+export default async function Home() {
+  return <HomePage />;
+}

ServicesFrontEnd/frontend/src/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

ServicesFrontEnd/frontend/src/app/home-page.tsx

@@ -0,0 +1,29 @@
+'use client';
+import { useTranslations } from 'next-intl';
+import { useRouter } from '@/i18n/navigation';
+import { useParams } from 'next/navigation';
+import LocaleSwitcherClient from '@/components/LocaleSwitcherClient';
+
+export default function HomePage() {
+    const t = useTranslations('Index');
+    const router = useRouter();
+    const params = useParams();
+
+    const handleNavigation = (path: string) => {
+        console.log('Navigating to /about');
+        router.push(path);
+    };
+
+    return (
+        <main>
+            <h1>{t('title')}</h1>
+            <p>{t('description')}</p>
+            <p>{t('navigation.title')} : {params.locale}</p>
+            <div className='flex flex-col gap-2'>
+                <LocaleSwitcherClient />
+                <button onClick={() => handleNavigation('/about')}>{t('navigation.about')}</button>
+                <button onClick={() => handleNavigation('/home')}>{t('navigation.home')}</button>
+            </div>
+        </main>
+    );
+}