Umbraco から Next.js ヘッドレス CMS への移行

Umbraco のモノリシックアーキテクチャから脱却する理由

Umbraco は長年 .NET エコシステムに貢献してきました。しかし、自己ホスト型インスタンスを実行しているか、Umbraco Heartcore に料金を支払っている場合、時間とともに悪化する問題に対処している可能性があります:

• サーバーサイド .NET レンダリングのボトルネックがモバイルの Lighthouse スコアを低下させる
• Windows Server または Azure App Service のホスティング コストがトラフィックスケールに伴って増加する
• 結合されたフロントエンド テンプレート(Razor ビュー)により、すべての変更が .NET 開発者を経由する必要がある
• 遅いビルドと展開サイクルは IIS 再起動と .NET コンパイルに結合されている
• Core Web Vitals の失敗 — LCP が 2.5 秒以上、動的ページ生成からの低い TTFB

Umbraco は壊れていません。モダン Web パフォーマンスが超越したパラダイムにアーキテクチャ的に固執しているだけです。コンテンツ編集者は素晴らしいバックオフィス体験に値します。ユーザーは 1 秒未満のページロードに値します。両方を実現できます。

Next.js ヘッドレス スタックが実際に提供するもの

Next.js への移行とヘッドレス CMS バックエンドは横長な移行ではなく、本物のアーキテクチャ的飛躍です。実際に何が変わるかは以下の通りです:

エッジファースト配信

Next.js と増分静的再生成(ISR)はビルド時にページを事前レンダリングし、グローバルなエッジノードから提供します。TTFB は 1.2～2.5 秒から 300 ミリ秒未満に低下します。これはベンチマーク ファンタジーではなく、出荷するすべての移行で測定されるものです。

デカップルされたフロントエンド自由度

フロントエンド チームが React と TypeScript を書きます。Razor 構文はもう不要です。C# モデルがプレゼンテーション ロジックに漏れることはなくなります。ShadCN UI、Radix などのコンポーネント ライブラリ、または独自のデザイン システムがクリーンにスロットインします。コンポーネント開発用の Storybook。スタイリング用の Tailwind。モダン ツーリング、モダン ベロシティ。

ホスティング コストの崩壊

自己ホスト型 Umbraco インスタンスは通常、Azure または専用 Windows サーバーで月 $200～500 で実行されます。Vercel または Cloudflare Pages 上の同じサイトは月 $20～100 でコスト — 場合によってはそれより少なくかかります。CDN 上の静的アセットはアプリケーション サーバーを必要としません。計算ではなく帯域幅に対してのみ支払います。

実際に合格する Core Web Vitals

Google のページ エクスペリエンス シグナルはもはやオプションではありません。ISR と SSG はレンダリングをブロックするサーバー処理を排除します。Next.js Image コンポーネントは遅延読み込み、フォーマット交渉、およびレスポンシブ サイジングを自動的に処理します。移行後、Lighthouse モバイルで定期的に 95～100 に到達します。

Heartcore と自己ホスト型: 異なる開始点、同じ目的地

両方の移行パスを処理します。

Umbraco Heartcore から

Heartcore はすでに Content Delivery API を公開しているため、バックエンド リフトは最小限です。既存のコンテンツ タイプをマップし、API アクセスを構成し、Heartcore の REST エンドポイントに対して Next.js フロントエンドを構築します。編集者は既に知っている Umbraco バックオフィスを保持します。フロントエンドは単に劇的に高速になります。

ここでの主な利点はコストです: 価格が機能する場合は Heartcore をコンテンツ バックエンドとして保持できます。または、Sanity、Contentful、または Strapi などのコスト効率的なヘッドレス CMS にコンテンツを移行します。

自己ホスト型 Umbraco から

自己ホスト型の移行はより複雑です。Umbraco インスタンス(Umbraco 12 以降で利用可能)で Delivery API を有効にし、リアルタイム コンテンツ更新用の Webhook 駆動 ISR を構成し、Next.js フロントエンドをゼロから構築します。

Webhook フロー は次のようなしくみです:

1. 編集者が Umbraco バックオフィスでコンテンツを公開します
2. Umbraco がコンテンツ パスと HMAC シグネチャを含む POST を Next.js Webhook エンドポイントに送信します
3. Next.js がシグネチャを検証し、revalidatePath()を呼び出して ISR キャッシュをパージします
4. 次の訪問者は新しく生成されたページを取得します — 他のすべてのユーザーはキャッシュされたバージョンを取得します

