LoginSignup
1
1
記事投稿キャンペーン 「2024年!初アウトプットをしよう」

NotionAPIを使用して、Next.js(TS)でブログを作成してみた。

Posted at

NotionAPIを使用してブログアプリを開発してみました。

実際のブログは、NaoBlogから確認ができます。

ソースコードは、GitHubから。

仕様

  • Notionで作成した記事をNext.js(TS)に反映
  • お問い合わせをNotionAPIを使用してNotionでメッセージの管理
  • タグ、カテゴリー機能
  • 検索機能
  • 日本語対応のパンくず表示
  • 記事のシェアボタン
  • 目次機能
  • OGP対応
  • ブログカード(外部リンクの情報を引っ張ってくる)
  • 記事が更新されたらページを自動でリロードする機能追加

Notionブロック対応

'heading_2',
'heading_3',
'image',
'paragraph',
'code',
'bulleted_list_item',
'numbered_list_item',
'quote',
'table',
'table_row',
'video',
'embed',
'callout',
'divider',

ブログの方にて、詳しい仕様の方を載せています。

NotionをCMSにしてNext.jsとTSでブログを作成した。

なぜ、作ったのか。

2023年に誰よりも早くに本気のBlogを作ったよのブログに影響を受けて、早々に自分もブログを作りたくなったからです。

未経験である私は、エンジニアになるための勉強として、必須のTypeScriptを学ぶ必要があり、Reactに興味を抱いていた私は、Udemyの講座から【NotionをCMSに】NotionAPI + Next.js + TypeScript でブログ開発〜デプロイまでを購入し勉強しました。

こちらの講座はとてもわかりやすかったのですが、ライブラリを入れないといけないというところが気になって、自作関数にて対応できないかと試行錯誤しました。

かゆいところまで手が届けるような機能が欲しかったのです。

そこで、勉強したことが自信につながり、新しいことに挑戦する勇気が出ました。

今後について

勉強したことなどをアウトプットしたり、挑戦したことを書いていければと思っています。

ぜひとも、ブログを見ていただけますと幸いです。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1