[Next.js/14] NextJS server 활용하여 간단 api 만들어보기 #4

김하정·2024년 9월 27일

React next.js

[Frontend/React] NextJS 14 파고들기

목록 보기

4/5

NextJS 의 장점 중 하나는 바로 프론트쪽에서도 간단하게 NextJS server를 활용할 수 있다는 점이다!

기존 CSR 방식에서는 프론트 쪽에 중요 키나 정보 등을 저장해두면 보안상 취약하였기에 대부분 백엔드 쪽에 저장을 하고, 해당 정보로 api를 만들어 프론트 쪽에서 받아 사용하였다면,

NextJS 를 사용하게 되면 중요 정보 등을 NextJS 서버에 저장하고 활용할 수 있는 이점이 있다.

이번에는 dummy data등을 활용할 때, 단순히 dummydata = [] 파일 형태로 만들기보다는 NextJS에서 제공하는 api 로 만들어 http 형태로 주고 받을 수 있도록 만들어 보겠다.

(( 참고로 프론트엔드에서 더미 데이터를 활용 할 때 mock 서버 등을 구성하여 작업하기도 하는데 이 부분은 추후 포스팅 해보도록 하겠다! ))

NextJS 공식 문서에 따르면 app/api 폴더구조 안에 endpoint가 될 만한 폴더를 생성 후, route.tsx 파일을 생성해주면 해당 폴더명을 endpoint로 하는 api를 만들어준다.

다음은 공식 문서 일부의 스크린샷이다.

이와 관련된 컨센션 등의 정보는 아래의 문서를 통해 추가로 확인할 수 있다.
NextJS 공식문서 - Route Handlers

🌼 app/api/getDummy 만들어보기

다음과 같은 뎁스로 getDummy를 만들어보자

route.ts의 내용은 다음과 같이 간단히 작성하였다.

import { NextResponse } from "next/server";

export type TDummyData={
    id:number,
    title:string,
    description:string,
}


const dummyData: TDummyData[] = [
    {
        id:1,
        title:`TITLE-1 입니다.`,
        description:`DESCRIPTION-1 입니다.`
    },
    {
        id:2,
        title:`TITLE-2 입니다.`,
        description:`DESCRIPTION-2 입니다.`
    },
    {
        id:3,
        title:`TITLE-3 입니다.`,
        description:`DESCRIPTION-3 입니다.`
    },
    {
        id:4,
        title:`TITLE-4 입니다.`,
        description:`DESCRIPTION-4 입니다.`
    }
];
export async function GET() {
  return NextResponse.json(dummyData);
}

공식문서에 나와있듯이 GET,PUT,DELETE 등 각각의 HTTP 메소드에 대해 다음과 같이 export async function GET() 이라는 컨벤션을 지켜준다.

🌼 페이지 단에서 getDummy 호출해보기

app 폴더 안에 callApi라는 폴더를 만들고 그 안에 page.tsx 파일을 생성 해, 다음과 같이 getDummy 를 호출하는 함수를 만들어보자.

// app/callApi/page.tsx

"use client" // api 호출이 있기 때문에

import { useEffect } from "react";
import { TDummyData } from "../api/getDummy/route";

export const getDummy = async (): Promise<TDummyData[]> => {
    const response = await fetch("/api/getDummy");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  };
  
const CallApi=()=>{
    const getApi =async ()=>{
        const result = await getDummy()
        console.log(result)
    }
    useEffect(()=>{
       getApi()
    },[])
    return(
    <div>
        call Api 페이지입니다.
    </div>
    )
}
export default CallApi;