Nextjs14のServerActionsの返り値がundefinedになる。

現象

nextjs14のserver actionsを利用して、データをやり取りする際に、サーバーからの返り値がundefinedとなってしまう。

原因

middlewareの中でrequestを書き換えていたためにリクエストヘッダーの形式が変化していた。当たり前といえば当たり前ですが、server actionsを呼ぶ際にもmiddlewareを通過しますので、注意が必要です。

解決策

middlewareにおいて、POSTメソッドが呼ばれる際にはそのままのリクエスト情報を流すようにしました。
server actionsは、POST methodで扱われるようです。

middleware.ts

export async function middleware(request: NextRequest) {
    const response = NextResponse.next();
    console.log('middleware.ts called', request.method);

    // server component用のpathnameセット
    const headers = new Headers(request.headers);
    headers.set('pathname', request.nextUrl.pathname);

    // 認証情報CK
    const authenticated = true;

    // 認証されている場合
    if (authenticated) {
        if (request.method === 'POST') return NextResponse.next();
        else if (request.method === 'GET') return NextResponse.next({ headers });
    }

    // 認証されていない場合リダイレクト
    return NextResponse.redirect(new URL('/login', request.url));
}

まとめ

server actionsは、とても便利な機能ですが、内部でどのように処理されているのかが不透明なので、トラブル時の解析がしづらかったです。
servera actionsではまった人は一度middlewareが悪さしていないか確認してみてください。