作って学ぶ Next.js/React Webサイト構築

plaiceholderのバージョンについてサポートWikiに追加しました。 ［2023年8月13日］

「Next.js 13 対応ガイド」（next13.pdf）を速報版から更新しました。 ［2023年7月5日］

• 「Next.js 13で本書を進める方法」
• 「本書のプロジェクトをApp Routerへ移行する方法」

をまとめています。

※最新の情報は著者NOTE（https://ebisu.com/note/ ） や Twitter ( https://twitter.com/ebisucom ) でも出していますので、参考にしてください。

ダウンロードデータ

セットアップPDFや、本書で作成するプロジェクトデータ、使用する画像素材、インポート用のコンテンツデータなどを収録しています。詳しくは、本書を参照してください。

• サポートサイト
• 書籍情報

■【副読本：Next.js 13 対応ガイド】next13.pdf

• 「Next.js 13で本書を進める方法」
• 「本書のプロジェクトをApp Routerへ移行する方法」

をまとめたPDFです。

■【副読本：セットアップPDF】setup.pdf

開発環境などを準備する方法についてまとめたPDFです。

setup.pdfの内容

• アカウントの作成［GitHub、microCMS、Vercel、Netlify、Figma］
• 開発環境の準備［Node.js、Git、エディタ（Visual Studio Code）］
• サイトの公開と更新
• microCMSで管理するコンテンツの準備
• Figmaとデザインデータの使い方

■【プロジェクトデータ】

本書で作成するブログサイトのプロジェクトデータです。

※プロジェクトデータをそのまま利用する場合、各ディレクトリのルートで

npm install

を実行してください。

■【デモ】

本書で作成するブログサイトをVercelとNetlifyにデプロイしたものです。

• https://next-react-website.vercel.app
• https://next-react-website.netlify.app

■【インポートデータ】

microCMS用のフィールドとコンテンツのインポートデータです。

■【画像データ】

ブログサイトで使用する画像データです。

■【Figmaのデザインデータ】

Figmaで作成したデザインデータです。

■ ブログサイトのコンテンツについて

ブログサイトのコンテンツは、日本語に特化したrinna株式会社のGPT言語モデル（rinna/japanese-gpt-1b）を使用して生成した文章を編集したものです。

• rinna/japanese-gpt-1b ［License］

■ ご利用にあたって

本書に記載されている内容や本ダウンロードデータの運用によって、いかなる損害が生じても、株式会社マイナビ出版および著者は責任を負いかねますので、あらかじめご了承ください。

（c）2022 EBISUCOM / マイナビ出版