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

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

• 要旨（「BOOK」データベースより）

  Ｗｅｂ制作者のレベルを一段高める、ＷｏｒｄＰｒｅｓｓに並ぶ新しい選択肢！本書は、人気のＷｅｂフレームワーク「Ｎｅｘｔ．ｊｓ」と、国産ヘッドレスＣＭＳ「ｍｉｃｒｏＣＭＳ」を用いた、モダンなＷｅｂサイトの制作手法をやさしく解説した入門書です。本書は架空のコーポレートサイトを題材に、表示画面をＮｅｘｔ．ｊｓで実装し、中身のコンテンツをｍｉｃｒｏＣＭＳで管理する一連のプロセスを、ハンズオン形式で体験学習できます。ｍｉｃｒｏＣＭＳの開発者陣自らが解説するため、制作現場で生かせる実践的なＴＩＰＳが満載です。

• 目次

  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 レスポンシブ画像を実装しよう
  

• 出版社からのコメント

  Next.jsと国産ヘッドレスCMSの「microCMS」を使った、モダンなWebサイトの制作手法をやさしく解説します。

• 内容紹介

  フレームワーク初心者でも迷わない！
  Web制作者のレベルを一段高める、
  WordPressに並ぶ新しい選択肢を身につけよう！

  本書は、人気の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の基本的な使い方を知りたい人

• 著者紹介（「BOOK著者紹介情報」より）（本データはこの書籍が刊行された当時に掲載されていたものです）

  柴田 和祈(シバタ カズキ)
  株式会社ｍｉｃｒｏＣＭＳ取締役ＣＸＯ。慶應義塾大学を卒業後、ヤフー株式会社にデザイナー入社。広告事業に約５年半従事し、フロントエンドエンジニアとしても経験を積む。２０１７年に株式会社ｍｉｃｒｏＣＭＳを共同創業し、現在は組織作りや事業戦略作りがメイン
  
  森茂 洋(モリシゲ ヒロシ)
  株式会社ｍｉｃｒｏＣＭＳフロントエンドテックリード。制作会社、開発会社などＷｅｂ関連の業界で１５年ほど開発経験を積み、２０２２年１０月よりｍｉｃｒｏＣＭＳに参画。Ｗｅｂ黎明期からＷｏｒｄｐｒｅｓｓやＭｏｖａｂｌｅＴｙｐｅ、そしてヘッドレスＣＭＳに至るまで各種ＣＭＳを利用した多くの案件にも携わる
  
  野崎 洋平(ノザキ ヨウヘイ)
  株式会社ｍｉｃｒｏＣＭＳエンジニア。元高校教員。教員時代にほぼ独学でプログラミングを学びエンジニアに転職、ｍｉｃｒｏＣＭＳに開発初期から参画した。その後ｍｉｃｒｏＣＭＳではリッチエディタなど様々な機能開発に携わる
  
  千葉 大輔(チバ ダイスケ)
  株式会社ｍｉｃｒｏＣＭＳプロダクトエンジニア。新卒でＷｅｂ制作会社に入社し約３年ほどヘッドレスＣＭＳを用いた開発や開発環境の構築・運用などに携わる。その後、ｍｉｃｒｏＣＭＳに転職。Ｎｅｘｔ．ｊｓの画像最適化に関するＯＳＳも開発しており、現在は週間２，０００ダウンロードを超えるものとなっている

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