過去数年間、数十の WordPress エージェンシーが最新の JavaScript フレームワークへのピボットを試みるのを見てきました。ほとんどが失敗しています。あまりにも急速に全面移行して既存の顧客ベースを失うか、ほんの少し試してみて１つの悪い Next.js プロジェクトを構築した後、知っている分野に戻ってしまうのです。実際にこれを成功させるエージェンシーは、技術実験ではなく、ビジネス変革として対応しています。

この記事では、私が実践で見た 12 ヶ月間の移行計画を説明します。理論ではなく、年間 50 万ドルから 500 万ドルの請求をしているエージェンシーの実践です。目標は WordPress を放棄することではありません。高マージンの Next.js サービスラインを追加し、最終的にそれを主な収益源にしながら、このプロセス全体で既存のクライアントを満足させ続けることです。

目次

WordPress Agency to Next.js: A 12-Month Transition Revenue Plan

なぜ WordPress エージェンシーが今進化する必要があるのか

まず数字を率直に見てみましょう。WordPress はまだ 2025 年の時点でウェブ全体の約 43% を支えています。これは膨大なインストール基盤です。しかし、マーケットシェアの統計が教えてくれないことがあります：WordPress エージェンシーが呼ばれる作業の種類が変わっているのです。

エンタープライズおよび中堅企業のクライアントは、ヘッドレスアーキテクチャ、静的サイト生成、および React ベースのフロントエンドをますます要求しています。2025 年の State of JS 調査によると、Next.js は React 開発者の 68% 以上の採用で、最も使用されている React メタフレームワークとしての地位を保っています。Vercel は、2025 年初頭に Next.js のダウンロードが npm で週間 700 万を超えたと報告しました。

6 桁および 7 桁の契約を獲得しているエージェンシーは、単に WordPress テーマを構築しているだけではありません。彼らはヘッドレスフロントエンドを構築しており、WordPress（または他のヘッドレス CMS プラットフォーム）からコンテンツを引っ張り、Next.js を通じてレンダリングしています。これらのビルドの平均プロジェクト価値は、従来の WordPress プロジェクトの 2～4 倍です。

あなたのエージェンシーがこの機能を開発しなければ、明日死ぬわけではありません。しかし、それができるエージェンシーに入札を失うでしょう。そしてその差は四半期ごとに広がるでしょう。

収益数学：WordPress vs Next.js プロジェクト

移行に 1 セント投資する前に、財政上の根拠を理解する必要があります。以下は、実際のエージェンシープロジェクトデータ全体で見た内容です：

指標 従来の WordPress ヘッドレス Next.js 差
平均プロジェクト価値 $15,000 - $50,000 $40,000 - $150,000 +167% ～ +200%
平均時間給 $100 - $150/時間 $150 - $250/時間 +50% ～ +67%
プロジェクト期間 4-8 週間 8-16 週間 より長いがマージン高い
月次リテーナー価値 $500 - $2,000 $2,000 - $8,000 +300%
クライアント生涯価値（3 年） $30,000 - $80,000 $80,000 - $300,000 +167% ～ +275%
総粗利益 40-55% 55-70% +15 ポイント

これらのリテーナー数は実数です。Next.js プロジェクトは、継続的なパフォーマンス監視、フレームワークアップデート、デプロイメントパイプライン管理、機能反復が必要です。クライアントは継続的な開発を期待し、予算化しています。これを WordPress クライアントと比較してください。月額 $800 で照明を付けたままにしておくことを期待しています。

数学は説得力があります。しかし計画がなければそれを実現することはできません。

フェーズ 1：基礎（月 1～3）

月 1：内部評価とコミットメント

まず、現在のチームを監査します。どこに立っているかを知る必要があります：

  • jQuery を超えた JavaScript 経験を持つ開発者は何人ですか? ここは正直に答えてください。「React を少し使ったことがある」はカウントされません。
  • 現在のプロジェクトパイプラインは何ですか? 新しい機能を構築している間、WordPress の収益ランウェイが 3～6 ヶ月必要です。
  • 誰があなたのチーム内で本当にこれに興奮していますか? 熱意は現在のスキルレベルより重要です。

すべての人を一度に訓練しようとしないでください。Next.js のパイオニアになる 1～2 人の開発者を選びます。彼らはあなたの最強の問題解決者であるべきで、必ずしもあなたの最も経験豊富な WordPress 開発者ではありません。

月 2：学習インフラ

構造化された学習パスを設定します。実際に機能するものは以下の通りです：

# 週 1-2：React の基礎（必要に応じて）
# 週 3-4：Next.js App Router、Server Components
# 週 5-6：データ取得パターン、API ルート
# 週 7-8：内部プロジェクトを構築（自社エージェンシーサイト）

