NextJSのテンプレートを理解しよう

NextJS

普段Bunを使っているのでチュートリアルに従ってNextJSのプロジェクトを作成してみます。

1
.
2
├── src/
3
│   └── app/
4
│       ├── favicon.ico
5
│       ├── globals.css
6
│       ├── layout.tsx
7
│       └── page.tsx
8
├── .gitignore
9
├── biome.json
10
├── bun.lockb
11
├── next.config.mjs
12
├── package.json
13
├── postcss.config.mjs
14
├── tailwind.config.ts
15
└── tsconfig.json

すると上のようなファイルが生成されました。

この状態でbun run devを実行するとnext devが実行されてサーバーが立ち上がります。

SASS/SCSS

基本的にはtailwind cssを利用することが多いと思うのですが、どうしても独自のフォントを利用したい場合はSASSをコンパイルできるようにする必要があります。

公式ドキュメントに書いてあるのでそれを見てみます。

1
bun add -D sass

あとはこの設定を反映させるようにnext.config.mjsを修正します。

1
const path = require('path')
2

3
module.exports = {
4
  sassOptions: {
5
    includePaths: [path.join(__dirname, 'styles')],
6
  },
7
}

公式ドキュメントにはこのように書いているのですが、ES Moduleではこの記法は利用できないので、

1
import path from 'path';
2
import { fileURLToPath } from 'url';
3

4
const __filename = fileURLToPath(import.meta.url);
5
const __dirname = path.dirname(__filename);
6

7
module.exports = {
8
  sassOptions: {
9
    includePaths: [path.join(__dirname, 'styles')],
10
  },
11
}

として__dirnameを参照できるようにしましょう。

で、実際にこのパスがどこを参照しているかチェックしてみると/home/bun/app/stylesと表示されました。