Reactベースのフレームワークである「Next.js(ネクストジェーエス)」

「Next.js」を使用しているWebページも多く見るようになりました。

「Next.js」の特徴としては、大きく下記のようなことが挙げられます。

Webエンジニアとして、必須の技術となってきています。

初心者にぴったりの本があったので、紹介したいと思います。

 

この記事は、

にオススメです。

• 目次
• 概要
• 対象者
• 内容と感想
• オススメしたい点
• 最後に

概要

2022年7月30日にエビスコムから出版されたNext.js/Reactの技術書です。

Reactのフレームワーク「Next.js」を学習しながら、ブログページを構築していきます。

実装に困ったときに調べるための本というよりは、本書にならってWebサイトを作り、学習していきます。

HTML、CSSを触ったことがなくてもブログページを実装できるほどに、丁寧に書かれています。

PHPなどのバックエンドの言語はもちろん出てきません。

総ページは351ページと少し分厚め。

ページ数は結構ボリュームがありますが、初心者にはぴったりの技術書だと思います。

対象者

対象者は下記のような方です。

npm, yarnを使用してパッケージをインストールする作業もあるので、モダンJavaScriptの学習をしているとなお良しです。（本書にも手順が丁寧に書いてあるので、学習してなくてもOKです。）

また、本書は「Web制作」の本です。
ですので「Webアプリケーション開発」をしたい方には、向かない内容となってます。

また、今WordPressを使って開発を行なっていたり、静的サイトをの開発を行っているが、Next.jsやヘッドレスCMSを使用して、Webサイトを構築したいという方におすすめの内容だと思います。

HTML、CSS、JavaScriptを学習したことがある、Web制作初心者〜中級者におすすめの内容だと思います。

内容と感想

大きなポイントに分けて説明します。

Nextjsのページやディレクトリ構成の理解（コンポーネントの分け方）

Next.jsの開発環境の立て方から始まり、Next.jsでの「Web制作」の構築方法が書かれています。

細かな設定を省いた、初心者に易しい「create-next-app」を使用しての構築になります。

Next.jsのディレクトリ構成、Webページの構築方法、画像の最適化、CSSが主な内容で、本書にならって構築していけば、誰でもWebページを作ることができる内容です。

ヘッドレスCMSの使い方

ヘッドレスCMSである「microCMS」を使用しての構築作業。

ブログの記事を投稿する画面を「microCMS」で作り、その記事の内容をNext.jsで出力します。

私は今までWordPressしか使用したことがなく、本書で初めてヘッドレスCMSを使用しました。

ヘッドレスCMSのメリットとして、下記があります。

フロントエンド界隈では、自身で保守しなければならないWordPressに限界が来ており、ヘッドレスCMSに移行する声も多いです。

今後は、主要CMSにヘッドレスCMSが使われると予想されています。

Webサイトの構築するにあたって、管理画面が不必要な場合もあります。

その際はこちらのセクションを飛ばしても問題ないでしょう。

「React Hook」の使い方

「React Hook(リアクトフック)」とは、React16.8で追加された新機能で、useStateや、useRefといった関数のことです。

個人的にはNext.jsを「React Hook」を初心者に説明するのは難しく、ひとつの大きな壁だと思います。

本書で書かれている「React Hook」の使い方は、Web制作においての「React Hook」の使い方ですので、馴染みのある、ハンバーガーメニューやアコーディオの実装を通じて、理解を進めていくことができます。

オススメしたい点

React Hookがわかりやすい

「React Hook」に苦手意識がある方も多いのではないでしょうか。

本書には、第10章でWeb制作にあたっての「React Hook」の説明がありますが、とてもわかりやすいです。

私も、Reactの勉強をした際にuseStateやuseEffectの使い方が曖昧でした。

馴染みのある、ハンバーガーメニューやアコーディオンを「React Hook」を使用して実装することで、とても理解が深まりました。

とにかく丁寧に書かれている

初めてReactを触る方でも、初めてNext.jsを触る方でも、初めてパッケージをインストールする方でも、初めてヘッドレスCMSを扱う方でも、とにかく丁寧に順序が書かれています。

極論、本書に習って構築していけば、最低限HTML/CSSを触ったことがある人なら構築できると思います。

本書に書かれている内容が知識不足で理解できない方のためにも、本書記載のPDFリンクと、GitHubにてフォローの解説がされています。

ReactやNext.jsのセットアップ方法から事細かに書いてあり、初心者がNext.jsを始めるにはぴったりの本だと思います。

最後に

初めてNext.jsを使用してWebサイトを作ってみましたが、まずページ遷移の速さにとても驚きました。

ページ遷移が、タブを切り替えるぐらいの速さで、ユーザにストレスを与えません。

Web制作を始めた方であれば、読んだことがある「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」のReact/Next.js版のような印象を受けました。

それほど丁寧に書かれています！

本書で、より良いWeb制作ライフを送ってください！

関連記事

モダンJavaScriptからReactを始める！【React実践の教科書】