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

blog-hero-img専門用語なし。2時間でストレスなく終えられる優しいNext.js入門書リリース

pen-icon2023.05.12

Profile Pic

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


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


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



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて配信中。登録はこちらから → 無料メルマガ登録

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

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

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

【最新バージョンのNext.jsとAppフォルダで、時短でNext.jsを習得】

1759円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を学べる唯一の書籍です。

どうぞご利用ください。

以下目次です。


はじめに

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

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

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

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

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