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

NextJS#

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

.
├── src/
│   └── app/
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
├── .gitignore
├── biome.json
├── bun.lockb
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── tailwind.config.ts
└── tsconfig.json

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

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

SASS/SCSS#

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

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

bun add -D sass

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

const path = require('path')
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

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

import path from 'path';
import { fileURLToPath } from 'url';

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

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

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

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