AI 매직 3DDocs빠른 시작
Fumadocs 시작하기
소개
Fumadocs (Foo-ma docs)는 Next.js 기반의 **문서 프레임워크 **로 빠르고 유연하며 Next.js App Router로 원활하게 구성됩니다.
Fumadocs에는 다양한 부분이 있습니다:
Fumadocs Core
문서 검색, 콘텐츠 소스 어댑터, Markdown 확장을 포함한 대부분의 논리를 처리합니다.
Fumadocs UI
Fumadocs의 기본 테마는 문서 사이트와 대화형 구성 요소에 대한 아름다운 모양을 제공합니다.
Content Source
콘텐츠 소스는 CMS이거나 공식 콘텐츠 소스인 콘텐츠 컬렉션 및 Fumadocs MDX와 같은 로컬 데이터 레이어일 수 있습니다.
Fumadocs CLI
UI 구성요소를 설치하고 자동화하는 명령줄 도구로, 레이아웃을 사용자 정의하는 데 유용합니다.
Want to learn more?
Read our in-depth What is Fumadocs introduction.
용어
Markdown/MDX: Markdown은 서식 있는 텍스트를 만들기 위한 마크업 언어입니다. Fumadocs는 기본적으로 Markdown 및 MDX(Markdown의 상위 집합)를 지원합니다.
필수는 아니지만 Next.js App Router에 대한 몇 가지 기본 지식이 있으면 추가 사용자 정의에 유용할 것입니다.
자동 설치
Node.js 18의 최소 버전이 필요합니다. Node.js 23.1은 Next.js 프로덕션 빌드에 문제가 있을 수 있습니다.
npm create fumadocs-apppnpm create fumadocs-appyarn create fumadocs-appbun create fumadocs-app사용할 프레임워크와 콘텐츠 소스를 묻는 메시지가 표시되며, 새로운 fumadocs 앱을 초기화해야 합니다. 이제 해킹을 시작할 수 있습니다!
From Existing Codebase?
수동 설치 가이드를 따라 시작하세요.
즐기세요!
docs 폴더에 첫 번째 MDX 파일을 만듭니다.
---
title: Hello World
---
## Yo what's up개발 모드에서 앱을 실행하고 http://localhost:3000/docs.를 확인하세요.
npm run dev탐색
프로젝트에서 다음을 볼 수 있습니다.
lib/source.ts: 콘텐츠 소스 어댑터용 코드인loader()는 콘텐츠 소스와 상호 작용할 수 있는 인터페이스를 제공하고 페이지에 URL을 할당합니다.app/layout.config.tsx: 레이아웃에 대한 공유 옵션, 선택 사항이지만 유지하는 것이 좋습니다.
| 경로 | 설명 |
|---|---|
app/(home) | 방문 페이지 및 기타 페이지의 경로 그룹입니다. |
app/docs | 문서 레이아웃 및 페이지. |
app/api/search/route.ts | 검색을 위한 경로 처리기입니다. |
콘텐츠 작성
문서를 작성하려면 다음 내용을 읽어보세요.
Markdown
Fumadocs has some additional features for authoring content too.
Navigation
Learn how to customise navigation links/sidebar items.
콘텐츠 소스
콘텐츠 소스는 Markdown 파일 컴파일 및 머리말 유효성 검사와 같은 모든 콘텐츠를 처리합니다.
소개]를 읽고 콘텐츠를 처리하는 방법을 알아보세요.
source.config.ts 구성 파일이 포함되어 있으며 머리말 스키마와 같은 다양한 옵션을 사용자 정의할 수 있습니다.
Fumadocs는 Markdown 전용이 아닙니다. Sanity와 같은 다른 소스의 경우 사용자 정의 콘텐츠 소스.
UI 사용자 정의
사용자 정의 가이드를 참조하세요.
FAQ
발생할 수 있는 몇 가지 일반적인 질문입니다.
비디오 튜토리얼
자세히 알아보기
이곳에 처음 오셨나요? 걱정하지 마십시오. 귀하의 질문을 환영합니다.
혼란스러운 부분이 있으면 Github 토론에 피드백을 남겨주세요!