Course curriculum

    1. 本講座で学べること

    2. 本講座の完成品デモ

    1. Notionアプリをインストールしてみよう

    2. Next.jsを使ってプロジェクトの雛形を準備しよう

    3. TailwindCSSをNext.jsに導入してみよう

    4. Next.jsにTypescriptを導入してみよう

    5. NotionAPI用にNotionデータベースを作成してみよう

    6. NotionデータベースIDとトークンを取得するインテグレーション作業をはじめよう

    7. 【追加】次の動画におけるNext.jsの雛形を作る際の変更点

    1. 公式NotionAPI用ライブラリをインストールして使ってみよう

    2. SSG（ISR）でNotionで投稿した記事を全て取得してみよう

    3. 記事タイトルやタグ取得用のメタデータ取得関数を作ってみよう

    4. Notionに投稿している記事のタグを全て取得してみよう

    5. TailwindCSSを使って記事内容をブラウザに出力してみよう

    6. ブログ用にレイアウトを調整してみよう

    7. 【修正】ハイドレーションエラーになる場合の修正

    8. 全ページ共通のナビゲーションバーを作ってみよう

    9. 動的ルーディングでNotion記事詳細ページを作成してみよう

    10. 詳細記事のデータを取得するNotionAPIを実装しよう

    11. SSG(ISR)ページにgetStaticPathsを設定してみよう

    12. Slugのパス指定を動的に変更してみよう

    13. notion-to-markdownライブラリを使って記事内容をマークダウンに変更しよう

    14. ReactMarkdownライブラリでマークダウンをそのまま本文に書き換えてみよう

    15. シンタックスハイライトでcodeタグを見やすく変更してみよう

    16. 記事本文の文字フォントと大きさ、ダークモードへ変更してみよう

    1. Notionデータベースに10記事追加してみよう

    2. トップページではブログ記事を4つだけ投稿するように変更してみよう

    3. もっとブログを見る専用ページを作成してみよう

    4. もっとブログを見る専用ページのレイアウトを変更してみよう

    5. 閲覧中のページ数によって出力するブログを変更してみよう

    6. getStaticPathsを閲覧ページ番号に応じて変更させてみよう

    7. forループを使って動的パス設定に対応させよう

    8. ページネーション実装をはじめてみよう

    9. ページ番号をページ数に応じて出力してみよう

    10. 【追加】ページネーション番号のリンクを設定しよう

    11. タグ毎の詳細ページを作ってみよう

    12. 全記事に対してフィルターをかけて指定したタグの記事だけ出力してみよう

    13. タグ詳細ページが出力されないバグを修正してみよう

    14. タグ動的ページのgetStatiacPathsを設定してみよう

    15. ブログで投稿している全てのタグを重複なしで取り出してみよう

    16. タグ詳細ページ用のページネーションを実装してみよう

    17. 全記事リストまたはタグリストによってリンクさせる内容を変更してみよう

    18. Topページにタグ検索コンポーネントを追加してみよう

    19. タグ検索ができるようにタグのリンクを動的に変更してみよう

    20. タグコンポーネントの追加と詳細ページのタグ検索リンクを追加しよう

    1. ブログを最新投稿順にソートしてみよう

    2. 公開・非公開設定を追加してみよう

    1. Githubでソースコードを管理してみよう

    2. VercelへデプロイしてNotionブログを運用してみよう

About this course

  • 27,900円
  • 49回のレッスン
  • 4時間の動画コンテンツ

Discover your potential, starting today