X (Twitter)

Before you get started

Fumadocs는 완전한 기능을 갖춘 i18n 라이브러리가 아니며 자체 구성 요소와 유틸리티만 관리합니다.

앱의 나머지 부분에는 next-intl과 같은 다른 라이브러리를 사용할 수 있습니다. Next.js에서 I18n을 구현하는 방법에 대해 자세히 알아보려면 Next.js 문서를 읽어보세요.

수동 설정

i18n 구성을 파일로 정의하고 이 가이드에서는 @/ilb/i18n를 사용하여 이를 가져옵니다.

소스 로더에 전달합니다.

lib/source.ts

import { i18n } from '@/lib/i18n';
import { loader } from 'fumadocs-core/source';

export const source = loader({
  i18n, 
  // other options
});

그리고 Fumadocs UI 레이아웃 옵션을 업데이트하세요.

app/layout.config.tsx

import { i18n } from '@/lib/i18n';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(locale: string): BaseLayoutProps {
  return {
    i18n,
    // different props based on `locale`
  };
}

미들웨어

사용자를 적절한 로캘로 리디렉션하는 미들웨어를 만듭니다.

{
  "file": "../../examples/i18n/middleware.ts",
  "codeblock": {
    "lang": "ts",
    "meta": "title=\"middleware.ts\""
  }
}

사용자 정의 가능한 옵션은 Middleware를 참조하세요.

이것은 선택 사항이며 자체 미들웨어나 i18n 라이브러리에서 제공하는 미들웨어를 사용할 수도 있습니다.

라우팅

/app/[lang] 폴더를 생성하고 /app의 모든 파일(예: page.tsx, layout.tsx)을 폴더로 이동합니다.

I18nProvider 내부에 루트 공급자를 래핑하고 사용 가능한 언어 및 번역을 제공합니다. 기본적으로 영어 번역만 제공됩니다.

app/[lang]/layout.tsx

import { RootProvider } from 'fumadocs-ui/provider';
import { I18nProvider, type Translations } from 'fumadocs-ui/i18n';

const cn: Partial<Translations> = {
  search: 'Translated Content',
  // other translations
};

// available languages that will be displayed on UI
// make sure `locale` is consistent with your i18n config
const locales = [
  {
    name: 'English',
    locale: 'en',
  },
  {
    name: 'Chinese',
    locale: 'cn',
  },
];

export default async function RootLayout({
  params,
  children,
}: {
  params: Promise<{ lang: string }>;
  children: React.ReactNode;
}) {
  const lang = (await params).lang;

  return (
    <html lang={lang}>
      <body>
        <I18nProvider
          locale={lang}
          locales={locales}
          translations={{ cn }[lang]}
        >
          <RootProvider>{children}</RootProvider>
        </I18nProvider>
      </body>
    </html>
  );
}

Pass 로케일

페이지와 레이아웃의 Fumadocs에 로케일을 전달하세요.

Search

Configure i18n on your search solution.

Built-in Search (Orama): For Supported Languages, no further changes are needed.

Otherwise, additional config is required (e.g. Chinese & Japanese). See Special Languages.
Cloud Solutions (e.g. Algolia): They usually have official support for multilingual.

Writing Documents

Fumadocs only handles navigation for its own layouts (e.g. sidebar). For other places, you can use the useParams hook to get the locale from url, and attend it to href.

import Link from 'next/link';
import { useParams } from 'next/navigation';

const { lang } = useParams();

return <Link href={`/${lang}/another-page`}>This is a link</Link>;

In addition, the fumadocs-core/dynamic-link component supports dynamic hrefs, you can use it to attend the locale prefix. It is useful for Markdown/MDX content.

content.mdx

import { DynamicLink } from 'fumadocs-core/dynamic-link';

<DynamicLink href="/[lang]/another-page">This is a link</DynamicLink>

Before you get started

Fumadocs는 완전한 기능을 갖춘 i18n 라이브러리가 아니며 자체 구성 요소와 유틸리티만 관리합니다.

수동 설정

i18n 구성을 파일로 정의하고 이 가이드에서는 @/ilb/i18n를 사용하여 이를 가져옵니다.

소스 로더에 전달합니다.

lib/source.ts

import { i18n } from '@/lib/i18n';
import { loader } from 'fumadocs-core/source';

export const source = loader({
  i18n, 
  // other options
});

그리고 Fumadocs UI 레이아웃 옵션을 업데이트하세요.

app/layout.config.tsx

import { i18n } from '@/lib/i18n';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(locale: string): BaseLayoutProps {
  return {
    i18n,
    // different props based on `locale`
  };
}

미들웨어

사용자를 적절한 로캘로 리디렉션하는 미들웨어를 만듭니다.

{
  "file": "../../examples/i18n/middleware.ts",
  "codeblock": {
    "lang": "ts",
    "meta": "title=\"middleware.ts\""
  }
}

사용자 정의 가능한 옵션은 Middleware를 참조하세요.

이것은 선택 사항이며 자체 미들웨어나 i18n 라이브러리에서 제공하는 미들웨어를 사용할 수도 있습니다.

라우팅

/app/[lang] 폴더를 생성하고 /app의 모든 파일(예: page.tsx, layout.tsx)을 폴더로 이동합니다.

I18nProvider 내부에 루트 공급자를 래핑하고 사용 가능한 언어 및 번역을 제공합니다. 기본적으로 영어 번역만 제공됩니다.

app/[lang]/layout.tsx

import { RootProvider } from 'fumadocs-ui/provider';
import { I18nProvider, type Translations } from 'fumadocs-ui/i18n';

const cn: Partial<Translations> = {
  search: 'Translated Content',
  // other translations
};

// available languages that will be displayed on UI
// make sure `locale` is consistent with your i18n config
const locales = [
  {
    name: 'English',
    locale: 'en',
  },
  {
    name: 'Chinese',
    locale: 'cn',
  },
];

export default async function RootLayout({
  params,
  children,
}: {
  params: Promise<{ lang: string }>;
  children: React.ReactNode;
}) {
  const lang = (await params).lang;

  return (
    <html lang={lang}>
      <body>
        <I18nProvider
          locale={lang}
          locales={locales}
          translations={{ cn }[lang]}
        >
          <RootProvider>{children}</RootProvider>
        </I18nProvider>
      </body>
    </html>
  );
}

Pass 로케일

페이지와 레이아웃의 Fumadocs에 로케일을 전달하세요.

Search

Configure i18n on your search solution.

Built-in Search (Orama): For Supported Languages, no further changes are needed.

Otherwise, additional config is required (e.g. Chinese & Japanese). See Special Languages.
Cloud Solutions (e.g. Algolia): They usually have official support for multilingual.

Writing Documents

Fumadocs only handles navigation for its own layouts (e.g. sidebar). For other places, you can use the useParams hook to get the locale from url, and attend it to href.

import Link from 'next/link';
import { useParams } from 'next/navigation';

const { lang } = useParams();

return <Link href={`/${lang}/another-page`}>This is a link</Link>;

In addition, the fumadocs-core/dynamic-link component supports dynamic hrefs, you can use it to attend the locale prefix. It is useful for Markdown/MDX content.

content.mdx

import { DynamicLink } from 'fumadocs-core/dynamic-link';

<DynamicLink href="/[lang]/another-page">This is a link</DynamicLink>

국제화

수동 설정

미들웨어

라우팅

Pass 로케일

Search

Writing Documents

Navigation

목차

국제화

수동 설정

미들웨어

라우팅

Pass 로케일

Search

Writing Documents

Navigation

목차