Next.jsにTypeScript、SCSS、styled-componentsを導入する 📄

yarn create next-app app

（以下のコマンドはappディレクトリ以下で行う）

yarn add -D typescript @types/react @types/node

yarn add -D sass

yarn add styled-components

yarn add -D @types/styled-components babel-plugin-styled-components

ルートディレクトリに.babelrcを作成

{
  "presets": [
    "next/babel"
  ],
  "plugins": [[
    "styled-components", {
      "ssr": true
    }]
  ]
}

これでOKです！

ついでに、Next.js + styled-components でページ表示時に一瞬スタイルが当たってない状態が表示されるのを防ぐのがおすすめです。

さらには、パスを設定すると使いやすくなります。

みかづきブログ・カスタム