Notion Blog의 easy-notion 블로그 소개를 간단하게 시작할 수 있습니다.

처음으로 Zenn에 투고했습니다.
이 글에서는 노션 블로크easy-notion-blog 개설을 보조할 수 있는 자체 제작 앱Next.js을 소개하고 싶다.

Notion Blog란?

노션 블록은 이른바 헤드리스 CMOS로, API를 통해 작성한 글 데이터를 입수Notion해 다른 지역 호스트의 블로그 애플리케이션에 표시하는 시스템이다.
블로그 섹션은 Next입니다.js로 쓰기,Next.js와 친화성이 높음Vercel으로 초대되었습니다.

Notion Blog의 시스템 구성
Notion Blog를 말할 때 넓은 의미는 전체 시스템을 가리키고 좁은 의미는 Next를 가리킨다.다중 js 기반 응용 프로그램(위 그림의 Notion Blog 부분)을 나타냅니다.
Notion Blog는 Notion에서 블로그를 작성할 수 있으며 속도가 빠른 Next입니다.js의 은혜를 받았고 버셀은 기능이 높을 뿐만 아니라 취미용도도 무료이기 때문에 일부 블로거들 사이에서 화제가 되고 널리 퍼졌다.

Notion Blog의 과제

노션 블록이라면 등장한 지 얼마 되지 않아 본가로 불릴 수 있는 아래의 창고를 말한다.

https://github.com/ijjk/notion-blog

아방가르드 CMS에서는 데이터를 얻는 웹 API가 생명선이지만, 노트 블록이 등장할 때는 노트에서 API가 제공되지 않았다.
그렇다면 어떻게 노트에서 데이터를 얻었는지는 브라우저의 개발자 도구를 이용해 웹 버전 노트에 사용되는 API를 얻어 사용했다.
그렇기 때문에 본가에서는 스스로 사용을 책임져야 한다는 기록이 있다.
시간이 흘러 2021년 5월, 노션 API의 베타 버전을 제공하기 시작한다.한편, 비공개 API의 규격이 변경되면서 본가 노션 블록의 안정적인 운영이 어려워졌다.
Notion Blog는 데이터 취득 부분을 공식 API로 변환하는 것이 중요합니다.

easy-notion 블로그 정보

그러나 본가는 공식 API에 대응하지 않았다.그러자 공식 API에 대응해 자체 제작한 노션 블로거에 열광하는 노션 블로거들이 등장했다.
뭘 숨겨, 나도 그중의 한 사람이야.
easy-notion-blog 내 Notion Blog에서 일반적인 기능을 추출하여 간단한 조작으로 Notion Blog를 빠르게 시작할 수 있음을 깨달았습니다.
'노트 블로그를 어디서 구하면 좋을지 모르겠다'는 사람이 바로 이지-노트-blog를 원한다.아래의 캡처를 보십시오.
다음 블로그는 이지노션 블로그를 이용하면 15분 정도면 완성할 수 있다.

easy-notion 블로그에서 만든 Notion Blog
easy-notion 블로그 활용법내 블로그과 창고의 README도 소개됐다.README의 일본어 버전도 있다.
easy-notion-blog에서 가져올 때 필요한 속성이 자동으로 생성됩니다.속성은 라벨, 공개 상태, 개요 등 매 문장의 원 정보를 가리킨다.
속성을 추가하려면 기존 속성을 참고하고 맞춤형도 간단하다.
더 많은 맞춤형 제작을 원하신다면내 블로그의 Notion Blog 범주 다양한 맞춤형 제작 방법을 소개할 테니 꼭 참고하시기 바랍니다.
예를 들어 Google Analythics 가져오기 방법 및 RSS 전송 방법 등이 설명되어 있습니다.

Easy-notion 블로그에 기술적으로 공을 들인 부분.

겨우 Zenn에 투고했기 때문에 easy-notion-blogg에서 기술적으로 공을 들인 부분에 대해서도 쓰고 싶어요.
Notion Blog는 Notion API를 사용하여 데이터를 얻지만 Notion API는 다른 많은 웹 API와 마찬가지요청 제한입니다.
Next.js가 구축할 때 정적 생성 페이지입니다.(설치 방법에 따라) 예를 들어 많은 블로그 글이 있는 등 생성된 페이지가 많을수록 API 요청이 많아진다.
API 요청이 많아지면 빌드업 시 요청이 제한될 수 있습니다.따라서 easy-notion-blog의 요구 제한을 피하기 위해 구축할 때 처음에 모든 글의 정보를 한 번만 얻고 로컬 파일에 캐시하는 방법을 사용합니다.
구조가 간단하고package.json 독자적으로build 명령을 정의하여 구축을'고속 캐시 생성→next build→고속 캐시 폐기'동작으로 바꾸었다.

"build": "node scripts/set-blog-index-cache.js && next build && node scripts/expire-blog-index-cache.js",

https://github.com/otoyo/easy-notion-blog/blob/08472af1d7e4ab6e99af56ea999db36095b42ca2/package.json#L8

API 클라이언트는 캐시가 있는 경우에만 캐시를 참조합니다(즉, 구축된 경우에만).

export async function getAllPosts() {
  let results = []

  if (blogIndexCache.exists()) {
    results = blogIndexCache.get()
    console.log('Found cached posts.')
  } else {

https://github.com/otoyo/easy-notion-blog/blob/08472af1d7e4ab6e99af56ea999db36095b42ca2/src/lib/notion/client.ts#L146

단순한 구조이지만 API 응답을 구축할 때만 캐시를 하면 제한이 필요하지 않습니다.

총결산

이 글은 노트블로그의 역사와 과제를 간단히 설명하고, 노트블로그 개설을 지원하는 자체 제작 도구easy-notion-blog를 소개한다.
이 기사를 계기로 노션 블로그를 시작한 분들, 그리고 이지-노션-blog를 사용하는 분들이 나오길 진심으로 바랍니다.그런 분들은 꼭 알려주세요!
끝까지 읽어주셔서 감사합니다.