Zenn
📘

Notion API, NextJS, TypeScriptでブログアプリを作ってみた

2023/03/15に公開
Next.js
TypeScript
Tailwind CSS
Notion
tech

はじめに

Notion APIと、NextJS、TypeScript、TailwindCSSを使用した簡単なブログアプリケーションの雛形を作成しました。この記事では、雛形を使用してローカル環境でブログを表示する方法を解説します。

完成イメージ

使用したもの

  • Notion API
  • NextJS v13
  • TypeScript v4
  • TailwindCSS v3

使い方

1. GitHubリポジトリをclone

git clone https://github.com/kanaru-ssk/notion-blog.git

2. パッケージインストール

cd notion-blog
pnpm install

3. Notion API の設定

  1. Notionアカウントを作成 (作成していない場合)
  2. Notionの公式ガイドに従ってintegrationを作成
  3. データベースを作成し、propatiesにTitle(Titleタイプ), Slug(Textタイプ), Description(Textタイプ), Image(Fileタイプ), Date(Dateタイプ), Published(Checkboxタイプ)を追加
  4. Notionの画面右上のメニュー -> + Add Connectionsから、作成したintegrationを追加

プロジェクトルートに.env.localファイルを追加

// .env.local
NOTION_TOKEN="your-notion-api-key"
NOTION_DATABASE="your-notion-database-id"

サーバーを起動

pnpm dev

ブラウザでアクセス

http://localhost:3000

お願い

アプリケーションのバグや改善点などがあればぜひコメントで教えて下さい。

Discussion