作って学ぶ Next.js/React Webサイト構築

• はじめに
• 本書について
• もくじ

はじめに

HTML & CSSに加えて、Reactの知識が求められるようになってきたのを感じます。

Webデザインという目線で考えても、Figmaなどを扱う上でReactを理解しているほうが何かと便利だったりします。CSSにもReactの存在を感じるようになってきました。Reactで実現していたことを目指していたり、Reactのような環境で使うことを想定しているものも登場してきています。
そして、Web制作という環境でも存在感を増してきたNext.js。そろそろ無視できない存在になってきましたが、これもReactベースのフレームワークです。

Reactの知識があったほうが良いのは間違いありません。

ただ、Reactを理解するためには、JavaScriptという壁があります。JavaScriptをしっかりと学び、経験を積んだ上で、その必要性からReactを学び、そして、Next.jsへつなげて行くのが本来のルートでしょう。では、そのルートを進むためにJavaScriptの経験を積むとしたら、現状では何が最適なのでしょうか？

Reactの環境が簡単に整って、サイトが簡単に構築でき、SG（静的生成）やSSR（サーバーサイドレンダリング）を手軽に試せて、APIまで簡単に用意できる。学ぶ環境としても、経験を積む環境としても、そして実務のための環境としてもバランスよく整っているNext.js。ならば、わざわざ回り道をする必要もなく、Next.jsが使えるようになることを目指しても良いのでは？ と書き始めたのがこの本です。

本書では、HTML & CSSにJavaScriptも使ってきたものの、Reactにはちょっと手を出しきれなかった方が、実際にブログを作成しながら、Next.jsを使ってサイトを構築できるようになることを目指しています。Next.jsの基本的な機能が理解できることはもちろん、Reactの基本も実際のサイトの構築を通して見えてくるように構成しています。

サイトを構築する上で重要なCSSに関しても、Next.jsが標準でサポートしているCSS Modulesやstyled-jsxを使いながら、ReactでのCSSの扱いをしっかりと解説しています。

Next.jsが使えるようになってしまえば、そこからの選択肢は一気に広がります。この本をそこまでの、ガイドとして使っていただければ幸いです。

本書について

Next.jsで構築するWebサイト

本書ではNext.jsを使用して、次のようなブログサイトをステップ・バイ・ステップで構築していきます。

Next.js、React、JavaScript、CSS Modules、styled-jsxの活用方法や設定をわかりやすく見ていくため、ミニマルでシンプルなデザインにしてあります。Figmaのデザインデータとして、デザインシステム（コンポーネント＆デザイントークン）もセットで用意していますので、実装時の参考にしてください。

記事データの管理にはヘッドレスCMSのmicroCMSを利用します。

制作ステップ

ブログサイトはゼロから構築していきます。Chapter 1～6では基本的なページやReactコンポーネントの作成、Chapter 7～9ではヘッドレスCMSからの外部データの取得や表示、Chapter 10ではReact Hooks（フック）を使ったカスタマイズを行い、サイトを完成させます。

ページ構成

制作ステップごとに次のようにページを構成しています。

ダウンロードデータ

本書で作成するNext.jsのプロジェクトデータ、Figmaのデザインデータ、使用する画像素材、microCMSのコンテンツデータなどは、ダウンロードデータに収録してあります。詳しい収録内容や使い方については、ダウンロードデータ内のreadmeを参照してください。

セットアップPDF

本書はNext.jsによるサイト構築の解説をメインとしています。そのため、付随する開発環境の準備などについては「セットアップPDF（全69ページ）」にまとめ、ダウンロードデータに同梱しています。必要に応じて利用してください。セットアップPDFの内容は次のようになっています。

• アカウントの作成 （GitHub、microCMS、Vercel、Netlify、Figma）
• 開発環境の準備 （Node.js、git）
• サイトの公開と更新
• microCMSによるコンテンツの管理
• エディタ（Visual Studio Code）の準備
• Figmaとデザインデータの使い方

もくじ