絶対につまづかないNext.jsのはじめかた【TypeScript + Dart Sass】
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
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 を作成
./src/pages/ディレクトリ内に_document.tsxを作成しましょう。
macの方は以下のコマンドでファイルを作成出来ます。
% 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
ご意見お待ちしております🙇♂️
自己紹介
ぜひTwitterフォローしてください @1101hiroki_n
プログラミングや製作物、デザインなどつぶやいてます
Discussion