<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p data-line="1" class="code-line">本記事では、Vercel と Next.js/App Router を活用してメンテナンスモードを実現する方法を紹介します。Vercel の Edge Config を使い、ミドルウェアと組み合わせた効率的な実装方法について解説します。</p>
<h1 id="edge-config-%E3%81%A8%E3%81%AF" data-line="3" class="code-line">
<a class="header-anchor-link" href="#edge-config-%E3%81%A8%E3%81%AF" aria-hidden="true"></a> Edge Config とは</h1>
<p data-line="4" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__09cbfa961cdcc" src="https://embed.zenn.studio/card#zenn-embedded__09cbfa961cdcc" data-content="https%3A%2F%2Fvercel.com%2Fstorage%2Fedge-config" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vercel.com/storage/edge-config" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vercel.com/storage/edge-config</a></p>
<p data-line="6" class="code-line">Edge Config は、Vercel プロジェクトで利用可能な Key-Value 型のデータストアです。Edge Middleware と連携して、以下のようなユースケースで活用できます。</p>
<ul data-line="8" class="code-line">
<li data-line="8" class="code-line">メンテナンスモードの管理</li>
<li data-line="9" class="code-line">A/B テストの設定</li>
<li data-line="10" class="code-line">フィーチャーフラグの制御</li>
<li data-line="11" class="code-line">IP 制限</li>
</ul>
<p data-line="13" class="code-line">など。</p>
<p data-line="15" class="code-line">Edge Config は、Vercel のエッジネットワークでデータ取得が可能であるため、超低遅延でのデータ読み込みを実現します。また、設定が更新されるたびに自動的にバックアップが生成され、過去の設定に復元できるので、運用時のリスク軽減にも寄与します。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3afee42e52114" src="https://embed.zenn.studio/card#zenn-embedded__3afee42e52114" data-content="https%3A%2F%2Fvercel.com%2Fchangelog%2Fbackups-now-available-for-vercel-edge-config" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vercel.com/changelog/backups-now-available-for-vercel-edge-config" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vercel.com/changelog/backups-now-available-for-vercel-edge-config</a></p>
<h2 id="edge-config-%E3%81%A8%E4%BB%96%E3%81%AE%E4%BB%A3%E6%9B%BF%E6%89%8B%E6%AE%B5%E3%81%AE%E6%AF%94%E8%BC%83" data-line="19" class="code-line">
<a class="header-anchor-link" href="#edge-config-%E3%81%A8%E4%BB%96%E3%81%AE%E4%BB%A3%E6%9B%BF%E6%89%8B%E6%AE%B5%E3%81%AE%E6%AF%94%E8%BC%83" aria-hidden="true"></a> Edge Config と他の代替手段の比較</h2>
<table data-line="20" class="code-line">
<thead data-line="20" class="code-line">
<tr data-line="20" class="code-line">
<th>Edge Config vs alternatives</th>
<th>Read latency</th>
<th>Write latency</th>
<th>Redeployment required</th>
<th>Added risk of downtime</th>
</tr>
</thead>
<tbody data-line="22" class="code-line">
<tr data-line="22" class="code-line">
<td>Edge Config</td>
<td>Ultra-low</td>
<td>Varies</td>
<td>No</td>
<td>No</td>
</tr>
<tr data-line="23" class="code-line">
<td>Remote JSON files</td>
<td>Varies</td>
<td>Varies</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr data-line="24" class="code-line">
<td>Embedded JSON files</td>
<td>Lowest</td>
<td>Highest</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr data-line="25" class="code-line">
<td>Environment Variables</td>
<td>Lowest</td>
<td>Highest</td>
<td>Yes</td>
<td>No</td>
</tr>
</tbody>
</table>
<p data-line="27" class="code-line">Ref: <a href="https://vercel.com/docs/storage/edge-config#why-use-edge-config-instead-of-alternatives" target="_blank" rel="nofollow noopener noreferrer">https://vercel.com/docs/storage/edge-config#why-use-edge-config-instead-of-alternatives</a></p>
<p data-line="30" class="code-line">Edge Config は再デプロイを必要とせず、すぐに設定を反映できるため、ダウンタイムや運用負荷を最小限に抑えたいユースケースに特に適しています。</p>
<h1 id="%E3%83%A1%E3%83%B3%E3%83%86%E3%83%8A%E3%83%B3%E3%82%B9%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AE%E5%AE%9F%E8%A3%85%E4%BE%8B" data-line="33" class="code-line">
<a class="header-anchor-link" href="#%E3%83%A1%E3%83%B3%E3%83%86%E3%83%8A%E3%83%B3%E3%82%B9%E3%83%A2%E3%83%BC%E3%83%89%E3%81%AE%E5%AE%9F%E8%A3%85%E4%BE%8B" aria-hidden="true"></a> メンテナンスモードの実装例</h1>
<p data-line="34" class="code-line">ここでは、Edge Config を利用してメンテナンスモードを実装する方法を紹介します。Edge Config でフラグを設定し、Next.js のミドルウェアでそのフラグに応じてページをリダイレクトします。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/c752668b2457-20241116.png" loading="lazy" class="md-img"><br>
Ref: <a href="https://edge-maintenance-page.vercel.app/" target="_blank" rel="nofollow noopener noreferrer">https://edge-maintenance-page.vercel.app/</a></p>
<h2 id="1.-edge-config-%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="38" class="code-line">
<a class="header-anchor-link" href="#1.-edge-config-%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 1. Edge Config の設定</h2>
<p data-line="39" class="code-line">まず、Vercel のプロジェクトページから Edge Config に「メンテナンスモード」のフラグを設定します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/507eeb115467-20241116.png" loading="lazy" class="md-img"></p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">Edge Config</span></div>
<pre class="language-json"><code class="language-json code-line" data-line="41"><span class="token punctuation">{</span>
  <span class="token property">"isMaintenance"</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</code></pre>
</div><h2 id="2.-next.js-%E3%83%9F%E3%83%89%E3%83%AB%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%A7%E3%81%AE%E3%83%95%E3%83%A9%E3%82%B0%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A" data-line="47" class="code-line">
<a class="header-anchor-link" href="#2.-next.js-%E3%83%9F%E3%83%89%E3%83%AB%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%A7%E3%81%AE%E3%83%95%E3%83%A9%E3%82%B0%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A" aria-hidden="true"></a> 2. Next.js ミドルウェアでのフラグ読み取り</h2>
<p data-line="48" class="code-line">次に、Next.js のミドルウェアで Edge Config からフラグの値を取得し、必要に応じてメンテナンスページへリダイレクト（Rewrite）します。<br>
<a href="https://vercel.com/docs/storage/edge-config/edge-config-sdk" target="_blank" rel="nofollow noopener noreferrer">Edge Config client SDK</a> を利用することで、簡単にデータを読み取ることができます。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">middleware.ts</span></div>
<pre class="language-ts"><code class="language-ts code-line" data-line="50"><span class="token keyword">import</span> <span class="token punctuation">{</span> get <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@vercel/edge-config"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token keyword">type</span> <span class="token class-name">NextRequest</span><span class="token punctuation">,</span> NextResponse <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"next/server"</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">middleware</span><span class="token punctuation">(</span>request<span class="token operator">:</span> NextRequest<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>

  <span class="token keyword">const</span> isInMaintenanceMode <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"isMaintenance"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">// メンテナンスモードがTrueの場合は、メンテナンスページを表示する</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>isInMaintenanceMode<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    request<span class="token punctuation">.</span>nextUrl<span class="token punctuation">.</span>pathname <span class="token operator">=</span> <span class="token string">"/maintenance"</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> NextResponse<span class="token punctuation">.</span><span class="token function">rewrite</span><span class="token punctuation">(</span>request<span class="token punctuation">.</span>nextUrl<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre>
</div><h1 id="%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" data-line="68" class="code-line">
<a class="header-anchor-link" href="#%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" aria-hidden="true"></a> さいごに</h1>
<p data-line="69" class="code-line">Edge Config は Vercel プロジェクト内で利用できる軽量で便利なデータストアです。外部データベースのようなセットアップや管理の手間が不要で、効率的な運用が可能になります。メンテナンスモードなどの動的な機能の実装が求められるプロジェクトでは、Edge Config の活用をぜひ検討してみてください。</p>


Next.js & Vercel Edge Config で簡単にメンテナンスモードを実装する

Edge Config と他の代替手段の比較

2. Next.js ミドルウェアでのフラグ読み取り

Discussion