Next.js + MDX サイトテンプレート
概要
Next.jsとMDXで作るサイトのテンプレート(?)を作成しました。興味がありましたら利用してみてください。
サイト内にドキュメントページがあるので、ご利用の際は参考にしてみてください。チュートリアルも用意しています。
使用したライブラリ
- Next.js
- MUI
- Emotion
他、といったところです。
参考
Next.jsの開発環境はhanetsukiさんのStarterリポジトリをもとに作成しています。
技術面
技術的な面ではRadix UIの公式サイトの実装を参考にしました。こういったプロジェクトを公開してくれるのは非常にありがたいです。
コードブロックの実装に関しては以下の記事を参考にしました。コピー機能付き・ファイル名対応のコードブロックが簡単に実装できました。
見た目に関する部分
ドキュメントページに関しては、まんま
Redux
Recoil
でよく見るレイアウトを参考にしています。もちろん
Radix UI
のドキュメントページの要素もあります。
特徴
取り立てて優れた特徴はありません。Next.jsとMDXでサイトを構築する際の下地ができたことに個人的な意味を見出しています。このサイトは、ご覧になればわかるかと思いますが、そのまますぐに使用できるものではありません。サイト内のドキュメント等を参考にご自身で拡張・改変する必要があると思います。
ブログテンプレートに比べれば、不自然なフォルダの切り方とかは無くなったかと思います。
あとがき
これまでの内容とはまるで関係ない話ですが、最近Radix UIの実装例にTailwind CSSの実装が追加されました。
もう少し前にバニラCSSによる実装例も追加されています。これまではStitchesによる実装例のみでしたが、2つ主要なスタイリングの手段が追加されて最初の一歩を踏み出すためのハードルは前よりはるかに下がったような気がします。
今回はUIの構築にMUI(+Emotion)を採用しましたが、Radix UIでよかったかなと思っています。ライブラリが軽量でパフォーマンスが高いことはもちろんのことですが、純粋にRadix UIのほうが開発しやすいと思っています。デフォルトのスタイルがなく、コンポーネントの作りがシンプルなのでスタイリングしやすいです。
Discussion