Next.js Error: NEXT_REDIRECT

こんにちは、フリーランスエンジニアの太田雅昭です。

Next.jsは最近になって大きなアップデートがあったよう。そのタイミングで使い始めていることもあり、新旧の情報が入り乱れている状態は、初学者にはなかなか大変ですね。

ユーザーのフォーム入力から、Server Actionに渡して認証し、リダイレクトするという単純な作業に何時間もかかってしまいました。。。

結論から言えば、redirectはtryで囲ってはだめだそうです。

"use server";

import { redirect } from 'next/navigation';
import { RedirectType } from 'next/dist/client/components/redirect';
import { getAuth } from '@apis/Auth';
import { ROUTES } from '@components/Common';

async function HandleSubmit(formData: FormData) {
    const data = formData;

    try {
        const client = await getAuth();
        const res = await client.requestAndSetPair(data.get('email') as string, data.get('password') as string);
        console.log('ログイン成功');
        // !! tryに入れてはだめ
        // redirect(ROUTES.USER_PROFILE, RedirectType.push); 
    } catch (err) {
        console.error('ログインできません', err);
    }

    // tryの外に出せば動く
    redirect(ROUTES.USER_PROFILE, RedirectType.push); 
}

export default HandleSubmit;

一生解決しないんじゃないかと思ってましたが、こんなあっさり。まさかtryで囲ってはだめだなんて、予想すらしてませんでした。アップデートが最近なので、ChatGPT先生も当てにならない状態はなかなかですね。