Tailwind css

max-w-screen-sm  // 화면이 커져도 모바일 크기로 보여줌
mx-auto // 가운대 정렬

heroicons

npm i @heroicons/react

interface vs type

취향의 차이인데, 타입스크립트 공식 문서에서는 type 의 기능이 필요하기 전에는 interface 를 사용할 것을 권장

Server Action 전에는 API route를 만드는게 유일한 선택지였음

route.ts

// API Route 방식

 const onClick = async () => {
    const response = await fetch("/www/users", {
      method: "POST",
      body: JSON.stringify({
        username: "nico",
        password: "1234",
      }),
    });
    console.log(await response.json());
  };
  
  
 // app/www/users/route.ts
 import { NextRequest } from "next/server";
 
export async function GET(request: NextRequest) {
  console.log(request);
  return Response.json({
    ok: true,
  });
}

export async function POST(request: NextRequest) {
  const data = await request.json();
  console.log("log the user in!!!");
  return Response.json(data);
}

Server Actions

// app/login/page.tsx

async function handleForm(formData: FormData) {
    "use server";
    console.log(formData.get("email"), formData.get("password"));
    console.log("i run in the server baby!");
  }