Notion, Next.js 블로그 만들어보기

Notion, Next.js 블로그 만들어보기

생성자
ToolKitToolKit
작성일
2024년 06월 10일 20시 56분
태그
블로그
최종 편집 일시
마지막 수정 2024년 6월 29일 1시 42분
카테고리
기타
notion image

1. 노션 연동 블로그

블로그를 하나 만들어보고 싶어 자료를 찾다가 이 레포를 발견하게 되었다.
노션과 연동되어 글쓰기도 쉽고 Vercel Hobby Plan으로 배포할 수도 있어서 괜찮은 선택 같았다.
하지만 댓글 기능 X, 기타 커스텀이 어려운 단점이 있었다. 그래서 좀 아쉬워서 다른 좋은 오픈소스가 없는지 찾아보았다.
 
 

2. 대체제 찾기

 
찾아보다 이 글을 발견하게 되었다.
 
이 분은 1번의 레포를 커스텀하여서 사용하시고 계셨다.
댓글 기능도 있었고 디자인도 깔끔해서 되게 좋다고 생각이 들어서 이 분의 블로그를 수정해서 사용해보기로 하였다.
 
하지만 보다보니 Notion의 공식 댓글 API를 사용해서 작성한 사람이 누군지 알지 못하는 단점을 찾게 되었다.
notion image
그래서 다른 블로그에서 본 깃허브 계정으로 로그인해 댓글을 달 수 있게 하는 utterances 라는 위젯이 있었다. utterances로 맨 처음 적용을 했지만 좀 더 리서치를 해보니 giscus가 기능이 좀 더 있고 정렬 기능도 있어서 giscus로 마이그레이션을 진행하였다.
깃허브 레포의 Discussions에 댓글 데이터가 저장되기 때문에 무료이고 특별한 서버나 비용이 들지는 않는 점이 되게 좋은 것 같았다.
 

3. Giscus 적용 화면

notion image
답글도 달 수 있고 정렬도 할 수 있어서 좋은 선택을 한 것 같다!
 
 

4. Notion Search API 고치기

노션 검색 API에서 400 Bad Request 에러 코드를 주고 있고 검색이 안되고 있었다.
그래서 기존 코드와 현재 노션에서 쓰이는 API를 분석한 결과 client에서 API로 넘기는 RequestBody의 값이 다른 것을 알 수 있었다. 그래서 그 부분을 수정하면 검색 기능이 될 것이라는 생각이 들어서 고쳐서 PR을 올렸다.
 

5. Vercel 배포

Vercel Hobby 플랜 (무료 플랜)으로도 배포가 가능해서 좋았다.
github repository만 연결해주면 커밋할 때마다 배포가 되어서 편하다.
notion image
 
 
 
 

댓글