Next.js 서버 통신

const onSubmit: SubmitHandler<FieldValues> = (data) => {
    setIsLoading(true);

    axios
      .post("/api/register", data)
      .then(() => {
        registerModal.onClose();
      })
      .catch((error) => toast.error("Something went error."))
      .finally(() => {
        setIsLoading(false);
      });
  };

export async function POST(request: Request) {
  const body = await request.json();
  const { email, name, password } = body;

  const hashedPassword = await bcrypt.hash(password, 12);

  const user = await prisma.user.create({
    data: {
      email,
      name,
      hashedPassword,
    },
  });

  return NextResponse.json(user);
}

요청작업에 json을 파싱하는 작업이 없다...
Next.js에서 알아서 해주는 것인가?

nextauth파일을 확인해 보았다.

export const authOptions: AuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: { label: "email", type: "text" },
        password: { label: "password", type: "password" },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          throw new Error("Invalid credentials");
        }

        const user = await prisma.user.findUnique({
          where: {
            email: credentials.email,
          },
        });

        if (!user || !user?.hashedPassword) {
          throw new Error("Invalid credentials");
        }

        const isCorrectPassword = await bcrypt.compare(credentials.password, user.hashedPassword);

        if (!isCorrectPassword) {
          throw new Error("Wrong Password");
        }

        return user;
      },
    }),
  ],
  pages: {
    signIn: "/",
  },
  debug: process.env.NODE_ENV === "development",
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
};

export default NextAuth(authOptions);

해당 파일에서는 user를 json 파싱 작업이 없다.

export async function getSession() {
  return await getServerSession(authOptions);
}

export default async function getCurrentUser() {
  try {
    const session = await getSession();

    if (!session?.user?.email) {
      return null;
    }

    const currentUser = await prisma.user.findUnique({
      where: {
        email: session.user.email as string,
      },
    });

    if (!currentUser) {
      return null;
    }
    return {
      ...currentUser,
      createdAt: currentUser.createdAt.toISOString(),
      updatedAt: currentUser.updatedAt.toISOString(),
      emailVerified: currentUser.emailVerified?.toISOString() || null,
    };
  } catch (error: any) {
    return null;
  }
}

getCurrentUser.ts 파일에서도 마찬가지로 json 파싱 작업이 없다.

navigation 컴포넌트에서 getCurrentUser()를 사용하면 json이 파싱되어 객체로 전달된다.
write 컴포넌트에서 getCurrentUser()를 사용하면 파싱 되지 않은 json 값이 아래와 같이 전달 된다....

Chunk {status: 'resolved_model', value: '{"id":"645c7359e39b056afd1f050e","name":"kim","ema…:21.603Z","updatedAt":"2023-05-11T04:47:21.603Z"}', reason: null, _response: {…}}

잘못 된 부분 : getCurrentUser() 는 서버로 부터 데이터를 가져오기 때문에 await를 붙여줘야 한다.

위 Chunk 값은 thenable 값이다... await를 붙이지 않아서 promise 상태의 값이 전달 된 것이다.

해결 방법 : await를 사용해야 한다.