Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた

chapter1 Webサイト制作とコンテンツ管理の歴史を知ろう
1-1 Webサイト制作とコンテンツ管理のはじまり
1-2 WordPressの登場
1-2-1 さまざまなCMS
1-2-2 Webサイトが表示される仕組み
1-2-3 WordPressの仕組み
1-3 ヘッドレスCMSの登場
1-3-1 ヘッドレスCMSとは
1-3-2 ヘッドレスCMSの仕組み

chapter2 開発環境をセットアップしよう
2-1 開発環境の概要
2-2 Node.js環境をセットアップしよう
2-3 エディタをインストールしよう
2-3-1 Visual Studio Code（VSCode）とは
2-3-2 VSCodeをインストールしよう
2-4 Next.jsを使ってみよう
2-4-1 フロントエンドのフレームワーク
2-4-2 Next.jsのプロジェクトを立ち上げよう
2-5 Gitをインストールしよう
2-5-1 Gitとは
2-5-2 Gitのインストール
2-5-3 Gitを使ってみよう
2-5-4 GitHubを使ってみよう

chapter3 トップページを作ってみよう
3-1 ページを書き換えてみよう
3-1-1 Next.jsのディレクトリ構成を知ろう
3-1-2 JSXでマークアップする方法を知ろう
3-1-3 文章を書き換えよう
3-1-4 モダンなCSS記法（CSSmodules）で装飾をしよう
3-2 画像を扱ってみよう
3-2-1 画像ファイルの扱い方
3-2-2 next/imageで画像を最適化しよう
3-3 トップニュースのセクションを作ってみよう
3-3-1 データを表示させよう
3-3-2 コンポーネントを作ろう
3-4 ヘッダー・フッターを作ってみよう
3-4-1 ヘッダーコンポーネントを作ろう
3-4-2 フッターコンポーネントを作ろう

chapter4 下層ページを作ってみよう
4-1 ページを追加してみよう
4-1-1 ルーティングについて学ぼう
4-1-2 Next.jsでルーティングをしよう
4-2 ページ遷移をさせてみよう
4-2-1 リンクを追加しよう
4-2-2 Next.jsの機能でリンク遷移をしよう
4-2-3 Not Foundページを作ろう
4-2-4 導線を整えよう
4-3 メンバーページを作ってみよう
4-3-1 メンバー一覧を表示しよう
4-3-2 レイアウトを整えよう
4-3-3 コンポーネントを共通化しよう
4-3-4 コンポーネントを作成するポイント
4-4 ハンバーガーメニューを作ってみよう
4-4-1 Menuコンポーネントを作ろう
4-4-2 Webサイトに動きをつけよう
4-4-3 useStateでWebサイトに動きをつけよう
4-4-4 Next.jsの内部的な仕組みについて知ろう

chapter5 ヘッドレスCMSでコンテンツ管理してみよう
5-1 microCMSとは
5-2 microCMSをセットアップしよう
5-2-1 アカウントを登録しよう
5-2-2 サービスを作ろう
5-2-3 APIを作ろう
5-2-4 コンテンツを作ろう
5-2-5 APIを呼び出せるようにしよう
5-3 メンバーページにmicroCMSを組み込んでみよう
5-3-1 事前準備をしよう
5-3-2 ソースコードを書き換えよう
5-3-3 コンテンツ数の取得上限を調整しよう
5-4 トップページのニュースにmicroCMS を組み込んでみよう
5-4-1 コンテンツを用意しよう
5-4-2 データ取得の準備をしよう
5-4-3 ソースコードを書き換えよう

chapter6 ニュースページを作ってみよう～基礎的なコンテンツの扱い方～
6-1 ニュースの一覧ページを作ってみよう
6-1-1 ニュースページのレイアウトを作ろう
6-1-2 microCMSからニュースコンテンツを取得・表示しよう
6-2 ニュースの詳細ページを作ってみよう
6-2-1 Next.jsでダイナミックルーティングを実装しよう
6-2-2 Not Foundページに移動させよう

