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

基本的にはちょちょいのほいです。

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

f:id:kimizuka:20210103011013j:plain

Next.jsのプロジェクト作成方法

yarn create next-app app

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

TypeScript導入方法

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

SCSS導入方法

yarn add -D sass

styled-components導入方法

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

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

.babelrc

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

これでOKです!