Fumadocs

Fumadocs는 개발자가 React와 Next.js를 사용하여 전문적인 문서 사이트를 구축할 수 있도록 도와주는 문서 프레임워크입니다. 기존의 문서 도구와 달리 복잡한 부분은 자동으로 처리하면서 콘텐츠와 디자인에 대한 완전한 제어권을 제공합니다.

Markdown과 MDX로 콘텐츠 작성이 가능하여 간단한 텍스트 서식 지정은 물론 인터랙티브한 React 컴포넌트도 추가할 수 있습니다. 이 프레임워크는 내장 검색, 구문 강조, 아름다운 사전 디자인 테마를 포함하고 있으며, 파일, 데이터베이스 또는 콘텐츠 관리 시스템 등 어떤 콘텐츠 소스와도 연동됩니다.

Fumadocs는 문서 관리를 위한 콘텐츠 레이어, 검색과 같은 기능을 위한 코어 라이브러리, 그리고 아름다운 컴포넌트를 위한 UI 라이브러리의 세 부분으로 구성되어 있습니다. 필요한 부분만 선택하여 사용할 수 있습니다.

Fumadocs 시작하기는 간단합니다. 다음은 단계별 안내입니다:

• 프레임워크 설치하기 위해 터미널에서 npm create fumadocs-app 명령어를 실행하세요. 프롬프트가 나타나면 원하는 React 프레임워크와 콘텐츠 소스를 선택하세요.

• 콘텐츠 작성하기 docs 폴더 내의 MDX 파일에서 작성하세요. 간단한 마크다운 문법을 사용하며, 인터랙티브 요소를 위해 React 컴포넌트를 추가할 수도 있습니다.

• 외관 맞춤 설정하기 Tailwind CSS를 사용하세요. 새로운 시스템을 배우지 않고도 색상, 레이아웃, 스타일을 변경하여 브랜드에 맞출 수 있습니다.

• 검색 기능 추가하기 몇 줄의 코드만으로 Orama 또는 Algolia 검색을 연결하세요. 프레임워크가 나머지를 자동으로 처리합니다.

• CLI 도구 사용하기 탭, 콜아웃, 코드 블록과 같은 인터랙티브 컴포넌트를 추가하려면 npx @fumadocs/cli add 명령어를 사용하세요.

• 사이트 배포하기 Vercel, Netlify 또는 Next.js 애플리케이션을 지원하는 호스팅 서비스에 배포하세요.

• 무료 오픈 소스 프레임워크

• Next.js, React Router 및 기타 React 프레임워크와 호환

• Markdown 및 MDX로 콘텐츠 작성

• Orama 및 Algolia 지원 내장 검색 기능

• OpenAPI 문서 생성기

• TypeScript Twoslash 통합

• 아름답게 디자인된 UI 컴포넌트

• 간편한 설정을 위한 명령줄 도구

• Shiki를 이용한 구문 강조

• Tailwind CSS로 높은 커스터마이징 가능