新書リリース。「Next.jsでつくるフルスタックアプリ 前編・後編」
2023.11.28
2023.12.11
この記事は約2分で読めます
この記事の筆者：三好アキ
🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。
🔹 自身のJavaScript挫折経験をもとに、HTMLとCSSの知識だけで本格的なアプリ開発を始められる入門書を多数執筆中。合計著作は22冊を超える。
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録
Next.js + Appフォルダ
今週末（2023年11月30日）に最新のNext.jsを使ってフルスタックアプリを開発する書籍を発売します。
Next.jsでつくるフルスタックアプリ
【最新バージョンのNext.jsとAppフォルダで、フルスタックアプリを自力で作る力を手にいれる】
1980円 → 0円
Amazonのページに移動する
この本は昨年2022年4月に発売した同名書籍のアップデート版になります。
旧版ではNext.jsバージョン12を使って開発を行っていましたが、2022末にリリースされたNext.jsバージョン13では「Appフォルダ」の導入やサーバーコンポーネントのデフォルト化など、非常に大きな変更が加わり、Next.jsのコードの書き方も大きく変わりました。
本書はそのような最新のNext.jsに準拠してフルスタックアプリ開発を行う教本です。
私がこれまで書いてきた本のように、本書もビギナー向けとなっているのでReactやNext.jsの知識がなくてもトライできる難易度です。
前編ではAppフォルダのapiフォルダを使ってバックエンド開発を進めます。ユーザー登録機能、ログイン機能、アイテムの作成・読み取り・編集・削除といったCRUD操作、データベース（MongoDB）との連携を解説します。
後編ではReactの基本的な書き方に始まり、サーバーコンポーネントの使い方、ユーザー登録ページ、ログインページ、アイテムの各操作ページ、画像のアップロード方法などを紹介しています。
前書からの主な変更点は下記のようになっています。
| 変更点 | 前書 | 本書 | |
|---|---|---|---|
| Next.jsのバージョン | 12 | → | 14 |
| フォルダ | Pagesフォルダ | → | Appフォルダ |
| サーバーコンポーネント | × | → | ○ |
| ログインの判定 | オリジナルのauth.jsを作成 |
→ | Next.jsのmiddleware.jsを使用 |
| 開発時とデプロイ時のURL | 手動で変更 | → | 環境変数を設定 |
| ローディングの設定 | × | → | ○ |
| SSG、SSR、CSRの比較 | ○ | → | × |
| フロントエンドからのリクエストのテスト | HTMLページを作成 | → | Thunder Client（VS Codeのエクステンション）を使用 |
なお現在のNext.jsではServer Actionsという機能が安定版となっており、これを使えばあえてバックエンドを分離して開発せずとも、いわゆるフルスタックアプリを作れますが、本書では「フロントエンド + バックエンド = フルスタックアプリ」と定義して、それぞれを分けて開発を行う手法を説明しています。
本書で扱う主なテクノロジー
前編・後編では以下のようなことをカバーしています。
• Appフォルダ
• サーバーコンポーネント
• middleware.js（Next.js）
• カスタムフック（React）
• useState / useEffect
• ログイン
• トークン（JSON Web Token）
• データベース（MongoDB）
• CRUD操作
• 画像のアップロード（Cloudinary）
• 環境変数
執筆スケジュールの遅れ
本書はもともと今夏に出版をする予定でしたが、さまざまなスケジュールが重なり時間が取れなかったため、出版が遅れに遅れていました。
幸い先月と今月（10 - 11月）は時間的に余裕があったため、何とか執筆を終えて、2023年が終わるよりも前に出版まで至ることができました。
年末年始の休暇時、本書が読者の方のNext.jsへの理解を深める一助となることを願っています。
目次
• 前編
第1章 基礎知識と開発ツールの準備
ウェブアプリケーションとは？
フロントエンドとバックエンド
CRUD操作
React／Next.jsを使う理由
ターミナルの使い方
Node.js
npm
VS Code
エラーが発生した場合の対処方法
第2章 Next.jsバックエンド開発の準備
Next.jsのインストール
フォルダの中身
バックエンド開発で使うフォルダ
必要なファイルとフォルダの作成
第3章 アイテム操作機能
アイテムの作成 その1
アイテムの作成 その2
アイテムの読み取り（アイテムをすべて）
アイテムの読み取り（アイテムをひとつ）
アイテムの修正
アイテムの削除
第4章 ユーザー登録とログイン機能
ユーザー登録機能
ログイン機能
ログイン状態の維持
ユーザーのログイン状態を判定する機能
誰がログインしているかを判定する機能
第5章 バックエンドのデプロイ
デプロイの手順（Vercel）
• 後編
第6章 フロントエンド開発の準備／Reactの書き方／Next.jsのサーバーコンポーネント
アイテムデータの保存
コードのクリーンアップ
コードの書き方とスタイルの適用方法
サーバーコンポーネント（Next.js Appフォルダ）
第7章 ユーザー登録ページとログインページ
必要なフォルダとファイル
ユーザー登録ページ
ログインページ
複数の項目を含んだstateの書き方（補足）
第8章 アイテムページ
すべてのアイテムデータを読み取るページ
1つだけアイテムデータを読み取るページ
アイテムデータを作成するページ
アイテムデータを編集するページ
アイテムデータを削除するページ
ページの表示を制限する
スタイルの適用とコンポーネント
第9章 フロントエンドのデプロイ
バックエンドURLの修正（環境変数の設定）
第10章 ブラッシュアップ
画像のアップロード
ローディング
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*配信はいつでも停止できます）
関連記事
