🎧

Next.js(App Router) + ISR + Vercel + MicroCMSで実装した時にハマったポイント

2023/11/24に公開
  1. App Routerのキャッシュについて深く理解しよう

子ページは問題なかったが、トップページでrevalidate('/')でキャッシュをパージしても、5~10分経っても変化がなかった。

→ Vercelの管理画面からキャッシュをパージするか、時間が解決するのか...現在調査中。

  1. Webhookからのリクエストヘッダーの扱い方

Node.jsと同じようにRequest.header['x-xxx-xxx']とデータを取得するのではなく、
以下のようにheadersメソッドを読み込んで使うと上手くいく。

import { headers } from 'next/headers';

export async function POST(request: Request) {
  try {
    const headersList = headers();
    
  ...
  1. Webhookからのリクエストボディーの扱い方

リクエストボディーは以下のように、jsonメソッドでPromiseを受け取り、awaitを使って解決したデータを扱うとうまくいく

const requestBodyData = await request.json();

参考

https://developer.mozilla.org/docs/Web/API/Request

https://nextjs.org/docs/app/api-reference/functions/headers

Discussion