회원가입시 redirect가 안됩니다.

클라이언트 컴포넌트에서 Server Actions 사용하기에서 가입하기를 누르면

response에는 message: null이 잘 오는데 redirect에서 에러가 납니다.

404
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:5329:19)
    at successSteps (node:internal/deps/undici/undici:5300:27)
    at fullyReadBody (node:internal/deps/undici/undici:1447:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async specConsumeBody (node:internal/deps/undici/undici:5309:7)
    at async onSubmit (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:49:21)
    at async C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:406
    at async t2 (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:6412)
    at async rS (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:41:1369)
    at async doRender (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1378:30)     
    at async cacheEntry.responseCache.get.routeKind (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1539:28)
    at async DevServer.renderToResponseWithComponentsImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1447:28)
    at async DevServer.renderPageComponent (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1844:24)
    at async DevServer.renderToResponseImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:1882:32)
    at async DevServer.pipeImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:895:25)
    at async NextNodeServer.handleCatchallRenderRequest (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\next-server.js:269:17)
    at async DevServer.handleRequestImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\base-server.js:791:17)
    at async C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\dev\next-dev-server.js:331:20
    at async Span.traceAsyncFn (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\trace\trace.js:151:20)    
    at async DevServer.handleRequest (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\dev\next-dev-server.js:328:24)
    at async invokeRender (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\router-server.js:174:21)
    at async handleRequest (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\router-server.js:353:24)
    at async requestHandlerImpl (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\router-server.js:377:13)
    at async Server.requestListener (C:\Users\user\Desktop\projects\z-com\node_modules\next\dist\server\lib\start-server.js:140:13)

at async onSubmit (webpack-internal:///(action-browser)/./src/app/(beforeLogin)/_lib/signup.ts:49:21) 에러가 난것을 확인했을때 다른것은 되는데 redirect가 안되는 것 같습니다.

signup.ts는

"use server";

import { redirect } from "next/navigation";
import { signIn } from "@/auth";

export default async function onSubmit(prevState: any, formData: FormData) {
  if (!formData.get("id") || !(formData.get("id") as string)?.trim()) {
    return { message: "no_id" };
  }
  if (!formData.get("name") || !(formData.get("name") as string)?.trim()) {
    return { message: "no_name" };
  }
  if (
    !formData.get("password") ||
    !(formData.get("password") as string)?.trim()
  ) {
    return { message: "no_password" };
  }
  if (!formData.get("image")) {
    return { message: "no_image" };
  }
  let shouldRedirect = false;
  try {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_BASE_URL}/api/users`,
      {
        method: "post",
        body: formData,
        credentials: "include",
      }
    );
    console.log(response.status);
    if (response.status === 403) {
      return { message: "user_exists" };
    }
    console.log(await response.json());
    shouldRedirect = true;
    await signIn("credentials", {
      username: formData.get("id"),
      password: formData.get("password"),
      redirect: false,
    });
  } catch (err) {
    console.error(err);
    return { message: null };
  }

  if (shouldRedirect) {
    redirect("/home");
  }
  return { message: null };
}

ESLint 오류가 나서 return {message:null}을 추가해준것과

export default async function onSubmit(prevState: any, formData: FormData) {}

async function onSubmit 형태로 바꾼것 외에는 건드린게 없고,

공지사항대로 @auth/core와 next-auth 버전을

npm i @auth/core@0.27 next-auth@5.0.0-beta.11 msw@2.1

이렇게 설정해줬고,

.env.local도

NEXT_PUBLIC_API_MOCKING=enabled
API_MOCKING=hello
NEXT_PUBLIC_BASE_URL=http://localhost:9090/ 

.env도

AUTH_SECRET=mustkeepinsecret
NEXT_PUBLIC_API_MOCKING=enabled

SingupModal.tsx

"use client";

import style from "./signup.module.css";
import onSubmit from "../_lib/signup";
import BackButton from "@/app/(beforeLogin)/_component/BackButton";
import { useFormState, useFormStatus } from "react-dom";

function showMessage(messasge: string | null) {
  if (messasge === "no_id") {
    return "아이디를 입력하세요.";
  }
  if (messasge === "no_name") {
    return "닉네임을 입력하세요.";
  }
  if (messasge === "no_password") {
    return "비밀번호를 입력하세요.";
  }
  if (messasge === "no_image") {
    return "이미지를 업로드하세요.";
  }
  if (messasge === "user_exists") {
    return "이미 사용 중인 아이디입니다.";
  }
  return "";
}

export default function SignupModal() {
  const [state, formAction] = useFormState(onSubmit, { message: null });
  const { pending } = useFormStatus();

  return (
    <>
      <div className={style.modalBackground}>
        <div className={style.modal}>
          <div className={style.modalHeader}>
            <BackButton />
            <div>계정을 생성하세요.</div>
          </div>
          <form action={formAction}>
            <div className={style.modalBody}>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="id">
                  아이디
                </label>
                <input
                  id="id"
                  name="id"
                  className={style.input}
                  type="text"
                  placeholder=""
                  required
                />
              </div>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="name">
                  닉네임
                </label>
                <input
                  id="name"
                  name="name"
                  className={style.input}
                  type="text"
                  placeholder=""
                  required
                />
              </div>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="password">
                  비밀번호
                </label>
                <input
                  id="password"
                  name="password"
                  className={style.input}
                  type="password"
                  placeholder=""
                  required
                />
              </div>
              <div className={style.inputDiv}>
                <label className={style.inputLabel} htmlFor="image">
                  프로필
                </label>
                <input
                  id="image"
                  name="image"
                  required
                  className={style.input}
                  type="file"
                  accept="image/*"
                />
              </div>
            </div>
            <div className={style.modalFooter}>
              <button
                type="submit"
                className={style.actionButton}
                disabled={pending}
              >
                가입하기
              </button>
              <div className={style.error}>
                {showMessage(state?.message || null)}
              </div>
            </div>
          </form>
        </div>
      </div>
    </>
  );
}

showMessage에 TS오류나서 타입을 state?.message || null로 바꿔준것 외에는 없습니다.

캐시도 다 삭제하고 mock서버랑 next서버 다 껐다가 다시 키고 vscode도 껐다가 다시 켜도 똑같습니다.. 리다이렉트가 안됩니다 ㅠㅠ 자꾸 404 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON이 나옵니다...

auth.ts도 바꾼것이 없습니다..

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials";
import {NextResponse} from "next/server";

export const {
  handlers: { GET, POST },
  auth,
  signIn,
} = NextAuth({
  pages: {
    signIn: '/i/flow/login',
    newUser: '/i/flow/signup',
  },
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}}/api/login`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            id: credentials.username,
            password: credentials.password,
          }),
        })

        if (!authResponse.ok) {
          return null
        }

        const user = await authResponse.json()
        console.log('user', user);
        return {
          email: user.id,
          name: user.nickname,
          image: user.image,
          ...user,
        }
      },
    }),
  ]
});