こんにちは、すしです。紆余曲折あって最近はWebフロントエンドを学習しているおり、その 一環としてこのサイトを作ったりしたので構成とかその他色々書き留めます。
構成
- React(Next.js) with TypeScript
- v13.4からstableになった App Routerを採用しました
- TypeScript
- SCSS
- TailwindCSS(Markdownのみに適用)
- next-mdx-remote
App Routerの採用
Next.jsのApp Routerは、v13.4からstableになったんですが、
pagesでは難しかった機能ベースでのコード管理が楽でいいと思います。
ClientとServerどちらで処理されるのかを明確にして考えながら書けるので、
無理のある実装も自然に減るように感じています。
ブログをmdxで構築した
ブログ部分にはmdxを採用しました。mdxは、Markdownの中にjsxやReact Componentが書けるもので、
自分で定義したものを簡単に使えてとても楽です。
加えてnext-mdx-remoteというライブラリが既にReact Server Componentに対応しているので、
導入も極めて楽です。
個人的なお気に入りポイントとしてはmdx内のみでTailwindCSSが使えるようにしたところです。 mdx内のjsxにも簡単にスタイルを当てられるので、すべてをmdx内で完結させることができます。