Syshin

Nuartz: Obsidian을 Next.js 블로그로

3 min read

Summary

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

프로젝트 소개

Nuartz는 Obsidian 볼트를 Next.js 앱으로 서빙하기 위한 오픈소스 라이브러리다. 이름은 Next.js + Quartz의 합성어.

Quartz가 완성된 정적 사이트 생성기라면, Nuartz는 마크다운 파싱과 콘텐츠 유틸만 제공하는 headless 데이터 레이어다. UI는 소비하는 앱이 직접 만든다.

import { getAllMarkdownFiles, renderMarkdown, buildSearchIndex } from 'nuartz'
 
// 데이터만 가져오고, UI는 자유롭게
const files = await getAllMarkdownFiles('./content')
const { html, toc } = await renderMarkdown(file)

핵심 기능

기능설명
마크다운 파싱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 대상으로 실험하는 프로젝트

Graph View

Backlinks