[__]

Next.js + 옵시디언 블로그 작업기

2025-01-08

작업 계기

옵시디언에 공부한거나 작업하다가 에러생긴걸 틈틈히 정리하고 있었는데, 이걸 그냥 SEO 적용해서 블로그로 만들어버리면 안되나...라는 아주 단순하고 꿈같은 생각을 하였다 ....

기술스택

  • Next.js 15
    • 이전 회사에서 공부 실컷 해놓고 결국은 app router로 전환을 못하고 퇴사를 해버려서 이번에는 꼭 app router을 쓰기로 다짐함
  • shadcn/ui
    • tailwind css + Radix UI를 기반으로 만든 컴포넌트 조합
    • 필요한 컴포넌트만 복붙으로 가져올 수 있고, 커스터마이징 또한 자유롭다

      This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps. https://ui.shadcn.com/docs

    • 사실 너무 써보고 싶었어요 ... 유행에 흐름을 맡겨보고 싶었어요 .... 1
  • tailwindcss
    • 사실 너무 써보고 싶었어요 ... 유행에 흐름을 맡겨보고 싶었어요 .... 2
  • @octokit/rest
    • GitHub REST API
  • next-mdx-remote
  • MDX Plugins
    • remark-gfm : GitHub Flavored Markdown(GFM) 플러그인.
    • remark-mark-highlight : 하이라이팅 문법("== ==") 지원
    • rehype-pretty-code : syntax highlighting 지원
    • @r4ai/remark-callout : obsidian callout 지원(>[!info])
    • rehype-external-links : 외부 링크에 rel, target 속성 설정 지원
    • rehype-rewrite : HTML AST에서 원하는 노드를 찾아서 동적으로 수정할 수 있게 지원
    • remark-wiki-link : wikilink를 일반 링크 형식으로 변환
  • Vercel

관련 포스트

Refs