Next.js 15とmicroCMSを使用して構築したコーポレートサイトです。ISR（Incremental Static Regeneration）とWebhookを活用し、高速表示とリアルタイム更新を両立させました。

主な技術スタック

• • フロントエンド: Next.js 15.3.3, React 19, TypeScript
• • スタイリング: Tailwind CSS, Shadcn/ui
• • CMS: microCMS（Webhook対応）
• • デプロイ: Vercel（Edge Functions + ISR）
• • その他: Google Maps API, Google Analytics

実装した主要機能

コンテンツ管理システム

microCMSと完全統合し、管理画面からの更新が即座にサイトに反映される仕組みを構築しました。記事の投稿・編集時にWebhookが発火し、該当ページを自動で再生成します。

パフォーマンス最適化

ISRにより静的サイトの高速性を保ちながら、動的コンテンツの更新も可能にしました。本番環境では20ページ、203kBの軽量なバンドルサイズを実現しています。

SEO・アクセシビリティ対応

構造化データ（JSON-LD）の実装、適切なメタデータ設定、WCAG準拠のアクセシビリティ対応を行い、検索エンジン最適化とユーザビリティを向上させました。

Google Maps統合

最新のAdvancedMarkerElementを使用したインタラクティブな地図機能を実装し、会社所在地を分かりやすく表示しています。

技術的な特徴

モダンなアーキテクチャ

Next.js App Routerを採用し、Server ComponentsとClient Componentsを適切に使い分けることで、パフォーマンスとユーザー体験を最適化しました。

型安全性の確保

TypeScriptを完全導入し、microCMSのレスポンス型定義からコンポーネントのProps型まで、すべてを型安全に実装しました。

セキュリティ対策

CSP（Content Security Policy）の設定、適切な環境変数管理、XSS対策など、セキュリティ面も考慮した実装を行いました。

成果

• • パフォーマンス: Core Web Vitals最適化により高速表示を実現
• • SEO: 構造化データとメタデータ最適化により検索エンジン対応完了
• • 運用効率: CMS連携により非エンジニアでもコンテンツ更新が可能
• • 保守性: 明確なディレクトリ構造と型定義により、メンテナンスしやすいコードベースを構築