Server Component Example

This page is a Server Component - no 'use client' directive needed!

✅Benefits of Server Components

•
Smaller JavaScript Bundle
No React Context or hooks sent to client
•
Faster Initial Load
Server-rendered translations
•
Better SEO
Fully rendered HTML in the correct language
•
No hydration mismatches
Server and client always in sync

How to Use

import { headers } from "next/headers";
import { getServerLanguage, createServerTranslation } from "i18nexus/server";
import { translations } from "@/lib/i18n";

// ✅ Server Component (기본값)
export default async function Page() {
  // 1. 쿠키에서 언어 가져오기
  const headersList = await headers();
  const language = getServerLanguage(headersList);
  
  // 2. 번역 함수 생성
  const t = createServerTranslation(language, translations);
  
  // 3. 사용!
  return <h1>{t("Welcome")}</h1>;
}

🖥️Server Components

✓Use createServerTranslation()

✓Smaller Bundle Size

✓Better Performance

✗Cannot switch language

✗No client interaction

⚡Client Components

✓Use useTranslation() hook

✓Dynamic Language Switching

✓Fully interactive

⚠Larger Bundle Size

⚠'use client' required

Current Status

Current Language:en

Component Type:Server Component

How to Translate:createServerTranslation()

💡Note

To change the language on this page, use the language switcher in the header (a client component). The page will reload with the new language from cookies.