Next.js のおべんきょう

./src/app/layout.tsx
ReactServerComponentsError:

You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

ちあき

import/order でうまくreactとかnextが一番上にきてくれなかったけど、
pathGroupsExcludedImportTypes: ['builtin']したらできた

ちあき

トップ以外はレイアウトを共通化したいとかのときはRoute Groupsでlayout.tsxをつくる。
配下で更に入れ子にできるので、「このディレクトリだけボタン足したい」というときは、そのディレクトリ内でlayout.tsx作ればおｋ

ちあき

eslint まわりあんましよくわかってないなあって反省してる

ちあき

CSS Modulesってpostcssに対応してない？

Syntax error: Selector "&:hover" is not pure (pure selectors must contain at least one local class or id)

って怒られるな……

ちあき

ﾌｰﾝ…

ちあき

使ったことなかったな〜と思って触ってみたけどpostcss使えないのはちょっと合わないかなあ。
CSS in JSは個人的にあんまり好きじゃない（CSSはCSSファイルに書きたい人）からどうしようかな

ちあき

TailwindCSSがいいかなあ？ちょっと使ってみるか

ちあき

storybookで @/components/**/* みたいなパスが解決できてない！ページ内でもだめならtsconfig.jsの設定だよね〜ってページに作ったコンポーネント入れたけど、ページ側はエラーなしで表示できた。（ただしpostcssでエラー）

ちあき

ドキュメント通りasync webpackFinal(config) にする

ちあき

TS18048: config.resolve is possibly undefined

が出るので

if (config.resolve === undefined) {
    return config;
}

を上に入れてみる

ちあき

tailwindcss でなんらかの拡張（特にcolorとか）をしたいときは extendの中でやる。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    colors: {
      primary: '#ff6881',
    },
  },
};

これだとデフォルト値が上書きされるので、他の色が全部使えなくなる

ちあき

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        primary: '#ff6881',
      },
    },
  },
};

追加したいならこう

ちあき

そういえばstorybookいれたときのサンプルで satisfies があったなあしらんなこれと思ったけどべんりそう

ちあき

(・∀・)ｲｲﾈ!!

satisfies の特徴は、型チェックが行われつつも、型推論結果が保持されることです。「satisfies」（サティスファイズ）は「（条件などを）満たす、確信させる」といった意味があります。

次の colorList オブジェクトにおいて、green は ColorList の型の一部であることがチェックされ、かつ number[] 型と推論されます。配列なので、配列用メソッド map() が使えます。

ちあき

appディレクトリ内でpathname使いたいときは usePathname() を使う（next/router が使えないので next/navigation でつかう）

ちあき

コンポーネント用のファイルつくるの面倒になってきたのでためしてみる

ちあき

hygen generator components で

/_template/generator/components

内のpronpt.js で設定した項目で雛形がつくれる。

ちあき

Atomic Designけっこうふんわりしてるからよむ

ちあき