Next.js로 간단한 백엔드 구현해 보기

• Next.js는 풀스택 프레임워크라도 불리는데요, 그 이유는 바로 백엔드 서버 처럼 기능하는 라우트를 만들 수 있기 때문이에요.
• 백엔드 서버처럼 기능하는 라우트는 app 디렉터리 하위에 위치한 디렉터리들 내에서 route.ts라는 이름으로 파일을 만들면 사용할 수 있어요.
• route.ts가 위치한 디렉터리의 경로에 대해 GET, POST, PUT, DELETE 등 다양한 HTTP Method에 대응하는 라우트를 만들 수 있답니다.

import { NextResponse } from 'next/server'

export async function GET(request) {
	return NextResponse.json("Hello World")
}

함수의 이름이 약속
경로는 폴더명

export async function GET(request) {
  return new Response("hello, Next.js!", {
    status: 200,
    headers: {
      "Set-cookie": "hello=world",
    },
  });
}

매 요청마다 서버에 요청하는 값
항상 클라이언트에서 로그인 상태를 체크해야함! => 애매한 공백 시간존재

하지만 이제는 미들웨어와 연결해서 사용 가능함!

import { cookies } from "next/headers";

function HomePage() {
  const accessToken = cookies().get("accessToken")?.value;
  const isAccessTokenValid = !!accessToken;
  return (
    <div>
      {isAccessTokenValid ? (
        <div>비밀 내용, 로그인한 사용자만 볼 수 있는 내용</div>
      ) : (
        <div>퍼블릭한 내용. 로그인 안 한 사용자한테만 보여줄 내용</div>
      )}
      {accessToken}
    </div>
  );
}

export default HomePage;

가져올때부터 이미 비밀내용이 그려져 있음!

기존에는 먼저 퍼블릭한 내용. 로그인 안 한 사용자한테만 보여줄 내용을 보여주고 auth를 체크해서 바꿔주는 방법을 했었다.