技術の深掘り・日常など幅広く紹介してます
フロントエンドアーキテクチャとして Feature-Sliced Design（FSD） と呼ばれる設計手法が注目されています。 FSD は、特にマイクロサービスを採用しているような大規模かつ複雑なシステムの開発現場において、生産性の向上が期待されており、アジャイル法や DevOps との親和性も高いとされています。FSD はシステムを構成する機能や特性（Feature）を スライス（Slice） と呼ばれる単位で細分化し、それぞれが独立性を持つことで全体の設計や変更を容易にするというものです。 スライスの考え方により、複雑な機能を把握しやすくなり、サービス規模拡大に伴うスケーラビリティを担保することが期待されています。FSD は、言語問わずあらゆるフロントエンドアプリケーションに適用できますが、今回は特に Web フロントの設計に焦点を当てて紹介したいと思います。
3 年ぶりに Orenge Diary をフルスクラッチリニューアルしました。これまで、jQuery と PHP をベースに Nginx on KVM（Ubuntu）でセルフホスティングしていましたが、モダンな Web フロントアーキテクチャを目指して Next.js へリビルドし、Vercel に移設しました。今回のブログではポートフォリオサイトのリビルドについて軽く紹介したいと思います。
Next.js は、React ベースの Web アプリケーションフレームワークで、SSR（Server Side Rendering）等のフロントエンド開発に必要な機能を十分に備えています。 2022 年 10 月には、App Directory（App Router）というルーティングエンジンを beta 版として導入した Next.js 13 がリリースされました。今回のブログでは、Next.js 13 の基本的な考え方と使い方について整理してみたいと思います。