blog-hero-img

【新刊リリース】動かして学ぶ!Next.js/React開発入門(翔泳社)

pen-icon2024.9.18rewrite-icon2025.6.6

この記事は約2分で読めます

Profile Pic

この記事の筆者:三好アキ


🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ!Next.js/React開発入門(翔泳社/*韓国でも出版)』著者。


▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2



*追加情報と韓国語版(2025年6月追記)

書籍内で使っているNext.jsのバージョンは14ですが、最新の15に対応するための追加情報は下記ページよりご利用いただけます。

https://www.shoeisha.co.jp/book/detail/9784798184678

image

また、本書の韓国語版も出版されています。

Next.js新刊書リリース

明日9月19日に翔泳社より『動かして学ぶ!Next.js/React開発入門』が発売になります。

くわしい書籍の情報は、下記の翔泳社のページでご覧ください。

https://www.shoeisha.co.jp/book/detail/9784798184678

image

X(Twitter)リンク

目次は本記事の最後にあります。

内容と対象読者

この本では、Next.jsをはじめて使うウェブ開発者の人向けに、Next.js(バージョン14/Appルーター)を使ったウェブアプリケーションの開発方法を紹介しています。

書名にもある通り、「動かしながら学ぶこと」に重点を置いた本なので、実際に手を動かしてコードをひとつひとつ書きながら進めてみて下さい。

前半(1章〜5章)でNext.jsのAPI(Route Handlers)を使ったバックエンド開発、後半(6章〜9章)がフロントエンド開発を行う章です(最後の10章は本編で触れなかった追加事項の解説)。

バックエンド、フロントエンド両方のオンラインでの公開方法も解説しているので、本書を終えたときには本格的なフルスタックアプリケーションがひとつ、オンラインで公開されている状態になります。

対象読者としてNext.jsをはじめて使う人を想定しているように、この本はNext.jsの全事項をマスターしたり、高度な使い方を解説する本ではなく、ビギナーにNext.jsに慣れてもらうこと、そしてNext.jsで開発できるアプリの青写真を描いてもらうことに主眼を置いた本です。

Next.jsはReactのフレームワークなので、Reactの初歩についても本書では触れていますが、React自体の解説は多くありません。

なお、ビギナーを対象としていること、およびNext.js自体に集中してもらうため、スタイリングはシンプルなCSS(Tailwind CSS未使用)、開発言語にはTypeScriptではなくJavaScriptを使用しています。

また、より汎用的なバックエンド開発手法を紹介するため、Server Actionsも使っていません。

本書は、私の既刊書「Next.jsでつくるフルスタックアプリ 前編・後編」をベースに、全体的な文章の刷新、「まえがき」と「あとがき」の追加、さらに複数の補足情報およびコラムを加えたものになります。

使用テクノロジー

本書で使っている主なテクノロジー、外部サービス、npmパッケージなどは次のものです。


• Next.js(バージョン14.1.4)
• React(バージョン18)
• Node.js(バージョン20.9.0)
• npm(バージョン10.1.0)
• VS Code(バージョン1.87.2)
• mongoose(バージョン8.2.2)
• jose(バージョン5.2.3)
• highlight.js(バージョン11.9.0)
• MongoDB(Atlas)
• Vercel
• Cloudinary
• Thunder Client
• JSON Formatter

*本書はWindowsではなくMacを使って解説を進めています。Windows向けの説明はないので注意してください。

目次

『動かして学ぶ!Next.js/React開発入門』

三好アキ著/2024年9月19日刊


• Chapter 1 基礎知識と開発ツールの準備

• Chapter 2 バックエンド開発の準備

• Chapter 3 アイテム操作機能

• Chapter 4 ユーザー登録とログイン機能

• Chapter 5 バックエンドのデプロイ

• Chapter 6 フロントエンド開発の準備/Reactの書き方/サーバーコンポーネント

• Chapter 7 ユーザー登録ページとログインページ

• Chapter 8 アイテムページ

• Chapter 9 フロントエンドのデプロイ

• Chapter 10 ブラッシュアップ


image

▼【無料フロントエンド・ガイド】は下記ページで受け取れます。

https://monotein.com/present-for-readers

Profile Pic

🟩 フロントエンド開発者入門ガイド【無料配布中】


最初にこれが知りたかった!
フロントエンド初心者が必ず押さえておきたい ― 『挫折しない勉強法』とその具体的ステップ、無料配布中。
(*名前不要・メールアドレスだけで受け取り可能です)