適切な学習リソースに投資します。Next.js のドキュメンテーションは優れていますが、Frontend Masters や Egghead などのプラットフォームからの有料コースで補足します。教育教材とサブスクリプションに $2,000～5,000 を予算化します。

ここが重要な部分です：あなたの開発者は Next.js であなた自身のエージェンシーウェブサイトを再構築する必要があります。 これにより、彼らは実際なプロジェクトで実際な資金を得られ、見込み客に機能を実証するポートフォリオピースになります。

月 3：ツール化とプロセス

開発インフラを設定します：

// next.config.js - 堅固な開始設定
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.your-cms-domain.com',
      },
    ],
  },
  experimental: {
    // Next.js 15+ を使用している場合、PPR を有効にする
    ppr: true,
  },
}

module.exports = nextConfig

デプロイメントパイプラインを確立します（Vercel は Next.js にとって明らかな選択ですが、Netlify、AWS Amplify、または Docker を使用してセルフホストすることもできます）。CMS 戦略を選択します - 後でこれについて詳しく説明します。

コンポーネントライブラリまたはデザインシステムを選択します。WordPress から来ている場合、おそらくページビルダーの使用に慣れています。Next.js の同等物は合成可能なコンポーネントシステムです。Shadcn/ui は 2025 年の強力な出発点です。

月 3 の収益への影響： ゼロの新規収益。あなたは訓練時間とツール化に $10,000～25,000 を投資しています。これが難しい部分です。

WordPress Agency to Next.js: A 12-Month Transition Revenue Plan - architecture

フェーズ 2：初の収益（月 4～6）

月 4：ブリッジオファー

まだ冷たいリードに純粋な Next.js プロジェクトを売ろうとしないでください。代わりに、既存の WordPress クライアントに戻ってこのピッチを行います：

「フロントエンドを劇的に改善されたパフォーマンス、SEO、ユーザー体験のために再構築できます - あなたがすでに知っている WordPress 管理者を保つ一方で。」

これはヘッドレス CMS アプローチであり、ブリッジ戦略です。既存のクライアントはあなたを信頼しています。彼らはすでに WordPress コンテンツを持っています。あなたは交換を提供しているのではなく、アップグレードを提供しています。

これらのブリッジプロジェクトを新規クライアントに請求する価格の 60～70% で価格設定します。あなたはケーススタディを構築し、レップを取得しています。既存クライアントのヘッドレス WordPress + Next.js リビルドの典型的な価格は $25,000～60,000 である必要があります。

月 5：最初のクライアントプロジェクト

最初の有料 Next.js プロジェクトを発送します。いくつかのルール：

  • それを過剰に配置します。 1 人が技術的に対応できたとしても、2 人の訓練された開発者をそれに一緒に配置します。
  • タイムラインを 30% パディングします。 初めてはすべてが予想より長くかかります。
  • すべてを文書化します。 このプロジェクトからのプロセスドキュメントがあなたのチームのプレイブックになります。
// 例：WordPress コンテンツをヘッドレスで取得
async function getPosts(): Promise<Post[]> {
  const res = await fetch(
    `${process.env.WORDPRESS_API_URL}/wp-json/wp/v2/posts?_embed`,
    { next: { revalidate: 60 } }
  )
  
  if (!res.ok) {
    throw new Error('Failed to fetch posts')
  }
  
  return res.json()
}

// ページコンポーネント内（App Router）
export default async function BlogPage() {
  const posts = await getPosts()
  
  return (
    <div className="grid gap-8">
      {posts.map((post) => (
        <ArticleCard key={post.id} post={post} />
      ))}
    </div>
  )
}

月 6：測定と反復

最初のプロジェクトを発送した後、ハードデータを収集します：

  • Core Web Vitals 比較： 以前（WordPress）vs 以降（Next.js）。LCP の改善が 40～60% で、CLS がほぼゼロになるはずです。
  • クライアント満足度： 推薦文を取得します。ケーススタディを取得します。これが武器です。
  • 内部効率： 実際にはいくつかの時間がかかりましたか対見積？

月 6 の収益目標： 最初のヘッドレスプロジェクトから $25,000～60,000、継続的な WordPress 収益を加えます。

フェーズ 3：スケーリング（月 7～9）

月 7：チームを拡大

次のようにして、開発者の次の波を訓練します。2 人の経験豊富な開発者がメンターシップできます。学習曲線は、内部ドキュメンテーションを構築し、実際のプロジェクトでペアプログラミングできるため、今回はより速くなります。