chapter7 ニュースページを作ってみよう～応用的なコンテンツの扱い方～
7-1 カテゴリー分けしてみよう
7-1-1 カテゴリーリンクを作ろう
7-1-2 カテゴリーページを作ろう
7-1-3 不正な値が入力されたときの処理
7-1-4 どのカテゴリーの一覧ページかわかるようにしよう
7-2 ページネーション機能をつけてみよう
7-2-1 ページ番号ごとのページを作ろう
7-2-2 不正な値が入力されたときの処理
7-2-3 ページリンクのコンポーネントを作ろう
7-2-4 現在のページ番号がわかるようにしよう
7-2-5 カテゴリーページにページネーション機能を実装しよう
7-3 プレビュー機能をつけてみよう
7-3-1 microCMSの画面プレビュー機能の流れ
7-3-2 microCMS側の設定をしよう
7-3-3 プレビューページを作ろう
7-3-4 画面プレビューの動作を確認しよう
7-4 検索機能をつけてみよう
7-4-1 検索フィールドのコンポーネントを作ろう
7-4-2 検索機能を実装しよう
7-4-3 検索結果ページを作ろう
7-4-4 検索体験を改善しよう
7-4-5 useSearchParamsを使用したときの注意点

chapter8 キャッシュを活用してサイトのパフォーマンスを高めよう
8-1 Vercelにデプロイしよう
8-1-1 Vercelにアカウント登録しよう
8-1-2 プロジェクトを作ろう
8-2 キャッシュについて学ぼう
8-2-1 キャッシュとは
8-2-2 キャッシュの種類
8-3 さまざまなレンダリング方式について学ぼう
8-3-1 SSR（Server Side Rendering）
8-3-2 SSG（Static Site Generation）
8-3-3 CSR（Client Side Rendering）
8-3-4 ISR（Incremental Static Regeneration）
8-4 Next.jsにおけるキャッシュの制御を学ぼう
8-4-1 Webhookを活用してSSG形式のページを更新しよう
8-4-2 SSRを用いてニュースを即時更新しよう
8-4-3 ISRを用いてキャッシュの最適化をしよう
8-5 HTTPリクエスト単位のキャッシュを設定してみよう
8-5-1 画面プレビューのURLを変更しよう
8-5-2 データ単位のキャッシュの仕組み
8-5-3 その他のページの設定をしよう
8-6 Basic認証を設定してみよう
8-6-1 Middlewareとは
8-6-2 Middlewareの設定方法
8-6-3 Basic認証とは
8-6-4 Next.jsでBasic認証を設定しよう

chapter9 お問い合わせページを作ってみよう
9-1 お問い合わせページを作ってみよう
9-1-1 HubSpotについて知ろう
9-1-2 Next.jsとServer Actions
9-1-3 お問い合わせフォームにおけるデータの流れ
9-1-4 お問い合わせフォームを作ろう
9-1-5 バリデーションと投稿機能を追加しよう
9-2 HubSpotと連携しよう
9-2-1 HubSpotを準備しよう
9-2-2 HubSpotアカウントをセットアップしよう
9-2-3 フォームを作ろう
9-2-4 HubSpotへデータを送ってみよう

chapter10 もっと便利に！　現場で役立つ実践テクニック
10-1 メタデータを設定しよう
10-1-1 layout.tsxやpage.tsxに設定を記述しよう
10-1-2 特定のファイルをappディレクトリに配置しよう
10-2 サイトマップを用意しよう
10-2-1 サイトマップとは？
10-3 アナリティクスの設定をしよう
10-3-1 サードパーティスクリプトの読み込み
10-3-2 Google Analyticsでの使用方法
10-3-3 Google Tag Managerでの使用方法
10-4 Core Web Vitalsの対策をしよう
10-4-1 Core Web Vitalsの三大指標
10-4-2 Lighthouseを使用して計測しよう
10-4-3 優先的に読み込む画像を設定しよう
10-4-4 レスポンシブ画像を実装しよう

• 本商品の内容についての問い合わせ
• ご購入等に関する問い合わせ