Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた 電子書籍｜翔泳社の本
  1. ホーム >
  2. 電子書籍 >
  3. Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた

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

著
著
著
著

形式：
電子書籍
発売日：
ISBN：
9784798188164
価格：
3,278円（本体2,980円＋税10%）
カテゴリ：
Webプログラミング
キーワード：
#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の基本的な使い方を知りたい人

※本電子書籍は同名出版物を底本として作成しました。記載内容は印刷出版当時のものです。
※印刷出版再現のため電子書籍としては不要な情報を含んでいる場合があります。
※印刷出版とは異なる表記・表現の場合があります。予めご了承ください。
※プレビューにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください。

（翔泳社）

01
02

コーポレートサイトの各ページの制作を通じて、次のような内容を学ぶことができます。

01

トップページ

トップページにて、Next.js/Reactにおけるコンポーネントの作り方や、見た目の制御方法を学びます。

02

メンバーページ

メンバーページでは、表示するメンバー情報をmicroCMSで管理します。Next.jsからmicroCMSに格納されている情報を取得することで、API通信について学びます。

03

ニュースページ

ニュースの詳細ページでは、アクセスするURLによって動的に表示内容を切り替えるためのダイナミックルーティングについて学びます。 ニュースの一覧ページでは、カテゴリー分け、ページネーション、画面プレビュー、検索機能を実装していきます。その際に、microCMSのAPIをより高度に活用する方法を学びます。

04

お問い合わせページ

お問い合わせページでは、ユーザーからのお問い合わせをHubSpotというサービスを用いて管理します。お問い合わせフォームからデータをHubSpotに送信する処理では、Next.jsのServer Actionsという機能を活用します。

目次の登録はありません。
本書は付属データの提供はございません。

お問い合わせ

内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。

正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。

利用許諾に関するお問い合わせ

本書の書影（表紙画像）をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影（表紙画像）以外のご利用については、こちらからお問い合わせください。

追加情報はありません。
この商品の「よくある質問」はありません。

ご購入いただいた書籍の種類を選択してください。

書籍の刷数を選択してください。

刷数は奥付（書籍の最終ページ）に記載されています。

現在表示されている正誤表の対象書籍

書籍の種類:

書籍の刷数:

本書に誤りまたは不十分な記述がありました。下記のとおり訂正し、お詫び申し上げます。

対象の書籍は正誤表がありません。

最終更新日:2024年08月06日
発生刷 ページ数 書籍改訂刷 電子書籍訂正 内容 登録日
1刷 101
リスト4-3-6		 未 未
誤
正 リストの末尾に下記のコードを追加 @media (max-width: 920px) {   .container {     width: calc(100% - 80px);   } } @media (max-width: 640px) {   .container {     width: calc(100% - 32px);     padding: 40px 16px;   } }
備
考		 ※掲載のコード自体に誤りはありませんが、よりわかりやすいようにレスポンシブのスタイルを明記します。
2024.08.06
1刷 182
図7-1-2		 未 未
誤 「カテゴリーのタグをクリックする」のテキストが指し示す範囲に誤りがありました。
正 正しくは、図中にある「プレスリリース」と記載されたタグを指し示します。
2024.08.06
1刷 247
リスト9-4-2冒頭2行		 未 未
誤 import styles from "./page.module.css"; import ContactForm from "@/app/_components/ContactForm";
正 import ContactForm from "@/app/_components/ContactForm"; import styles from "./page.module.css";
備
考		 ※import文の順序に誤りがありました。
2024.08.06
1刷 249
ディレクトリ構成図内のファイル名		 未 未
誤 contact.tsx
正 contact.ts
2024.08.06
1刷 259
リスト9-2-2　上から15行目		 未 未
誤 "https://api.hsforms.com/submissions/v3/integration/submit/${process.env.HUBSPOT_PORTAL_ID}/${process.env.HUBSPOT_FORM_ID}",
正 `https://api.hsforms.com/submissions/v3/integration/submit/${process.env.HUBSPOT_PORTAL_ID}/${process.env.HUBSPOT_FORM_ID}`,
備
考		 ※コード中のダブルクォーテーションは、正しくはバッククォートです。
2024.08.06
1刷 260
リスト9-2-2の続き　下から13行目		 未 未
誤 },
正 }
備
考		 ※正しくは行末のカンマは不要です。
2024.08.06
1刷 286
リスト10-4-2　上から5.6行目		 未 未
誤 width={4000} height={1200}
正 width={1000} height={300}
備
考		 ※追加するコードの数値に誤りがありました。
2024.08.06
1刷 286
リスト10-4-3　上から5,6行目		 未 未
誤 ※黒文字で掲載されたコード width={4000} height={1200}
正 ※「4000」「1200」の値は青文字に修正。また、引き出し線付きの注釈テキストで「修正」と入る。 width={4000} //修正 height={1200} //修正
2024.08.06