optim-riku-kataoka https://blog.hatena.ne.jp/optim-riku-kataoka/ OPTiM TECH BLOG https://tech-blog.optim.co.jp/ TypeScript Next.js 本記事では、Next.js App Routerを採用したプロジェクトにおけるフロントエンドでのRBAC（ロールベースアクセス制御）実装について解説しています。 RBACを選択した理由、フロントエンド権限管理の課題（Props地獄、API多重呼び出し、UX劣化など）、そしてそれらを解決するための設計パターンを紹介。 具体的には、Guardコンポーネントによる責務分離、React.cacheとrevalidateTagを活用したキャッシュ戦略、Layout・Page・Guardによる明確な責務分離、さらにVisibilityBoundaryや将来的なActivity APIの活用可能性についても言及。 最後に、ディレクトリ構成やテスト戦略（テーブル駆動テスト）を示し、保守性・テスト性を高める設計の重要性を強調しています。 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech-blog.optim.co.jp%2Fentry%2F2026%2F01%2F28%2F100000" title="Next.jsでのロールベースアクセス制御の苦難 - コンポーネント設計を崩さずに実装する権限管理 - OPTiM TECH BLOG" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> Hatena Blog https://hatena.blog 2026-01-28 10:00:00 rich https://tech-blog.optim.co.jp/entry/2026/01/28/100000 1.0 100%