Next.jsビギナー向け入門書、最新版を発売【はじめてつくるNext.jsサイト】

Next.js入門書「はじめてつくるNext.jsサイト」

一年半ほど前に初版をリリースした「はじめてつくるNext.jsサイト」を、2022年11月に発表された最新バージョンv13を使って書き直し、今回リリースしました。

（2023年6月追記：全面的に書き直して再リリースしました。くわしくはこちら）

【Amazonで見る】

私がこれまで書いてきた本のように、本書もビギナー向けとなっているので、HTML/CSSの知識があればトライできる難易度です。

Next.jsは次に説明するGatsbyと合わせて「Reactフレームワーク」と呼ばれ、技術的にはReactの上に成り立っているものですが、その便利さと使い勝手のよさで実際の開発現場で使われる機会が非常に多いテクノロジーです。

なおこれまでにNext.jsバージョン10、バージョン12を使った教本をそれぞれ2021年3月と2022年5月に発売していますが、今回のバージョン13版では下記のような変更を本に加えています。

どれもNext.js本来のところに関係のない枝葉の部分です。Next.js自体により集中してもらうために変更しました。

---

• CSS Modulesをやめて普通のCSSを採用

• react-helmetをやめてnext/headを採用

• 画像まわりにいくつかのCSSコードを追加

---

「はじめてつくるNext.js」目次

• 第１章　基礎編

Reactフレームワークとは？

ターミナルの使い方

VS Code エラーが発生した場合の対処方法

• 第２章　開発編　その１

create-next-appのダウンロード

create-next-appの中身

Next.jsを動かす create-next-appのクリーンアップ

Reactの書き方

CSSスタイルのあて方

pagesフォルダ

Linkの使い方

記事一覧ページの作成

記事ページの作成　その１（概要）

記事ページの作成　その２（ひな形ファイル作り）

• 第３章　開発編　その２

next/image

Indexページの作成

記事一覧ページの作成

記事ページの作成

コンタクトページの作成

layout.jsの作成

• 第４章　デプロイ Vercel

• 第５章　ブラッシュアップ

404ページの追加

コンタクトフォーム

前後のブログ記事へと移動する

記事一覧ページを分割する（ページネーション）

SEO

ファビコンの変更

APIルート

Gatsby入門書「はじめてつくるGatsbyサイト」

Next.jsと同じく、一年半ほど前に初版をリリースした「はじめてつくるGatsbyサイト」を、2022年10月に発表された最新バージョンv5を使って書き直し、リリースしました。

【Amazonで見る】

「はじめてつくるGatsbyサイト」では以下のようなことをカバーしています。

---

• 第１章　基礎編

Reactフレームワークとは？

ターミナルの使い方

エラーが発生した時の対処法

• 第２章　開発編　その１

スターターキットのダウンロード

スターターキットのクリーンアップ　その１

Gatsbyを動かしてみる

スターターキットのクリーンアップ　その２

Reactの書き方

CSSスタイルのあて方

pageフォルダ

Linkの使い方

記事一覧ページの作成

記事ページの作成　その１（概要）

記事ページの作成　その２（テンプレートファイル作り）

記事ページの作成　その３（slugの生成）

記事一覧ページと記事ページをつなげる

• 第３章　開発編　その２

Gatsby Image

index.jsの作成

blog.jsの作成

single-blog.jsの作成

contact.jsの作成

layout.jsの作成

• 第４章　デプロイ Netlify

ファイルを最適化する

• 第５章　ブラッシュアップ

404ページの追加

Forms機能の使い方

ファビコンの追加

URLを変更する

前後のブログ記事へと移動する

記事一覧ページを分割する（ページネーション）

マークダウンの写真を表示する

SCSSの書き方（補足）