外から 1 人の中程度のレベルの React/Next.js 開発者の採用を検討します。彼らはあなたの WordPress 開発者がまだ持っていないパターンと経験をもたらします。2025 年の米国市場（リモート）では、扎実な中程度のレベルの Next.js 開発者に $85,000～120,000/年を予算化します。

月 8：オファーを製品化

明確な価格設定層を持つパッケージ化された Next.js 開発サービスを作成します：

パッケージ 範囲 価格帯 タイムライン
マーケティングサイト 5～15 ページ、CMS 統合、フォーム $20,000 - $45,000 4-6 週間
e コマース 製品カタログ、チェックアウト、アカウント $50,000 - $120,000 8-14 週間
ウェブアプリケーション カスタム機能、認証、ダッシュボード $75,000 - $200,000+ 12-20 週間
ヘッドレス移行 既存 WordPress を Next.js フロントエンドに $30,000 - $80,000 6-10 週間

パッケージオファーを持つことで、営業会話がより簡単になります。見込み客は、電話でさえあなたに連絡する前に層に自己選択できます。

月 9：新機能のマーケティング

Next.js 作業の周りにコンテンツとケーススタディを作成開始します。実現したパフォーマンス向上について書きます。前後のメトリクスを共有します。地元のミートアップで話すか、Dev Twitter/Bluesky で投稿します。

あなたのポジショニングは次のようにする必要があります：「我々は WordPress を深く理解しており、AND 最新の React フロントエンドを構築しています。その組み合わせは稀です。」 これは本当に価値のあるポジショニングです。純粋な React エージェンシーのほとんどは、あなたが行う方法でコンテンツ管理を理解していないためです。

月 9 の収益目標： パイプライン内に 2～3 件の Next.js プロジェクト。$60,000～150,000 の新規収益を表しています。

フェーズ 4：成熟度（月 10～12）

月 10：CMS オプションの多様化

今までに、ヘッドレス WordPress があなたの唯一の CMS オプションであってはなりません。以下の評価と構築能力を開始します：

  • Sanity - 優れた開発者体験、リアルタイムコラボレーション
  • Contentful - 強いエンタープライズの遊び、大規模なコンテンツチームに適している
  • Payload CMS - オープンソース、セルフホスト、カスタムアプリケーションに最適
  • Storyblok - 非技術的なクライアントが愛する視覚的編集

あなたが追加する各 CMS はあなたのツールキットに異なる市場セグメントを開きます。一部のクライアントは WordPress を完全に終了したいと考えています。それを許してください。

また、Astro 開発への拡張を検討してください。これはコンテンツが豊富なサイトで、Next.js が過剰である可能性があります。複数の最新フレームワークオプションを持つことで、あなたはより信頼できるパートナーになります。

月 11：リテーナー収益マシン

ここでビジネスモデルが本当に歌います。あなたが発送した各 Next.js プロジェクトは月次リテーナーに変換する必要があります。このように構築します：

  • 必須（$2,000/月）： ホスティング管理、セキュリティアップデート、アップタイム監視、4 時間の開発サポート
  • 成長（$4,000/月）： Essential のすべてと + パフォーマンス最適化、A/B テストサポート、10 時間の機能開発
  • スケール（$8,000/月）： Growth のすべてと + 専任開発者時間、スプリント計画、25+ 時間の開発

月 11 までに 5～8 個の Next.js プロジェクトを発送した場合、月額新規経常収益が $15,000～40,000 になる可能性があります。これは $180,000～480,000 の年換算です。これが全体的な移行を有益にする複合効果です。

月 12：評価と 2 年目の計画

12 ヶ月の時点で、あなたはこれに答えることができるはずです：

  • 新規収益のどの割合が Next.js サービスから来ていますか?
  • Next.js プロジェクトでのクローズ率は WordPress より高いですか?
  • Next.js vs WordPress 作業でのチームの利用率はいくつですか?
  • より大きなクライアントを引き付けていますか?

成功した移行は通常、月 12 までに新規収益の 30～50% が Next.js サービスから来ていることを示し、月 24 までに 60～70% へ向けた明確な軌跡があります。

スタッフと教育の経済学

人事に関する実際の数字について話しましょう：

コストカテゴリ 月 1-3 月 4-6 月 7-9 月 10-12 合計
教材 $3,000 $1,000 $2,000 $1,000 $7,000
失われた請求時間（訓練） $15,000 $5,000 $10,000 $3,000 $33,000
新規採用（該当する場合） $0 $0 $25,000 $25,000 $50,000
ツール化/サブスクリプション $2,000 $2,000 $3,000 $3,000 $10,000
総投資 $20,000 $8,000 $40,000 $32,000 $100,000

