import { auth } from '@clerk/nextjs';
import { NextResponse } from 'next/server';

import prismadb from '@/lib/prismadb';

export async function POST(req: Request) {
  try {
    const { userId } = auth();
    const body = await req.json();

    const { name } = body;
		// clerk에서 가져온 userId가 없다면?
    if (!userId) {
      return new NextResponse('Unauthorized', { status: 401 });
    }
		// 클라이언트에서 입력받은 name이 없다면?
    if (!name) {
      return new NextResponse('Name is required', { status: 400 });
    }

    const store = await prismadb.store.create({
      data: {
        name,
        userId,
      },
    });
    // 성공시!
    return NextResponse.json(store);
  } catch (error) {
    // development에서는 console만 찍자. production에서는 sentry
    console.log('[STORES_POST]', error);
    return new NextResponse('Internal Error', { status: 500 });
  }
}

• 실제 입력받는 부분이 클라이언트 컴포넌트이기 때문에, api-routes를 만드는 것 같기도 하다.

실제 클라이언트에서 api-routes을 사용해 상점 정보를 만들어보자!

const onSubmit = async (values: z.infer<typeof formSchema>) => {
    try {
      setLoading(true);
      const response = await axios.post('/api/stores', values);
      console.log(response.data);
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

증거 결과 (성공)

createdAt
: 
"2023-09-30T08:54:38.649Z"
id
: 
"b0304557-30bc-4b13-b943-356648ecac69"
name
: 
"test-store"
updatedAt
: 
"2023-09-30T08:54:38.649Z"
userId
: 
"user_2W6a5sc5nvt8GYF2m6te5CvaEt3"

추가로 toastProvider 만들자!