345 words
2 minutes
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
と表示されました。
NextJSのテンプレートを理解しよう
https://fuwari.vercel.app/posts/2024/05/nextjs/