その $100K の投資は、同じ 12 ヶ月間に $200,000～500,000 の新規 Next.js 収益を生成し、さらに 2 年目の大幅に高い収益を設定する必要があります。ROI はそこにあります。ただし、実際に実行する場合のみです。

Next.js サービスの価格設定

Next.js の作業を WordPress の作業と同じ価格で価格設定する間違いを犯さないでください。あなたはより多くの価値を提供しています。サイトはより速く、より安全で、より拡張可能であり、開発者体験により高速反復が可能になります。

以下は、機能する価格フレームワークです：

  • 発見/戦略： $5,000～15,000（常にこれを別に請求）
  • 設計： $10,000～30,000（ページモックアップではなく、コンポーネントベースのデザインシステム）
  • 開発： $150～250/時間 または範囲に基づく定額
  • デプロイ/ローンチ： プロジェクトに含まれますが、リテーナー関係を確立します
  • 継続的なリテーナー： 初期プロジェクト価値の月額 10～20%

これらの契約を構造化する方法についての深い会話については、価格ページをチェックするか、直接ご連絡ください - 私たちはこれらの正確なモデルを実行することから学んだことを共有してうれしいです。

ヘッドレス WordPress ブリッジ戦略

これに戻り続けるのは、Next.js スペースに入る WordPress エージェンシーの単一で最も重要な戦術的な動きであるためです。ヘッドレス WordPress は、WordPress エージェンシーとしてのあなたの競争上の優位性です。

理由は次のとおりです：純粋な JavaScript エージェンシーはしばしばゼロの WordPress 経験を持っています。彼らはすべてのクライアントに Sanity または Contentful を推奨します。しかし、多くの中堅企業は、WordPress に年間のコンテンツ、WordPress で訓練されたスタッフ、WordPress を中心に構築されたワークフローを持っています。

あなたはそれらの会話に入って言うことができます：「WordPress を保つ。我々はちょうどフロントエンドを驚異的にする。」

技術アーキテクチャは以下のようになります：

┌─────────────────────┐     ┌──────────────────────┐
│   WordPress CMS     │────▶│   Next.js Frontend   │
│  (content editing)  │ API │  (what users see)    │
│  wp-admin stays     │     │  Vercel / Netlify    │
│  same as always     │     │  SSR + ISR + SSG     │
└─────────────────────┘     └──────────────────────┘
         │                            │
    WPGraphQL or              React Server
    REST API                  Components

API レイヤーに WPGraphQL を使用します。それは成熟し、よくメンテナンスされており、フロントエンド消費のための開発者体験は WordPress REST API よりはるかに優れています。

# Next.js のための WPGraphQL クエリの例
query GetHomePage {
  page(id: "home", idType: URI) {
    title
    content
    seo {
      title
      metaDesc
      opengraphImage {
        sourceUrl
      }
    }
    homeFields {
      heroHeading
      heroSubtext
      featuredProjects {
        ... on Project {
          title
          excerpt
          featuredImage {
            node {
              sourceUrl
              altText
            }
          }
        }
      }
    }
  }
}

移行を殺す一般的な間違い

1. WordPress を冷たく辞める。 Next.js の収益があなたを置き換えることができる前に WordPress プロジェクトの撮影をやめないでください。少なくとも 12～18 ヶ月間の両方のサービスラインを並行して実行します。

2. 早期プロジェクトを獲得するために価格を過度に割引。 最初の Next.js プロジェクトは既存クライアントに対して割引される必要があります、はい。しかし、2 番目と 3 番目のプロジェクトは市場価格で価格設定される必要があります。安いプロジェクトは安いクライアントを引き付けます。

3. DevOps への投資を無視。 WordPress エージェンシーはしばしば強いデプロイメントと CI/CD 慣行を持っていません。Next.js プロジェクトはそれを要求します。Vercel、GitHub Actions、環境管理の学習に時間を予算化します。

4. コンテンツ編集体験を無視。 あなたの WordPress クライアントは、視覚的編集体験に慣れています。生の Sanity Studio またはプレビューを持つコード ベースのコンテンツモデルを提供する場合、彼らはそれを嫌うでしょう。プレビューモード、視覚的編集、およびコンテンツチーム訓練に投資します。

5. 採用であなたの方法を抜け出そうとする。 3 人の React 開発者を採用し、彼らがあなたのエージェンシーのプロセス内で機能することを望むことは機能しません。既存のチームの機能を有機的に成長させ、対象とされた採用によって補う必要があります。

6. 正しいメトリクスを追跡しない。 サービスラインごとの新規収益、提案の勝率、平均プロジェクト価値、およびリテーナー変換率を追跡します。測定していなければ、管理できません。

