本書は、人気のWebフレームワーク「Next.js」と、国産ヘッドレスCMSの代表格「microCMS」を用いた、モダンなWebサイトの制作手法をやさしく解説した入門書です。
「記事コンテンツが管理しづらい」「見た目をメンテナンスしづらい」「パフォーマンスやセキュリティがいまいち」……これらの悩みを解消するWebサイト制作の新しいアプローチとして、現在注目を集めているのが「Webフレームワーク+ヘッドレスCMS」の組み合わせです。ヘッドレスCMSは、Webサイト上のコンテンツの「提供」と「表示」を分離できる次世代型のCMSで、コンテンツの表示画面さえ用意すれば、Webサイトの運用や管理、カスタマイズがしやすくなるメリットがあります。
本書は架空のコーポレートサイトを題材に、表示画面をNext.jsで実装し、中身のコンテンツをmicroCMSで管理する一連のプロセスを、ハンズオン形式で体験学習できます。microCMSの開発者陣自らが解説するため、制作現場で生かせる実践的なTIPSが満載です。
【本書で学習できること】
・コンポーネントベースのトップページと下層ページの作成
・記事コンテンツのカテゴリ分け
・ページネーション機能、検索機能、プレビュー機能の作成
・キャッシュを活用したパフォーマンスの最適化
・BASIC認証によるセキュリティの向上
・Vercelによるサイトのデプロイと公開
ステップ・バイ・ステップの手順解説で、つまずきやすいポイントを丁寧にフォローしているため、Webフレームワークに触れた経験の少ない人でも迷わずに読み進められます。新しいサイト制作のアプローチを身につけたいWeb制作者はもちろん、ステップアップとしてWebフレームワークに触れてみたい人にもおすすめの1冊です。
■対象読者
・企業や商店のWebサイトを作っているWeb制作者
・HTML/CSSやWordPressの知識はあるが、Webフレームワークに触れたことがない人
・Next.jsの基本的な使い方を知りたい人
トップページにて、Next.js/Reactにおけるコンポーネントの作り方や、見た目の制御方法を学びます。
メンバーページでは、表示するメンバー情報をmicroCMSで管理します。Next.jsからmicroCMSに格納されている情報を取得することで、API通信について学びます。
ニュースの詳細ページでは、アクセスするURLによって動的に表示内容を切り替えるためのダイナミックルーティングについて学びます。 ニュースの一覧ページでは、カテゴリー分け、ページネーション、画面プレビュー、検索機能を実装していきます。その際に、microCMSのAPIをより高度に活用する方法を学びます。
お問い合わせページでは、ユーザーからのお問い合わせをHubSpotというサービスを用いて管理します。お問い合わせフォームからデータをHubSpotに送信する処理では、Next.jsのServer Actionsという機能を活用します。
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 レスポンシブ画像を実装しよう