これにより、編集者はサイト全体を再構築することなく、ほぼ瞬時のパブリッシュ-ライブ サイクルを実現します。

完全な .NET エスケープ オプション

Umbraco バックエンドを完全に廃止したい場合、コンテンツを最新のヘッドレス CMS — 構造化コンテンツの柔軟性に対応した Sanity、エンタープライズ ワークフロー用の Contentful、または自己ホスト型オープン ソース用の Payload CMS に移行します。.NET サーバーは完全にオフラインになります。

当社の移行プロセス

繰り返し可能でリスクの低いプロセスにこれを洗練させました:

フェーズ 1: 監査とアーキテクチャ(第 1 週)

現在の Umbraco サイトで Lighthouse 監査を実行し、すべてのコンテンツ タイプと関係をマップし、SEO 保存用の URL 構造をカタログ化し、統合ポイント(フォーム、検索、e コマース、認証)を特定します。

成果物: コンテンツ モデル マッピング、技術スタックの推奨事項、およびリスク評価を含む移行アーキテクチャ ドキュメント。

フェーズ 2: 概念実証(第 2～3 週)

作業用 POC — 通常、ホームページと 1 つのコンテンツ集約的なテンプレート — を既存の Umbraco API またはターゲット ヘッドレス CMS に接続します。これはアーキテクチャを検証し、パフォーマンス向上を証明し、利害関係者が評価する実物を提供します。

フェーズ 3: 完全構築(第 4～8 週)

Next.js でのコンポーネント ライブラリ構築。すべてのページ テンプレート。コンテンツ移行スクリプティング(手動ではなく自動)。フォーム統合。検索実装。編集者向けのプレビュー モード。分析の再接続。

フェーズ 4: SEO 保存とローンチ(第 9～10 週)

ここは移行が成功するか失敗するかです。実装します:

• 1:1 URL マッピング — 変更されたパスの 301 リダイレクト付き
• XML サイトマップ生成 Next.js 経由
• 構造化データ(JSON-LD)すべてのページ タイプ用
• 正規タグとメタ タグのパリティ
• Google Search Console 監視 ローンチ前後
• Screaming Frog でのクロール テスト — 本番環境に到達する前に破損したリンクをキャッチ

クロール パリティが確認されるまで起動しません。ゼロ インデックス損失は目標ではなく、標準です。

SEO 保存戦略

SEO は CMS 移行で最もリスクが高い部分です。このリスクを排除する方法は以下の通りです:

現在の Umbraco サイト上のすべての URL をカタログ化します。パス変更、末尾のスラッシュ、大文字小文字の違い、およびクエリ パラメータのバリエーションを処理するリダイレクト マップを構築します。移行中にコンテンツ内の内部リンクが更新されます。

起動前にトップ 50 ページでランク追跡を設定します。起動後、30 日間毎日監視します。何かが低下した場合、24 時間以内に診断して修正します。

Next.js からのパフォーマンス向上は通常 4～6 週間以内に 肯定的な SEO 影響を生み出します — Core Web Vitals スコアの向上は単に維持されたものではなく、より良いランキングにつながります。

タイムラインと投資

典型的な Umbraco から Next.js への移行は、サイトの複雑さに応じて 8～12 週間実行されます:

• 小規模サイト(50 ページ未満、シンプルなコンテンツ モデル): 6～8 週間、$15,000～$25,000
• 中規模サイト(50～500 ページ、複数のコンテンツ タイプ、統合): 8～12 週間、$25,000～$50,000
• エンタープライズ サイト(500 ページ以上、パーソナライゼーション、多言語、複雑なワークフロー): 12～16 週間、$50,000～$100,000 以上

これらには、コンテンツ移行、フロントエンド構築、SEO 保存、および 30 日間のローンチ後サポートが含まれます。ホスティング コストの削減は通常、最初の 1 年以内に移行投資の 30～50% をオフセットします。

誰がこれを処理するか

この移行サービスは Social Animal の Aryan Shah が主導しています。WordPress、Drupal、Sitecore、および Umbraco から脱出するチームのためにヘッドレス アーキテクチャを構築しました。.NET からモダン スタックへの移行は、私たちがよく知っている移行です。

Windows サーバーへの支払い、.NET ビルドの待機、Core Web Vitals の失敗を見るのに疲れた場合 — サイトの具体的な詳細について話しましょう。