Skip to content

ebisucom/next-react-website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

作って学ぶ 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とデザインデータの使い方

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

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

ディレクトリ 内容
blog/ Chapter 10で完成させるプロジェクトデータです。microCMSのデータを使用します。
blog-chap6/ Chapter 6のプロジェクトデータです。外部データは使用しません。
blog-app-router/ 「Next.js 13 対応ガイド」(next13.pdf)の「本書のプロジェクトをApp Routerへ移行する方法」で完成させるプロジェクトデータです。

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

npm install

を実行してください。

■【デモ】

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

■【インポートデータ】

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

ディレクトリ ファイル 内容
import/ api-blogs.json ブログAPIのフィールド
  contents-blogs.csv ブログ記事のコンテンツ
  api-categories.json カテゴリAPIのフィールド
  contents-categories.csv カテゴリのコンテンツ

■【画像データ】

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

ディレクトリ 内容
images-local/ ローカル環境で使用する画像です。
images-post/ microCMSで使用するアイキャッチ画像と記事本文に挿入する画像です。

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

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

ディレクトリ ファイル&ディレクトリ 内容
Figma/ next-react-website.fig Figmaのデザインデータ
  jpg/ FigmaのデザインデータをJPEG画像として出力したもの

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

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


■ ご利用にあたって

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

(c)2022 EBISUCOM / マイナビ出版