Next.jsビギナー向け入門書（v13／Appフォルダ）最新版を発売

Next.jsビギナー向け書籍リリース

最新版のNext.jsバージョン13と、本バージョンで導入されたAppフォルダを使ったビギナー向け入門書を本日リリースしました。

はじめてつくるNext.jsサイト

【最新バージョンのNext.jsとAppフォルダで、時短でNext.jsを習得。作りながら学ぶ実践形式】

1848円 → 0円

Amazonのページに移動する

全面的な書き直し（Appフォルダ採用）

私がNext.jsの書籍をはじめてリリースしたのは2021年です。

2021年発売の初版時点でのNext.jsの最新版がバージョン10で、バージョン11、12と上がるたびに書籍の修正や書き直しをしてきましたが、今回はもっとも大きな変更となり、全面的に書き直しました。

それはバージョン13からフォルダ構成が大きく変わり、従来のpagesフォルダがなくなってappフォルダに移行したためです。

それに合わせてデータ取得の方法も大きく変わりました。

これらの変化を盛り込むために、全面的に書き直しをしたのが本書になります。

これが2度目のリリース

実は私はすでにNext.jsバージョン13を使った同名書籍を昨年末にリリースしています。

しかしその時点ではまだappフォルダはexperimental（実験版）であり、どれほど普及するのか未知数だったため、本の内容にも大きな変更は加えず、従来のpagesフォルダを使ったコードで解説をしていました。

しかし今月（2023年5月）始めにリリースされたNext.js v13.4でappフォルダがstable（安定版）となったため、内容をすべてこの新しいappフォルダに準拠したものに書き改めました。

本書ではバージョン13で導入された下記の項目をカバーしています。

―appフォルダを使った新しいルーティング

―generateStaticParamsを使った新しいパス操作

―廃止されたgetStaticPropsに変わる新しいデータ取得の方法

―Reactサーバーサイドコンポーネント

―新しいAPIルート

―メタデータの追加

また本書の前バージョンまでは、マークダウンファイルの読み込みにWebpackのrequire.context(...を使っていましたが、本書からはNode.jsネイティブモジュールのfsを使っています。

ビギナー向けの唯一の書籍

私の他の本にも共通する基本的なコンセプトを本書でも踏襲しています。

つまり、2時間程度でストレスなく、かつ挫折することなく終えられること。

そのため内容を詰め込みすぎず、また専門用語もできるだけ避けて書かれています。

今日の時点では、Next.jsバージョン13とAppフォルダを使った日本語の解説書はまだ出ていないので、本書が最新のNext.jsを学べる唯一の書籍です。

どうぞご利用ください。

以下目次です。

はじめに

第１章　基礎編
Reactフレームワークについて
ターミナルの使い方
Node.js
npm
VS Code
エラーが発生した場合の対処方法

第２章　開発編　その１
create-next-appのダウンロード
create-next-appの中身
Next.jsを動かす
create-next-appのクリーンアップ
Reactの書き方
appフォルダ
Linkの使い方
フォルダ構成
記事一覧ページの作成
記事ページの作成　その１（概要）
記事ページの作成　その２（ひな形フォルダ／ファイル作り）
記事ページの作成　その３（slugの生成と登録）
記事ページの作成　その４（データを読み込む）

第３章　開発編　その２
必要なファイルのダウンロード
next/image
Indexページの画像
記事一覧ページの画像
記事ページの画像
コンタクトページの作成
共通コンポーネントの作成
Layoutコンポーネント
CSSの適用

第４章　デプロイ
Vercel
終わりに

第５章　ブラッシュアップ
この章ですること
404ページの追加
コンタクトフォーム
前後のブログ記事へと移動する
記事一覧ページを分割する（ページネーション）
メタデータの設定
APIルート
Reactサーバーコンポーネント
関連書