FAQ

WordPress 開発者が Next.js で生産的になるのにどのくらい時間がかかりますか？

私の経験では、強い WordPress 開発者で JavaScript の知識が多少ある場合、焦点を当てた学習に 8～12 週間で実際の Next.js プロジェクトで生産的になります。「生産的」とは、ページを構築でき、データ取得を処理でき、独立してデプロイメントパイプラインで作業できることを意味します。習得にはより長くかかります - おそらく 6～12 ヶ月の継続的な作業です。学習曲線は新しい WordPress ページビルダーを取得するより急ですが、ゼロから完全スタックほど悪くはありません。

移行中に WordPress サービスを提供し続けるべきですか?

絶対に。WordPress はあなたが新しいサービスラインを構築している間の現金牛です。ほとんどの成功したエージェンシーは 2～3 年間の両方を実行し、WordPress は収益のパーセンテージとして徐々に減少します。一部は完全に停止しません - WordPress メンテナンス慣行が信頼できる経常収益であるため小さいままです。重要なのは、WordPress 機能の成長への投資をやめ、その活動を Next.js 方向に転用することです。

Next.js サービスを提供するための最小チームサイズはいくつですか?

2 人の開発者とコンポーネント ベース設計を理解するデザイナーで始めることができます。それは一度に 1 つの Next.js プロジェクトを処理し、WordPress ワークロードを保つのに十分です。需要が増加するにつれてスケールアップします。これをうまくやっているほとんどのエージェンシーは、18 ヶ月のマークまでに 4～6 人の Next.js 対応開発者を持っています。

Next.js は正しいフレームワークですか、それとも Astro または Remix を検討すべきですか?

Next.js は最大のエコシステム、最も多くのジョブ候補、および最も広いユースケースセットを持っています。このように移行しているエージェンシーにおいて、それが最も安全な賭けです。とはいえ、Astroはコンテンツ豊富なマーケティングサイトに優れており、より穏やかな学習曲線を持っています。一部のエージェンシーは両方を提供します。私は Next.js から始めて、クライアント需要がそれを保証する場合は後で Astro を追加することをお勧めします。Remix は素晴らしいフレームワークですが、マーケットシェアが小さく、それを名前で求めるクライアントが少なくなっています。

既存の WordPress クライアントをヘッドレスに移行するように説得するにはどうすればよいですか?

パフォーマンスデータで導きます。現在のサイトと等価な Next.js の Core Web Vitals 比較を表示します。SEO 改善について話します - Google は、ページエクスペリエンス信号がランキングに影響することを明示的に確認しました。1 秒以下で読み込まれる競争サイトを表示します。そして常にコンテンツ編集のために WordPress を使用し続けることができることを彼らに保証します。変更への恐れが最大の障害です。テクノロジーではありません。

Next.js プロジェクトでどのようなホスティングコストを期待すればよいですか?

Vercel の Pro プランは、寛大な使用制限の下、チームメンバーあたり月額 $20 で実行されます。ほとんどのエージェンシークライアントは、月間訪問者が数百万に達するまで Pro ティアに快適に収まります。AWS Amplify と Netlify は同様の価格を持っています。マネージド WordPress ホスティング（WP Engine、Kinsta）と比較すると、コストはしばしば同等またはより低いです。典型的な中堅企業のクライアントのホスティング請求は、Vercel での Next.js サイトの月額 $50～200 対、プレミアム WordPress ホスティングの月額 $100～300 を実行します。

既存の機能を構築しながら Next.js 開発をホワイトラベルできますか?

はい、そしてそれは短期的な戦略として賢いです。Social Animal のような専門エージェンシーとあなたの最初のいくつかのプロジェクトをパートナーシップして、内部機能を構築しながら。クライアント関係を保有し、設計と戦略を処理しながら、パートナーは技術的構築を処理します。ただ、知識がチームに戻って転送されることを確認してください - 下請け業者に永遠に依存しないでください。

12 ヶ月後の現実的な収益への影響は何ですか?

観察したエージェンシーに基づいて、典型的な $1M WordPress エージェンシーは 12 ヶ月以内に $200,000～500,000 の新規 Next.js 収益を追加でき、既存 WordPress 収益の約 80～90% を保持できます。正味効果は通常 20～40% の総収益成長です。さらに重要なことに、Next.js 収益はより高いマージンと高い保持率を持っており、したがって利益は多くの場合、トップラインの収益より大きなパーセンテージで改善されます。月 24 までに、最高パフォーマーは Next.js が総収益の 50～60% を占めるのを見ます。