Zenn
🧏

絶対につまづかないNext.jsのはじめかた【TypeScript + Dart Sass】

2020/11/03に公開
Next.js
React
Sass
TypeScript
CSS Modules
tech

Next.js で TypeScript と Scss（Dart-Sass） でセットアップするときにいちいちググるのが面倒なのでここにすぐに始めるためのフローを書き残しておきます。npmやyarnのなどのセットアップは省略させていただいています。

Dart Sassを使う理由は後ほどご紹介します。
またコンポーネントのスタイルはCSS Modulesで行います。

バージョン

  • npm 6.14.6
  • Yarn 1.22.4
  • Next.js 10.0.0
  • TypeScript 17.0.1
  • Sass ^1.28.0

※2021/09/18 動作確認

  • npm 7.24.0
  • Yarn 1.22.10

※2023/02/24 Vercelが提供するTypeScriptインストールの仕組みに沿った形に変更しました。

1. Next.js のインストール

% npx create-next-app [プロジェクト名] --ts

何はともあれNext.jsのインストールから始めます。

[2023/02/24追記] --tsもしくは--typescriptオプションを指定することで最初からTypeScriptで記述されたNext.jsプロジェクトが立ち上がります。

2. TypeScriptと型定義を yarn add

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

プロジェクトにTypeScriptを追加します。

3. srcディレクトリを作成しpagesとstylesをsrc以下に移動

Next.js 9.1以降からsrcディレクトリが自動で認識されるようになりました。移動しておきましょう。

4. tsconfig.jsonを作成

% touch tsconfig.json

上記コマンドでプロジェクトにtsconfig.json（TypeScriptの設定ファイル）が作成されます。tsconfig.jsonに以下のコードをコピペしてください。

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

compilerOptionsのpathsの設定により、src/内の各ts/tsxファイルにおいて相対パスを書く際に@から書き始めることができます。importの際にいちいち../の数を数える必要がなくなります。

5. Sass(SCSS)をインストール

今回は CSS Modules でコンポーネントをスタイリングします。使用するのはDart Sassです。

以下のコマンドでプロジェクトにインストールします。

% yarn add sass

あとは src/stylesディレクトリに[コンポーネント名].module.scssを作成しSCSSを書いていきましょう。コンポーネントファイル（.tsx）内で

import styles from '@/styles/[コンポーネント名].module.scss'

とすれば dart-sass で CSS Modules を利用できます。

ついでにsrc/styles内に既存のglobals.cssも.scssに書き換えます。globals.scssは_app.tsxでインポートされているので必ず

import '../styles/globals.scss'

に書き換えておきます。

Dart Sass を使う理由

ICSの池田さんがTwitterでのアンケートを元に以下の記事を作成していらっしゃいました。
HTMLコーダーにとっての2020年 アンケート結果から分析するイマドキのウェブ制作 -ICS Media-

Dart Sass はSass公式が推奨するコンパイルエンジンで、新機能の先行実装やnode-sassで問題になっていた依存関係を解決しています。また@importではなく@useを使うのも特徴的です。

ruby-sassはもはや非推奨、さらに公式が推奨するdart-sassはnode-sassの抱えていた問題をカバーしています。今後Sass(SCSS)を使う際はdart-sassを使うと安定したバージョン管理につながると思われます。

完成！

これで2020/11/03時点における Next.js + TypeScript + Dart Sass 最新環境を立ち上げることができます。

最終的なプロジェクトディレクトリは以下のようになっているはずです。

.
│
├── public
│   ├── favicon.ico
│   └── vercel.svg
│
├── src
│   ├── pages
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   ├── api
│   │   └── index.tsx
│   │
│   └── styles
│       └── globals.scss
│
├── README.md
├── next-env.d.ts
├── package.json
└── tsconfig.json

ご意見お待ちしております🙇‍♂️

自己紹介

twitter icon

ぜひTwitterフォローしてください @1101hiroki_n

プログラミングや製作物、デザインなどつぶやいてます

Discussion