CodeZineを運営する翔泳社より、7月8日(月)に書籍『Next.js+ヘッドレスCMSではじめる! かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた』が発売となりました。
本書はWebサイト制作のアプローチとして注目を集める、WebフレームワームとヘッドレスCMSを組み合わせた手法について解説した本です。
表示画面(フロントエンド)はNext.jsで実装し、核となるコンテンツは国産ヘッドレスCMSの「microCMS」で管理します。下記のように、Webサイト制作に必要なノウハウをいちから順にしっかり説明しています。
- コンポーネントベースのトップページと下層ページの作成
- 記事コンテンツのカテゴリ分け
- ページネーション機能、検索機能、プレビュー機能の作成
- キャッシュを活用したパフォーマンスの最適化
- BASIC認証によるセキュリティの向上
- Vercelによるサイトのデプロイと公開
架空のコーポレートサイトを題材に、ハンズオン形式で制作のプロセスと実践的なテクニックを解説。著者はmicroCMSの開発陣なので、確かな知識が身につきます。
Webサイト制作の初心者はもちろん、WordPressに並ぶ新しい制作手法に触れたいエンジニアにもおすすめです。
目次
chapter1 Webサイト制作とコンテンツ管理の歴史を知ろう
1-1 Webサイト制作とコンテンツ管理のはじまり
1-2 WordPressの登場
1-3 ヘッドレスCMSの登場
chapter2 開発環境をセットアップしよう
2-1 開発環境の概要
2-2 Node.js環境をセットアップしよう
2-3 エディタをインストールしよう
2-4 Next.jsを使ってみよう
2-5 Gitをインストールしよう
chapter3 トップページを作ってみよう
3-1 ページを書き換えてみよう
3-2 画像を扱ってみよう
3-3 トップニュースのセクションを作ってみよう
3-4 ヘッダー・フッターを作ってみよう
chapter4 下層ページを作ってみよう
4-1 ページを追加してみよう
4-2 ページ遷移をさせてみよう
4-3 メンバーページを作ってみよう
4-4 ハンバーガーメニューを作ってみよう
chapter5 ヘッドレスCMSでコンテンツ管理してみよう
5-1 microCMSとは
5-2 microCMSをセットアップしよう
5-3 メンバーページにmicroCMSを組み込んでみよう
5-4 トップページのニュースにmicroCMS を組み込んでみよう
chapter6 ニュースページを作ってみよう~基礎的なコンテンツの扱い方~
6-1 ニュースの一覧ページを作ってみよう
6-2 ニュースの詳細ページを作ってみよう
chapter7 ニュースページを作ってみよう~応用的なコンテンツの扱い方~
7-1 カテゴリー分けしてみよう
7-2 ページネーション機能をつけてみよう
7-3 プレビュー機能をつけてみよう
7-4 検索機能をつけてみよう
chapter8 キャッシュを活用してサイトのパフォーマンスを高めよう
8-1 Vercelにデプロイしよう
8-2 キャッシュについて学ぼう
8-3 さまざまなレンダリング方式について学ぼう
8-4 Next.jsにおけるキャッシュの制御を学ぼう
8-5 HTTPリクエスト単位のキャッシュを設定してみよう
8-6 Basic認証を設定してみよう
chapter9 お問い合わせページを作ってみよう
9-1 お問い合わせページを作ってみよう
9-2 HubSpotと連携しよう
chapter10 もっと便利に! 現場で役立つ実践テクニック
10-1 メタデータを設定しよう
10-2 サイトマップを用意しよう
10-3 アナリティクスの設定をしよう
10-4 Core Web Vitalsの対策をしよう
この記事は参考になりましたか?
- この記事の著者
-
渡部 拓也(ワタナベ タクヤ)
翔泳社マーケティング課。MarkeZine、CodeZine、EnterpriseZine、Biz/Zine、ほかにて翔泳社の本の紹介記事や著者インタビュー、たまにそれ以外も執筆しています。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社