Next.jsでNotionで投稿出来るブログ作ってみた
事前情報
- NotionDBを使って記事を書く。
- Notion apiを使ってNotionDBのレコードをmax100件取得可能。
- タグやカテゴリーのみ取得やpar_pageとpage_numberを渡してpageの取得などはできないため、一度全件取得してそこからjsのメソッドを使ってタグ、カテゴリー、ページネーションの機能をつける。
- 毎回全件取得が必要になるためSSGかISRでページがロードされるたびにnotion apiを叩かないようにした方が良い。
- 記事の
next.jsを使って作ります。
npx create-next-app@latest以下の選択項目が有り全てYESにしました。
Need to install the following packages:
create-next-app@14.2.3
Ok to proceed? (y)
✔ What is your project named? … protagram
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … @/*https://www.npmjs.com/package/@notionhq/client
https://developers.notion.com/reference/post-database-query
100件以上の時
https://boul.tech/notion-api-post-database-query/#index_id8