Skip to content
logo

Nuartz: Obsidian을 Next.js 블로그로

2026-03-01Updated 2026-06-082 min read·
#Projects
#Nuartz
#Nextjs
#Quartz
#Digital-Garden
#Obsidian
Summary

Obsidian으로 관리하는 노트를 웹에 퍼블리싱하고 싶었다. Quartz를 쓰다 UI 한계와 AI Agent 연동 욕심이 생겼고, shadcn/ui + Next.js 기반으로 직접 만든 게 Nuartz다. UI는 없고 데이터 레이어만 제공하는 headless 라이브러리로, 어떤 Next.js 앱이든 가져다 자기 UI로 감쌀 수 있다.

핵심 기능

기능설명
마크다운 파싱remark/rehype 파이프라인 + OFM 플러그인
Obsidian 호환wikilink, callout, backlink, tag, graph view
파일 시스템getAllMarkdownFiles(), buildFileTree(), draft 필터링
검색FlexSearch 기반 CJK-aware 인덱스
백링크buildBacklinkIndex(), getBacklinks()
TOC헤딩 추출 및 계층 구조 생성
설정nuartz.config.ts로 홈페이지, 타이틀 등 커스터마이즈

기술 스택

레이어기술
프레임워크Next.js 15 (App Router)
UIshadcn/ui + Tailwind v4
마크다운unified + remark + rehype
Obsidian 파싱OFM (Quartz 플러그인 직접 활용)
검색FlexSearch
그래프 뷰D3.js
패키지 매니저bun (monorepo)
배포Vercel

구조

nuartz/
├── packages/nuartz/     ← npm 패키지 (데이터 레이어)
│   └── src/
│       ├── markdown.ts  ← renderMarkdown()
│       ├── fs.ts        ← getAllMarkdownFiles(), buildFileTree()
│       ├── search.ts    ← buildSearchIndex()
│       └── backlinks.ts ← buildBacklinkIndex()
└── apps/web/            ← 공식 데모/문서 사이트 (Next.js)

시리즈


관련 프로젝트

  • blog-rag - Nuartz 기반 블로그를 RAG 대상으로 실험하는 프로젝트
Comments