Skip to content

Home

Jump to bottom
ebisucomtechlab edited this page Jan 12, 2023 · 14 revisions

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

Next.js 13対応

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

  • 著者NOTE「Next.js 13のnext/image（next/future/image）へ移行する」を公開しました［2022年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 validate」で検索。
  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