✅ Route Handlers

• 웹에서 요청을 사용하여 지정된 경로에 대한 사용자 정의 요청을 핸들러를 생성할 수 있음
• react에서 fetch를 이용해서 post,get을 하는거랑 비슷

사용 방법

1. 경로 폴더를 생성해준다.
   • app → www or api → route.ts
   • page.tsx, layout.tsx 처럼 route.ts를 만들어야 한다.
2. function 이름은 POST, GET, DELETE, UPDATE 등 method 이름으로 한다.

//route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  console.log(request);
  return NextResponse.json({
    ok: true,
  });
}

export async function POST(request: NextRequest) {
  const data = await request.json();
  console.log("log in yuser", data);
  return NextResponse.json(data);
}

3. form에서 데이터를 보낼 때는 fetch를 사용해서 보낸다.

"use client";

export default function Home(){
  
 const onClick = async () => {
    const response = await fetch("/api/users", {
      method: "POST",
      body: JSON.stringify({
        username: "nico",
        password: "1234",
      }),
    });
  };
  return <form onClick={onClick}>....</form>
  
}

일반적으로 react를 이용해서 login data를 보내면 useEffect, state, fetch를 이용하지만 nextjs14에서 많은 부분이 생략 되었다.

✅ Server Action

• Next.js의 Server Actions는 서버 측에서 실행되는 비동기 함수로, 클라이언트 측 코드에서 직접 호출할 수 있는 강력한 기능
• Next.js 14에서 정식으로 도입된 이 기능은 웹 애플리케이션 개발 방식을 크게 개선

✍️ 특징 및 장점

• 클라이언트 코드에서 직접 호출 가능
• 서버 측 실행: Server Actions는 서버에서 실행되므로, 데이터베이스 접근이나 민감한 작업을 안전하게 수행할 수 있습니다
• 폼 처리 간소화: 특히 폼 제출 처리에 유용하며, 클라이언트와 서버 간의 데이터 전송을 간소화합니다
• 보안 강화: 클라이언트 측에 민감한 정보를 노출하지 않고 서버에서 처리함으로써 보안을 강화합니다

const onSubmit = async (data: FormData) => {
    "use server";
    console.log(data.get("email"), data.get("password"));
    /// xxx.gmail.com, 1111
  };
  
 <form action={onSubmit}>
	 <input name="email"/> // ex) xxx@gmail.com
	 <input name="password"/> // ex) 1111
 </form>

✍️ 사용 방법

• 함수 최 상측에 use server를 입력할 수 있음
• FormData 명시해야됨
• input name을 명시하면 data.get(”name”)을 통해서 데이터를 가져올 수 있음