単一Next.jsで全サービスLPと記事を統合する基盤

技術要件と目的

自社の受託開発サービスと自社プロダクトを、ひとつのLP基盤で統合管理したいという要件から始まった。業界特化LP、プロダクトLP、導入事例、開発事例、SEO記事、会社概要、お問い合わせのすべてを単一のNext.jsアプリで運用し、データ側は別リポジトリ（antre-plan）で生成・管理する。ビューとデータを明確に切り離し、「yoritech-site はデータを読むだけ」の設計を目指した。

技術スタックの選定

フロントエンドはNext.js 15のApp RouterとServer Components、React 19、TypeScript、Tailwind CSS 3。OGPはnext/ogのImageResponseで動的生成し、Tailwindテーマをpre-registerしてサービス毎のカラーで描き分けている。問い合わせ受信だけはサーバー機能が必要なので、Supabase（Postgres）とSendGridを採用。インフラはVercelのauto deployとCloudflare DNS、GitHub ActionsによるLighthouse CIで閾値を監視する構成にした。

初期設計と見直し

最初はサービスごとにLPリポジトリとVercelプロジェクトを分ける分散型を検討した。しかしHero/Pricing/FAQの同型コンポーネントを増やすたびにコピペが発生し、テーマの一括変更、OGPの個別実装、導入事例の二重管理が重荷になると判断。単一アプリに統合し、/[slug]で動的ルーティングする方針に切り替えた。データ構造も antre-plan に集約し、yoritech-site は「読むだけ」のビューに専念させている。

最終アーキテクチャ

antre-planはプライベートリポジトリのためgit submoduleとして取り込み、Vercelビルド時にPAT経由でcloneする。/[slug]は site-data.json をSSGで40件超のサービスLPとして事前生成、/blog/[slug] は plans/{id}/article/ を走査、/works/[slug] は 05-execution/{id}/case-studies/ と dev-cases/ を走査してルーティングする。Hero, Problem, Solution, Screenshots, Differentiation, Pricing, FAQ, DevCase, CaseStudy, Article, Contact の11セクションは、service オブジェクトの optional フィールドの有無で条件レンダされる。OGPはnext/ogで gradient と accent をテーマ別に合成し、1200×630 PNGを配信する。

開発成果

基盤リファクタは約3週間。1リポジトリで40件超のサービスLPを管理し、プロダクトLP（family-screen）では Lighthouse Performance 99 / Accessibility 97 / Best Practices 100 / SEO 100 を達成した。SEO記事10本を /blog/[slug] で公開し sitemap.xml に自動追加、運用コストはVercel Hobby枠に収まり月額¥0。問い合わせは npm run export:inquiries で antre-plan 側の inquiries.json と同期し、プラットフォーム経由の連絡と合わせて一元管理できる。この基盤自体が「Next.jsでLP・事例・SEO記事・お問い合わせを単一アプリに統合する」構成の実証例であり、同じ構成をベースにクライアント様への納品も可能になった。