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

公開：2020/11/03
更新：2020/11/044 min読了の目安（約3600字）TECH技術記事
Next.js
React
Sass
TypeScript
#
cssmodules

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

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

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

何はともあれ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. index.js を .tsx に

src/pages/ ディレクトリ内にindex.jsがあります。

このファイルの拡張子を.tsxに書き換えます。

この際、誤って.tsにするとコンパイルエラーが発生します。気をつけましょう。（僕はこれでしばらくハマりました）

6. _app.js を .tsx に

同じく src/pages/ ディレクトリ内に_app.jsがあります。

このファイルの拡張子を.tsxに書き換えます。

7. _document.tsx を作成

% touch ./src/pages/_document.tsx

上のコマンドを実行し src/pages/ ディレクトリ内に_document.tsxを作成します。

_document.tsxには以下のコードを書き込みます。

import NextDocument, { Head, Html, Main, NextScript } from 'next/document'

interface Props {}
class Document extends NextDocument<Props> {
  render() {
    return (
      <Html lang="ja">
        <Head>
  
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default Document

_document.tsx はSSR（サーバーサイドレンダリング）時における全体の文書構造を設定するためのオプショナル（作らなくても良い）ファイルで、作らなくてもNext.jsアプリは動作するので細かい設定をしないのであれば作らなくても良いでしょう。（個人的には作った方がいいと思うけど）

8. 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

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