Home/i18nexus/Server Components

Server Components

Using i18nexus in Next.js Server Components

Overview

In Next.js Server Components, you cannot use the useTranslation hook. Instead, you must use server-only functions.

✓Smaller JavaScript Bundle

✓Faster Initial Load

✓Better SEO

⚠Cannot dynamically switch language

Server Translation API

getServerLanguage()

Reads the current language from cookies on the server.

import { headers } from "next/headers";
import { getServerLanguage } from "i18nexus/server";

export default async function Page() {
  const headersList = await headers();
  const language = getServerLanguage(headersList);

  console.log(language); // "ko" or "en"
}

createServerTranslation()

Creates a translation function for use on the server.

import { createServerTranslation } from "i18nexus/server";
import { translations } from "@/locales";

export default async function Page() {
  const language = getServerLanguage(headersList);
  const t = createServerTranslation(language, translations);

  return <h1>{t("Welcome")}</h1>;
}

Complete Example

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

// ✅ 서버 컴포넌트 (기본값)
export default async function ServerPage() {
  // 1. 쿠키에서 언어 가져오기
  const headersList = await headers();
  const language = getServerLanguage(headersList);

  // 2. 번역 함수 생성
  const t = createServerTranslation(language, translations);

  // 3. 번역 사용
  return (
    <div>
      <h1>{t("Welcome")}</h1>
      <p>{t("This is a server component")}</p>
      <p>Current language: {language}</p>
    </div>
  );
}

Server Components vs Client Components

🖥️Server Components

✓Smaller Bundle Size

✓Faster Initial Load

✓Better SEO

✓No hydration mismatches

✗Cannot switch language

✗No client interaction

createServerTranslation()

⚡Client Components

✓Dynamic Language Switching

✓Fully interactive

✓React hooks available

✓Using event handlers

⚠Larger Bundle Size

⚠'use client' required

useTranslation()

When should you use it?

✅Using Server Components

Static content (blog, documentation)
Pages where SEO is important
When initial load speed is important
Pages that don't require user interaction

⚡Using Client Components

Language selector/switch button
Forms that require user input
Dynamically changing content
When React hooks are needed

Hybrid approach

Using Server Components and Client Components together gives you optimal performance.

// app/page.tsx (서버 컴포넌트)
import { headers } from "next/headers";
import { getServerLanguage, createServerTranslation } from "i18nexus/server";
import { translations } from "@/locales";
import LanguageSwitcher from "./LanguageSwitcher"; // 클라이언트 컴포넌트

export default async function HomePage() {
  const headersList = await headers();
  const language = getServerLanguage(headersList);
  const t = createServerTranslation(language, translations);

  return (
    <div>
      {/* 클라이언트 컴포넌트: 언어 전환 */}
      <LanguageSwitcher />

      {/* 서버 컴포넌트: 정적 콘텐츠 */}
      <h1>{t("Welcome")}</h1>
      <p>{t("This content is rendered on the server")}</p>
    </div>
  );
}

// app/LanguageSwitcher.tsx (클라이언트 컴포넌트)
"use client";

import { useLanguageSwitcher } from "i18nexus";

export default function LanguageSwitcher() {
  const { currentLanguage, changeLanguage, availableLanguages } =
    useLanguageSwitcher();

  return (
    <div>
      {availableLanguages.map((lang) => (
        <button
          key={lang.code}
          onClick={() => changeLanguage(lang.code)}
        >
          {lang.name}
        </button>
      ))}
    </div>
  );
}

Important Notes

💡Prevent hydration mismatches

Must read language from cookies so server and client use the same language.

// layout.tsx에서
const headersList = await headers();
const language = getServerLanguage(headersList);

<I18nProvider initialLanguage={language}>

🔄Page reload on language change

Server Components do not automatically update when language changes. When you change language in a Client Component, the cookie is updated, and refreshing the page will render the Server Component in the new language.