過去にNuxtでブログを作って書くのをやめていましたが、今回App Routerを使ってブログを作り直しました。
技術スタック
- FW
- Next.js(App Router)
- スタイリング
- Tailwind CSS
- ホスティング
- Vercel
App Routerを利用した背景
App Routerを業務で使っていたこともあり、App Routerのルーティングの仕組みやco-locationのしやすさに魅力を感じていました。
また、vercel/ogを使って手軽にOGPを生成できることはわかっていたので、App Routerを採用しました。
ディレクトリ構成
ディレクトリ構成は以下のようになっています。
├── _components
├── _utils
├── blog
│ ├── [slug]
│ ├── _component
│ ├── _const
│ ├── _posts
│ ├── page.tsx
│ ├── type.ts
│ └── utils.ts
├── globals.css
├── layout.tsx
└── page.tsx
基本的にはco-locationを意識して配置しています。
ブログの表示
ブログはmdxで記述しています。mdxでの表示に関しては本家のリファレンスを参考にしています。
mdxのメタデータの取り扱いに関しては、mdxからmetadataをexportして、その内容で一覧ページや個別ページにブログの情報を表示させています。
Dynamic Routeを使っているため、ブログの個々の情報を取得する際にはdynamic importを使用していますが、これが適しているかはちょっとわかっていないのが現状です...。
最初はあまり工数をかけたくなかったので、tailwindlabs/tailwindcss-typographyを使ってサクッとスタイリングしています。
今後に関して
プライベートな内容の記事も書いていきつつ、徐々にデザインや機能を改善できたらいいなと思ってます。