Next.js-13-블로그-제작기
2023-05-22
들어가며
평소 공부한 내용이나 메모하고픈 내용은 notion을 즐겨 쓰고있는데
Next.js 13에 대해 공부하다 App라우터에 대해 익숙해질겸 블로그를 하나 만들고 싶어져
만들게 되는데 이 포스팅은 그 과정에 대해 돌아보는 내용이 될것이다
계획
계획은 이랬었다 노션의 내용을 markdown과 같은 파일로 export 해서 이를 이용해 블로그를
만들까 했다가 노션에서 개발자용 API를 지원하고 있다는게 생각이나 API를 활용해
블로그를 만들 계획을 짜기 시작했다
제일 첫번째로 만들어져야 하는건 노션의 포스팅을 API를 이용해 React 컴포넌트로
구현 해주는 일이었고 만드는 김에 이를 오픈소스 라이브러리로 배포하기로 결정했었다
두번째는 Next.js를 통한 구현이었는데 마침 개발 도중 Next.js 13버전의 App 라우터가 Stable
버전으로 출시하게 되어 Page 라우터가 아닌 App 라우터로 개발하기로 결정하였다
Notion 을 React 컴포넌트로 만들어주는 라이브러리가 혹시 이미 있나 검색해봤는데
구버전 노션 API를 사용하는 라이브러리는 몇개 있었으나 신버전 노션 API를 사용한 버전은
없었기에 신버전 API를 사용해 라이브러리를 만들기로 결정했지만 신버전 API가 생각보다
사용성이 많이 안좋았기에 구현에 생각보다 시간이 걸리게 되었다
Notion-to-React
이 기능은 생각보다 구현 자체는 어렵지 않았지만 생각지도 못한 변수가 있었는데
API 자체의 사용성이었다 노션 API를 사용해보면 객체의 구조가 상당히 복잡하기에
이를 Typescript의 타입을 정해 주는것 자체가 손을 많이 타는 작업이었고
신버전의 API가 구버전의 API보다 사용성이 좋지 않다는 점도 개발 도중 문제가 되었었던 점이었다
중간에 구버전과 신버전 API에서 고민을 하거나 타입 정의를 처음부터 다시하는 등의
많은 우여곡절이 있었지만 결과물 자체는 생각보다 더 잘 나왔고 이를 오픈소스 라이브러리로
배포하고 있으니 관심있으면 한번 써보길 바란다
Next.js
Notion API로 블로그를 만들때 가장 고민된점은 라우팅이었다
노션의 ID를 그대로 다이나믹 라우팅에 쓰게되면 주소가 상당히 더러워지게 되는데
다음과 같이 된다 /dev-blog/2c9b114c372440e8a045f24cd5d0eb5b/b0232f…
이런 형식은 사용하기에 너무 불편한 방식이었기에 포스팅의 제목이 주소에 그대로
들어가게 만들기로 결정했고 Notion API에서 해당 과정을 구현하기에는 다음을 따라야했다
포스팅 작성 과정
노션에서 포스팅 작성이 포스팅에 관한 정보가 담긴 DB(Notion DB)에 insert 단 제목은 중복되지 않게Next.js 에서 데이터를 끌어오는 과정
/post/글 이름 으로 접근시 해당 글이 DB에 있는지 조회DB에 존재한다면 ID 컬럼 값을 다시 API에 요청, 없다면 404페이지로 이동API를 통해 가져온 값을 Notion-to-React 라이브러리를 이용해 렌더링이 과정을 따르게 된다 API를 두번 요청하게 되지만 블로그 특성상 정적 페이지 최적 이기에
처음 렌더링 할때의 속도는 느려질 지라도 블로그 자체는 느려지지 않으며 블로그의 주소도
더 다음과 같이 깔끔해진다 /dev-blog/react/react-렌더링 또 이러한 방식이 SEO에도 더 좋다고
하기에 조금은 복잡하고 빌드에 시간이 걸리더라고 위와 같은 과정을 거쳐 블로그를 개발했다
앞으로의 계획
블로그의 기능은 일단 갖추게 되었고 Github pages를 통한 배포도 무사히 된 상태이나
아직 구현 해야 할 기능들이 몇가지 남았다
페이징
원래 페이징은 Next의 route handler를 이용해 만들었는데 next를 github pages 배포하는 과정에서
export 설정을 해주는데 이 설정을 활성화 해주면 dynamic route가 작동하지 않아
search params를 넘겨줄 수 가 없어 구현하지 못한 상태인데 다른 방법을 생각하거나
github page 자체를 안쓰게 될 수 도 있을거 같다
이전 포스트, 다음 포스트
이 기능은 지금도 고민이 많다 넣고 싶었긴 했지만 DB 컬럼을 리스트와 같이 앞,뒤 포스트의
ID를 가지고 있어 구현을 해야 할지 한정된 기능을 가진 노션 API로 어떻게 구현 해야 할지에 대한
고민이 많아 아직 제대로 정하지 못한 기능이다
마치며
이 포스트 에서는 지금의 블로그를 개발하면서 어떤 과정을 겪었었는지 기록하는 포스트를
써보았다 Pages 라우터에서 App 라우터로 전환되고 있는 지금 이 블로그 개발이 App 라우터를
적응하기에 정말 좋은 프로젝트였다 App 라우터는 이제막 이제 막 Stable 버전이 되었기에
한글로된 글도 별로없어 영어 공식문서, 글, 유튜브를 열심히 해석하며 개발을 했었던 만큼
더 Next.js App 라우터에 대해 좀더 깊이 이해 할 수 있게 될수 있었던 계기가 되었었다
지금도 회사에서는 내 적극적인 추천으로 Next로 개발을 시작했는데 이 블로그를 개발한
경험이 분명 큰 도움이 될것이라 생각한다.
블로그 깃허브 저장소
