Next.js + Notion ⇒ Blog
flexyz
발단(?)
아래는 저의 최근 개발일지 입니다.
블로그로 정리할 시간은 없어서 노션에 대충 적고
어떤 건 제목도 없는….
개발 일지를 쓰니 그날 개발한 내용을 깊이 이해하고 다음 날 뭘 해야 하는지 고민하지 않아도 되서 좋은데,
한 달을 좀 넘게 노션에 개발괴발 적어서 그런 지 기록으로서 유의미한 지 회의가 들었습니다.
블로그로 옮겨 적자니 시간이 걸려서 지피티에게 시킬까 고민(?)하던 중,
노션을 CMS로 사용하고 Next.js로 마크다운 자동 렌더링을 하는 방식에 대해 알게 되었습니다.
알고 보니 꽤 오래된 기술(?)이었는데 생각도 못하고 있던 방식이라 신선했습니다.
적용
노션에도 웹퍼블리싱 기능이 있지만 결코 UX가 좋다고 볼 수 없어서 그간 선듯 사용하지 못 했습니다.
노션 + 넥스트js + 블로그는 노션을 백엔드이자 에디터로 사용하고 Next.js를 통해 UI/UX를 향상 시킬 수 있고
무엇보다 노션에 적고 다시 블로그로 다시 쓰는 수고가 적어진다는 점이 매력적 이었습니다.
레퍼런스 #2 기준으로 설명하자면 아래와 같습니다.
(이보다 쉬울 수 없는) 설명
1️⃣ 일단 노션 계정에 로그인을 합니다.
2️⃣ 아래 템플릿 페이지를 복제합니다.
- 우측 상단의 네모 네모 가 복제입니다.
3️⃣ 복제한 페이지(내 노션)를 웹에 게시합니다.
4️⃣ 사이트 보기를 클릭하면 새창이 뜨고 주소를 복사합니다.
https://codelab-kr.notion.site/Next-js-Notion-Starter-Kit-Template-1acc9a218faa80b2baf7cc09906298da
맨 뒤에
1acc9a218faa80b2baf7cc09906298da 이 부분이 페이지 아이디입니다.5️⃣ 깃 레포지토리를 클론합니다.
git clone https://github.com/transitive-bullshit/nextjs-notion-starter-kit cd nextjs-notion-starter-kit code . # vs-code 사용 시
6️⃣ 깃 루트 경로의
site.config.ts 파일의 rootNotionPageId 를 위에서 알게 된 페이지 아이디를 붙여넣습니다. (나머지는 깃 커밋 전에 적당히 편집합니다. 7️⃣ 실행해 봅니다.
npm install npm run build npm run dev
8️⃣ http://localhost:3000 으로 접속해 봅니다.
정리
적용한 레퍼런스들을 정리해 뒀습니다.
레퍼런스 #1
처음 참고한 레퍼런스 입니다.
환경변수가 고작 2개인데 꽤 헤맸습니다.
토큰은 이미 만들어둔 게 있었는데 데이터베이스 아이디를 정확히 특정하지 못해 애를 먹었지요.작동되고 속도도 빠른 것은 확인했는데 제가 JS + 프론트 알못인지라 바로 사용하기에는 좀 아쉬웠습니다.
레퍼런스 #2 → 현재 사용중
일단 디자인 합격(?)에 손이 거의 가지 않는 빌드 인 스타트 킷 형태인 게 마음에 들어서 바로 적용하였습니다.
장점요약
1️⃣ 🚀 쉽고 빠른 설정 → 단일 site.config.ts 파일만 수정하면 바로 블로그 배포 가능
2️⃣ ⚡ 최적화된 성능 → Next.js ISR + Notion API 조합으로 빠른 페이지 로딩 속도 제공
3️⃣ 📱 반응형 + SEO 자동화 → 다크 모드, 소셜 미디어 이미지, 자동 목차 기능 지원
그러나….
왁벽한 소스는 존재하지 않는 법
단점요약
1️⃣ 일단 검색이 되는 척 하는데 안 됨
2️⃣ 태그나 카테고리 모음 기능 지원 X(원작자의 블로그에는 있어서 속았….)
레퍼런스 #3
레퍼런스 #2를 개선한 버전이라고 합니다.
애니메이션도 역동적이고 다 좋은데…. 이것도 검색이 안 됩니다.
향후
3, 4번을 참고해서 추후 태그 모음, 검색 기능 추가 예정입니다. ☺️
