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と表示されました。