NEXT.js14 API Routes 사용하기 (with. MONGODB)

 

API Routes

API Routes는 API를 호출할 수 있는 Endpoint를 생성해주는데, 쉽게 말해보자면 Next.js의 파일 기반으로 API를 만들 수 있게해준다. 그러니깐 다른 백엔드 프레임워크 필요없이, 따로 api를 만들어서 사용하지 않아도 DB 연결까지 할 수 있고, 데이터 전송이 가능하다는 말이다. Routing과 마찬가지로 파일기반으로 이루어지는데 Nextjs14의 경우는 pages가 아닌 app 폴더에 파일을 생성하고(14버젼 이전은 pages/api), 함수를 작성하면 된다. 

 

API Routes는 Serverless function으로 이루어져있다. Serverless Function의 컨셉은 요청(이벤트)이 들어올 때마다 지정된 함수를 실행시켜 원하는 API를 클라이언트에게 전달하는 것이다. 그렇기 때문에 web socket과 같이 지속적인 커넥션을 가질 수 없다. 하지만 간단한 데이터 전송과 캐싱 기능이 있기때문에 복잡한 서비스가 아니라면 아주 빠르고 싶게 서비스를 구축할 수 있게 해준다. 

 

사용 방법

api로 주고 받을 데이터 스키마 생성해줍니다. 물론 db에도 똑같이 이런 형태로 들어갈거고 가져올거다. db는 mongoDB를 사용했고, 연결은 mongoose를 이용했다. 

 

models.js

import mongoose from "mongoose";

const recordsSchema = new mongoose.Schema(
    {
        userId: {
            type: Number,
            required: true,
            unique:true,
        },
        username:{
            type: String,
            required: true,
            unique: true,
            minlength: 3,
            maxlength: 10
        },
        time: {
            type: Number,
            required: true,
        },
        section:{
            type: String,
            required: true,
            minlength: 1,
            maxlength: 50
        },
    },
    {timestamps: true }
)

export const Record = mongoose.models?.Record || mongoose.model("Record", recordsSchema);

 

 

 

/api/routes.js

export const POST = async(req, res) => {
    try {
     // db 연결
      ConnectToDb();
      
      const data  = await req.json()
      
      // db에 저장해주기, 만들어 둔 스키마가져와서 새로 생성해서 저장해주기
      const newRecord = new Record(data);
      await newRecord.save();
      
      // post라서 response를 이렇게 줄 필요는 없지만 get 사용할 때는 필수
      return NextResponse.json(data);

    } catch (err) {
      console.log(err);
      throw new Error("Failed to fetch posts!");
    }

}

 

revalidatePath 이라고 next에서 제공하는 함수인데, /URL에 있던 캐시를 삭제하고 다시 생성, 페이지를 다시 로드해주는 기능이 있답니다. 변경된 것만 바꿔주는 기능이라서 넣어줬습니다. 괄호안에는 해당 페이지 경로를 넣어주면 됩니다.

 

 

 

/해당파일.jsx

export async function postRecord(req) { 
  try {
    const res = await fetch('http://localhost:3000/api/record', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(req),
    });

    if (!res.ok) {
      throw new Error(`Failed to save record. Status: ${res.status}`);
    }
  } catch (error) {
    console.error('Error:', error);
  }

}

 

서버로 보낼 함수 fetch한 코드. sever client로 구현할 수도 있지만 해당 파일 구성상 그렇게 쓸 수 없는 상황이여서 use client 로 구현을 해야했다. api/record는 위의 post 함수가 들어가있는 파일 경로이다. method를 'POST'로 해주고 fetch 함수 쓰듯이 사용하면 된다. 

 

 

 

---

 

 

 

이렇게 간단한 건데, 사실 이 부분 구현이 하루종일 걸렸다. 'POST' method를 fetch를 하긴하는데, payload로 데이터도 제대로 보내는데, 계속 sever error가 나는 것이다. api를 쏘는데 request body 값이 제대로 안 들어온다고 500 에러가 계속 남. request에 들어가는 요소들이 다 필수라고 스키마에 적어둬서 제대로 안 들어오면 error 뜨는거. 맨날 클라이언트쪽만해서 이걸 어떻게 해결해야할지도 모르겠고, 심지어 payload에는 다 넘어가고 있는 상황이여서 더 오리무중. 내가 평상시에 다루지 못 했던 부분이라서 더 패닉. 

 

여기저기 console.log를 찍었는봤는데 POST 함수쪽에서 request를 찍어보면 undefined로 아무것도 안 찍히는 상황.

const data  = await req.json() 이 부분을 제대로 안 적어줘서 그런거 

아래의 블로그를 보면 post handling을 어떻게 해야하는지 적혀있다. 이분도 나와같은 오류를 겪으신듯.

https://dev.to/iambstha/http-get-post-request-in-nextjs-stable-app-router-557m

HTTP GET & POST Request in NextJS Stable App Router

 

 

 

 

 

 

참고 학습자료

• 공식문서

https://nextjs.org/docs/pages/building-your-application/routing/api-routes

Routing: API Routes | Next.js