Skip to content

Home

Jump to bottom
ebisucomtechlab edited this page Aug 13, 2023 · 14 revisions

『作って学ぶ Next.js/React Webサイト構築』のサポートwiki です。 変更等があれば追加していきます。

plaiceholder のバージョン [2023年8月13日]

書籍 P.250 でインストールしている plaiceholder ですが、最新の plaiceholder@3.0 で仕様が変更され、まったくの別物になっています（ファイルの取り回しの部分が削られ、変換機能だけになっています）。

本書で解説した使い方をしたい場合には、「plaiceholder@3.0を使う必要はない」と公式の Upgrading to 3.0 にもありますので、

npm install plaiceholder@2

としてインストールしてください。2.x.x の最新バージョンがインストールされ、書籍で解説している機能が使えます （確認した時点では、2.5.0 がインストールされます）。

Next.js 13対応

  • 「Next.js 13 対応ガイド」P.36 に誤植がありましたので修正しました。[2023年7月11日]

    • 誤： export default async function Post({ param }) {
    • 正： export default async function Post({ params }) {

  • Next.js 13.4 で App Router が Stable になり、13.4.3 で本書の範囲で問題がなくなったため、「Next.js 13 対応ガイド」（next13.pdf）を速報版から更新しました。「Next.js 13で本書を進める方法」と「本書のプロジェクトをApp Routerへ移行する方法」をまとめています。［2023年7月5日］

  • 「Next.js 13 対応ガイド」でのappDirへの移行に関して：
    現時点でのappDirでは書籍サンプルと同等のものを安定した形で実現できません。head.jsやnext/linkといった基本的な部分の変化も多く、このあたりが落ち着くまでPDFの更新は先送りさせていただきます。［2023年1月12日］

  • 著者NOTE「Next.js 13のnext/image（next/future/image）へ移行する」を公開しました［2023年1月12日］

  • 「Next.js 13 対応ガイド（速報版）【next13.pdf】」を追加しました。［2022年10月26日］

eslint-config-nextの更新

npm run buildを実行した際に、次のようなエラーが表示されるケースがあります。

Failed to compile.

./components/nav.js
19:16  Error: Unknown property 'jsx' found  react/no-unknown-property
19:20  Error: Unknown property 'global' found  react/no-unknown-property

これは、eslint-plugin-reactのバージョンアップが原因で、styled-jsxの属性に反応しています。

eslint-config-nextを更新することで解決できます。

npm install eslint@latest eslint-config-next@latest

セットアップPDF

ver.1.2 ［2022年9月6日更新］

  • P.30に「CSS ModulesのcomposesとVisual Studio Code」を追加しました。

ver.1.1 ［2022年8月19日更新］

  • P.2にPDFの使い方を追加しました。

CSS Modulesの「composes」とVisual Studio Code

問題

CSS Modulesのcomposes（書籍P.92など）を使うと、Visual Studio Codeで「Unknown property: 'composes'」とWarningが出る。

Warningの原因

CSS Modulesのcomposesが、Visual Studio Codeのバリデータに「CSSに存在しないプロパティ」と認識されるのが原因です。

Warningの解決方法

composesを「正しいプロパティ」として登録します。

  1. 「管理」から「設定」を選択。
  2. 「css lint valid」で検索。
  3. 「CSS > Lint: Valid Properties」にcomposesを追加。

css-valid-properties

CSS Modulesのシンタックスハイライト

機能拡張の「CSS Modules Syntax Highlighter」などを利用すると、CSS Modulesのシンタックスハイライトを行うことができます。なお、この機能拡張を利用する場合でも、composesのWarningを消すには上記の設定が必要です。

初版第1刷の正誤情報

［2022年8月17日更新（P.21、313の情報を追加）］

P.21　右下のデータ

  • 誤：
{"div", {class: "contents"}, 
    {"h1", null, "Hello"}, 
    {"p", null, "こんにちは"}, 
    {"footer", null, "by CUBE"}}
  • 正：
{"div", {class: "contents"}, 
   [{"h1", null, "Hello"}, 
    {"p", null, "こんにちは"}, 
    {"footer", null, "by CUBE"}]}

P.69　header.jsとfooter.jsのコード

  • 誤： import Logo from './logo'
  • 正： import Logo from 'components/logo'

P.77　一番下のCSSコード

  • 誤： .text :global(.subtitle) {
  • 正： .text :global(.title) {

P.274, 275　CSSコードの右下のファイル名

  • 誤： styles/pagination.module.css
  • 正： styles/posts.module.css

P.313　コード

  • 誤： import Accordion from 'components/accordion-anim'
  • 正： import Accordion from 'components/accordion'
Clone this wiki locally