見出し画像

Next.jsでCSS Modulesを利用したときにハマったこと

saizaku

React+TypeScript+nextでstyle属性にCSS変数を使う場合

style={{'--icon-size': iconSize}}

だと怒られるので、型アサーションを利用して以下のように書く。

style={{['--icon-size' as any]: iconSize}}

anyで本当にいいんか・・・？という気はしなくもない。
TypeScriptよくわからんなので後でちゃんと調べる。
https://stackoverflow.com/questions/52005083/how-to-define-css-variables-in-style-attribute-in-react-and-typescript

next/imageのlayout="responsive"がdeprecatedになってる問題

  • styleを充ててそれ相当の動きをつける

<Image
  src={eyecatch}
  alt=""
  sizes="(min-width: 1152px) 1152px, 100vw"
  placeholder="blur"
  priority
  style={{
    width: '100%',
    height: 'auto',
  }}
/>

また、styleでvwを使いたい場合は、_document.tsxでviewportの設定を入れる

export default function Document() {
  return (
    <Html lang="ja">
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap"
          rel="stylesheet" />
          <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

いいなと思ったら応援しよう！