NotionAPI + Next.js + TypeScript でアプリを作成しました【Blogアプリ】

CMSとは？

CMS（コンテンツ・マネジメント・システム）とは、ブログやWebサイトなどで活用されているコンテンツを管理するための仕組み。代表的なものとしてWordPressやMovable Typeが挙げられ、主にWebサイト制作に使用される。WordPressなどの通常CMSは、コンテンツデータ（テキスト、画像、動画など）を表示させるビュワーと、これらのコンテンツデータを管理するシステムが統合されて成り立つ。

環境の準備

①ターミナルで、アプリケーションを作成する。

yarn create next-app --typescript <プロジェクト名>
cd <プロジェクト名>
yarn dev

② 必要なパッケージをインストールする。

npx @next/codemod new-link .
yarn add -D @notionhq/client@1.0.4
yarn add -D notion-block-renderer

公式サイト：Tailwind CSS

yarn add -D tailwindcss postcss autoprefixer
yarn add tailwindcss init -p

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
h1 {
  @apply font-semibold leading-tight text-4xl mt-0 mb-2;
}
h2 {
  @apply font-semibold leading-tight text-3xl mt-0 mb-2;
}
h3 {
  @apply font-semibold leading-tight text-2xl mt-0 mb-2;
}
p {
  @apply font-light leading-relaxed text-base text-gray-800 mt-0 mb-4;
}
main {
  @apply min-h-screen flex flex-col justify-center items-center;
}

参考サイト

【NotionをCMSに】NotionAPI + Next.js + TypeScript でブログ開発〜デプロイまで
Headless CMSを基本からまとめてみた【超入門】
【初心者OK】Next.jsとNotionAPIで爆速ブログ構築してみよう