Course curriculum

    1. 本講座で学べる事

    1. 参考メディア「ICS MEDIA」を覗いてみよう

    2. まずはClaudeと壁打ちしよう

    3. Next.jsで開発環境構築をはじめよう

    4. MicroCMSのセットアップ

    5. タグAPIの作成とコンテンツ作成

    6. microcms-js-sdkのインストールとデータフェッチ

    7. AIを使ってメディアのフロントデザインを参考にしよう

    8. ホーム画面の作成をはじめよう

    9. タイトル背景色の追加

    10. 記事一覧セクションの作成

    11. 記事カードの作成

    12. 記事のデータフェッチとレイアウト調整

    13. 記事カードのレイアウト修正

    14. ホバーした時のカードの挙動修正

    15. ページネーション実装をAIを使って理解しよう

    16. ページネーションの実装①

    17. ページネーションの実装②

    18. ページネーションの実装③

    1. 詳細ページの作成

    2. 詳細記事タイトル・作成日・タグ等の取得

    3. HTML状態の詳細記事コンテンツの表示

    4. tailwindcss-typographyのCSSカスタマイズ

    5. Next.jsでView Transition APIの導入①

    6. Next.jsでView Transition APIの導入②

    7. Next.jsでView Transition APIの導入③

    8. Next.jsでView Transition APIの導入④

    9. SNSシェアコンポーネントの作成

    10. Twitter(X)で記事を共有してみよう

    11. 宣伝用のコンポーネントの追加

    12. トップに戻るボタンの追加＆レイアウトの修正

    1. Dyanamic Routesで動的タグページの作成

    2. Heroセクションの汎用化と共有

    3. タグ名からタグに共通する記事一覧の取得

    4. タグの全取得 / 現在のタグ名からの絞り込み

    5. タグIDからタグに関する記事一覧の表示

    6. タグ一覧ページの作成

    7. リファクタリング

    8. ビルドとプロダクション環境での動作確認

    9. WebHook設定をするためSSGにしよう

    1. メディア全体のメタデータの設定

    2. 動的メタデータの設定

    3. cache()を使ったリクエストのメモ化とその必要性

    4. ogp画像の作成と配置

    5. VercelへデプロイしてOGP画像の確認

    6. faviconロゴ画像の作成と配置

    7. MicroCMSのWebhooks設定で自動デプロイ

    8. Google Analyticsの導入

    9. サイトマップを作成しよう

    10. robot.txtを導入してクローラーに認識してもらおう

    1. おわりに

About this course

  • 98,000円
  • 51回のレッスン
  • 5時間の動画コンテンツ

Discover your potential, starting today