blog-hero-img

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

pen-icon2022.12.21rewrite-icon2023.6.2

この記事は約2分で読めます

Profile Pic

この記事の筆者:三好アキ


🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。

🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。


Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2



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の書き方(補足)

Profile Pic

メルマガ配信中
(from 三好アキ/エンジニア)


React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)