Next.jsビギナー向け入門書、最新版を発売

blog-hero-imgNext.jsとGatsbyの最新バージョンに準拠したビギナー向け入門書をリリースしました

pen-icon2022.12.21rewrite-icon2023.6.2

Profile Pic

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


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


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



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

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

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

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

nextbook

【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」目次

• 第1章 基礎編

Reactフレームワークとは?

ターミナルの使い方

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

• 第2章 開発編 その1

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

create-next-appの中身

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

Reactの書き方

CSSスタイルのあて方

pagesフォルダ

Linkの使い方

記事一覧ページの作成

記事ページの作成 その1(概要)

記事ページの作成 その2(ひな形ファイル作り)

• 第3章 開発編 その2

next/image

Indexページの作成

記事一覧ページの作成

記事ページの作成

コンタクトページの作成

layout.jsの作成

• 第4章 デプロイ Vercel

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

404ページの追加

コンタクトフォーム

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

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

SEO

ファビコンの変更

APIルート

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

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

gatsbybook

【Amazonで見る】

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


• 第1章 基礎編

Reactフレームワークとは?

ターミナルの使い方

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

• 第2章 開発編 その1

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

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

Gatsbyを動かしてみる

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

Reactの書き方

CSSスタイルのあて方

pageフォルダ

Linkの使い方

記事一覧ページの作成

記事ページの作成 その1(概要)

記事ページの作成 その2(テンプレートファイル作り)

記事ページの作成 その3(slugの生成)

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

• 第3章 開発編 その2

Gatsby Image

index.jsの作成

blog.jsの作成

single-blog.jsの作成

contact.jsの作成

layout.jsの作成

• 第4章 デプロイ Netlify

ファイルを最適化する

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

404ページの追加

Forms機能の使い方

ファビコンの追加

URLを変更する

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

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

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

SCSSの書き方(補足)