Nuxt3 + microCMS のベースラインテンプレートを作成してみた
Motivation
当サイトを今の形（Nuxt3 SSG構成）に切り替えたのがちょうど1年前くらい。以降いろいろと機能追加を続けていますが、それに伴い徐々にコードが複雑・冗長になってきたように感じています。このサイトの資産をもとに新しいサイトを立ち上げようとした（今年の年初、Tumblr Jamstackサイトを構築）際に、それらが足枷になり思うように行かないこともしばしあり、ストレス。。。
この際、余計なものを削ぎ落した必要最小限のベースラインテンプレートを作成したほうが（次があるかはわかりませんが）次回以降 楽になるのでは？今のコードは初期の頃に我流で書いてしまっているところも多いので、ベースラインテンプレートを作成した後、それをベースに当サイトのリファクタリング（という名のリビルド）しちゃってもよいのでは？と思いここに至りました。
あわせて折角 ベースラインテンプレートにするなら汎用性の高いものにして、公開しよう。Nuxt3 + microCMSを組み合わせたシンプルのテンプレート/実装はあまり見当たらない（Nextベースのものがほとんど）ので、ひょっとしたら需要があるのでは？なんて考えもあり。
特徴・機能の紹介
主な特徴・機能は次の通り。これらは全て当サイト（fragmentary notes）でも実績があり、当サイトを支えている基盤となっている要素となります。
- Nuxt3 SSG（Static Site Generation）構成
- UIフレームワークとしてVuetify3を採用
- microCMS Hobbyプランでも納まる3 API設計
- カスタマイズしやすさを考え最小構成としながらも、
- ページ一覧 + ページ詳細
- グルーピング用のタグ
- ページ一覧はページネーションにも対応（1ページ当たりのPost数は環境変数にて指定可能）
と必要機能を網羅（？）
- microCMS リッチエディタにて投稿された本文も美しく表示可能
- 引用ブロック / コードブロック / WEBページ埋め込み等の表現に対応
- サイト運用に備えた各種機能を搭載
- sitemap.xmlの自動生成に対応（@nuxtjs/sitemapを使用）
- 各種metaタグに対応
- Googleアナリティクスによる分析に対応（nuxt-gtagを使用）
サンプルサイトとリポジトリ
サンプルサイトとソースコードリポジトリは下記となります。具体的なテンプレートのセットアップ方法については、サンプルサイトとソースコードリポジトリ上のReadMeに記載しています。
終わりに
以上、簡単ではありますが今回作成したベースラインテンプレートのご紹介でした。
至らぬ点も多いかと思いますので、もし何か気づきがありましたらお知らせ頂けますと幸いです。
Comments