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

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

pen-icon2022.12.21rewrite-icon2022.12.23

Profile Pic

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


「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。



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

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

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

ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein

monoteinについての案内資料の無料ダウンロードはこちら。

「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。

無料相談