新書リリース。「Next.jsでつくるフルスタックアプリ 前編・後編」

blog-hero-img最新のNext.js(Appフォルダ)を使ってフルスタックアプリを開発する新書を出版します

pen-icon2023.11.28rewrite-icon2023.12.11

Profile Pic

この記事の筆者:三好アキ(エンジニア)


ウェブデザイナーから『エンジニア』『プログラマー』へ成長したい人、独学で進んでいきたい人を応援しています。 HTMLとCSSの知識だけでアプリ開発を始められる入門書を多数執筆中📕📗👇


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。



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章 ブラッシュアップ

画像のアップロード

ローディング