.

app/[locale]/login/page.tsx

@@ -10,14 +10,18 @@ import { Metadata } from "next"
 import { cookies, headers } from "next/headers"
 import { redirect } from "next/navigation"
 
+import { initTranslations } from "@/lib/i18n";
+
 export const metadata: Metadata = {
   title: "Login"
 }
 
 export default async function Login({
-  searchParams
+  searchParams,
+  params: { locale },
 }: {
-  searchParams: { message: string }
+  searchParams: { message: string }；
+  params: { locale: string };
 }) {
   const cookieStore = cookies()
   const supabase = createServerClient<Database>(
@@ -163,6 +167,8 @@ export default async function Login({
     return redirect("/login?message=Check email to reset password")
   }
 
+  const { t, resources } = await initTranslations(locale, ['translation']);
+
   return (
     <div className="flex w-full flex-1 flex-col justify-center gap-2 px-8 sm:max-w-md">
       <form
@@ -172,34 +178,34 @@ export default async function Login({
         <Brand />
 
         <Label className="text-md mt-4" htmlFor="email">
-          Email
+          {t("login.email")}
         </Label>
         <Input
           className="mb-3 rounded-md border bg-inherit px-4 py-2"
           name="email"
-          placeholder="you@example.com"
+          placeholder={t("login.emailPlaceholder")}
           required
         />
 
         <Label className="text-md" htmlFor="password">
-          Password
+        {t("login.password")}
         </Label>
         <Input
           className="mb-6 rounded-md border bg-inherit px-4 py-2"
           type="password"
           name="password"
-          placeholder="••••••••"
+          placeholder={t("login.passwordPlaceholder")} 
         />
 
         <SubmitButton className="mb-2 rounded-md bg-blue-700 px-4 py-2 text-white">
-          Login
+        {t("login.loginButton")}
         </SubmitButton>
 
         <SubmitButton
           formAction={signUp}
           className="border-foreground/20 mb-2 rounded-md border px-4 py-2"
         >
-          Sign Up
+          {t("login.signUpButton")}
         </SubmitButton>
 
         <div className="text-muted-foreground mt-1 flex justify-center text-sm">
@@ -208,7 +214,7 @@ export default async function Login({
             formAction={handleResetPassword}
             className="text-primary ml-1 underline hover:opacity-80"
           >
-            Reset
+            {t("login.reset")}
           </button>
         </div>