構成

カテゴリ	採用
バックエンド＆フロントエンド	Next .js14(App Router), React
ブログ記事	microCMS
デプロイ	AWS Amplify
レイアウト	NextUI>TailwindCSS>Sass

Next.js14(App Router)

WordPressのブログサイトを作り直すにあたって学習の意味を含めてモダンjsで作成したかったというのが理由です。

今回はAstro.jsと言う手もありますが、ブログの更新頻度を上げるという戒めを込めてSSR+SSGに対応できるNext.jsを採用しました。

App Routerは単純にNext13以降の新しい書き方ということで採用しています。

実際にApp Roterで書いてみて基本何も書かない場合サーバー側で処理、フロントで処理した方が良い,フロント側で処理する内容だけを渡すやり方は合理的だと感じました。

microCMS

単純なブログであれば無料で提供してくれる範囲でなんとかなるかと思い採用しました。

APIをテスト用と本番用でそれぞれ作りました。

AWS Amplify

実務で使うのがAWS Amplifyなので触っておこうと思い、採用しました。

無料ではないですが低コストでビルドが可能です。

Next.jsならおそらくVercelの方が連携しやすいかもしれません。

レイアウト

なるべく楽をしようと思い、テンプレートについて検討しました。

MUIとNextUIで考えた際、NextUIは名前の通りNext.js用に最適化されているとのことで採用しました。

(どうしてもサーバー側で完結しないものはMUI同様、use clientを記載しているコンポーネントもありますが…)

またNextUIはTailwindCSSを使用しているのでカスタマイズはTailwindCSS、それでも調整難しいものはSassで調整しています。

https://nextui.org/docs/guide/introduction

NextUI は React 用の UI ライブラリで、TailwindCSS のパワーと React Aria を組み合わせて、アクセス可能でカスタマイズ可能なユーザーインターフェイスを構築するための完全なコンポーネント (ロジックとスタイル) を提供します。
NextUI はスタイルエンジンとして TailwindCSS を使用するため、NextUI コンポーネント内ですべての TailwindCSS クラスを使用でき、最適なコンパイル済み CSS サイズが確保されます。

NextUI は React 用の UI ライブラリで、TailwindCSS のパワーと React Aria を組み合わせて、アクセス可能でカスタマイズ可能なユーザー インターフェイスを構築するための完全なコンポーネント (ロジックとスタイル) を提供します。
NextUI はスタイル エンジンとして TailwindCSS を使用するため、NextUI コンポーネント内ですべての TailwindCSS クラスを使用でき、最適なコンパイル済み CSS サイズが確保されます。

タグ絞り込み

teku-note制作について