Home

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

Next.js 13対応

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

セットアップ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 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'