Next.js: Fumadocs 문서

Next.js 및 Fumadocs로 만든 문서 사이트를 위한 레이아웃, 홈페이지, SEO 도우미.

터미널

npm install onedocs fumadocs-core fumadocs-mdx fumadocs-ui lucide-react@0.562

시작하기

GitHub

최신 릴리스 0.1.27 2026-03-26 MIT Next.js 16, Node 20.9+

TSX

import { HomePage, CTASection } from "onedocs";

export default function Home() {
  return (
    <HomePage config={config} packageName="my-package">
      <CTASection
        title="Ready to get started?"
        cta={{ label: "Read the Docs", href: "/docs" }}
      />
    </HomePage>
  );
}

실제 사용

Onedocs은 하나의 설정 객체를 Fumadocs UI 레이아웃에 전달합니다.

설정 하나, 레이아웃 하나

onedocs.config.ts에는 사이트 제목, 설명, GitHub 저장소가 포함되고, DocsLayout는 이를 Fumadocs 소스의 페이지 트리와 함께 읽습니다.

레이아웃은 사이드바와 테마 전환 기능, nav.github로 만든 GitHub 링크, 검색 대화상자를 렌더링합니다. 검색 대화상자는 추가한 /api/search 경로를 쿼리합니다.

시작하기 가이드에서는 콘텐츠 소스, Next.js 설정, 루트 레이아웃, 페이지 경로 등 나머지 파일을 보여줍니다.

시작하기 읽기

설정

import { defineConfig } from "onedocs/config";

export default defineConfig({
  title: "My Docs",
  description: "Documentation for my project",
  nav: {
    github: "username/repo",
  },
});

문서 레이아웃

import { DocsLayout } from "onedocs";
import type { ReactNode } from "react";
import { source } from "@/lib/source";
import config from "../../../onedocs.config";

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout config={config} pageTree={source.pageTree}>
      {children}
    </DocsLayout>
  );
}

미리 만들어진 레이아웃

DocsLayout, DocsPage 및 HomePage는 사이드바, 검색, 목차가 있는 문서 레이아웃과 랜딩 페이지를 제공합니다.

단일 설정 파일

onedocs.config.ts의 defineConfig()에서 제목, 설명, 로고, 탐색 링크, 푸터, 홈페이지의 히어로 영역과 기능을 설정합니다.

Markdown 우선

콘텐츠 폴더에 .md 또는 .mdx 파일을 작성하면 모든 페이지에 구문 강조와 목차가 제공됩니다.

검색

Fumadocs의 내장 Orama 검색입니다. createFromSource를 사용하는 API 경로 하나를 추가하면 검색 대화상자가 이를 사용합니다.

다크 모드

밝은 테마와 어두운 테마는 Fumadocs UI에서 제공되며, 문서 레이아웃에는 테마 전환 기능이 포함됩니다. 로고와 파비콘은 밝은 버전과 어두운 버전을 지원합니다.

TypeScript 지원

타입 안전 구성과 편집기 자동 완성을 지원하는 TypeScript입니다.

SEO 및 llms.txt

sitemap.xml, robots.txt, llms.txt, llms-full.txt, 페이지 메타데이터 및 Open Graph 이미지용 도우미.

사용자 지정 가능

문서를 더 세밀하게 제어해야 할 때 Fumadocs 구성 요소를 직접 사용할 수 있습니다.

설치와 첫 사용부터 고급 워크플로우 및 API 세부 정보까지 Onedocs 전체 가이드를 살펴보세요.

문서 읽기

소스 보기