[Next.js] 서버기능 구현하기

디렉토리 구조

Next.js에서 서버기능은 ‘api’ 디렉토리에 만들어주면 됩니다.

‘api’ 디렉토리는 라우팅 방식에 따라서 ‘app’ 디렉토리 하위에 만들거나, ‘pages’ 디렉토리 하위에 만들어 줄 수 있습니다.

주의점은 비교적 최근에 등장한 app router는 아직 안되는 기능들이 존재할 수 있습니다.

 

사용법

먼저 기존의 백엔드 프레임워크인 Spring, express, nest.js 같은 것들은 ‘사용자가 어떤 URL에 어떤 HTTP Method로 요청을 보내오면 이런 코드를 실행해라’ 같은 방식으로 구현했습니다.

 

하지만 Next.js는 서버 코드에도 자동 라우팅 기능을 지원하고 있기 때문에 ‘api’ 디렉토리 하위에 파일과 디렉토리를 만들어주면 그 파일과 디렉토리의 이름을 URL로 인식하고 해당 파일안에 있는 코드를 실행해줍니다.

 

예를 들어서 ‘api’ 폴더 하위에 ‘test.ts’라는 파일을 만들고 ‘api/test’로 요청을 보내면 ‘test.ts’의 코드를 실행해줍니다.

// api/test.ts
export default function handler(request: any, response: any) {
  console.log('123');
  return response.status(200).json('처리완료');
}

 

추가적으로 ‘a’라는 디렉토리를 만들고 하위에 ‘b.ts’라는 파일을 만들었다면 ‘api/a/b’로 요청을 보내면 됩니다.

// api/a/b.ts
export default function handler(request: any, response: any) {
  return response.status(200).json('api/a/b 처리완료');
}

 

만약에 요청이 들어왔을 때 사용된 HTTP Method에 따라서 다르게 처리하고 싶을 때는 아래처럼 작성하면 됩니다.

// api/test.ts
export default function handler(request: any, response: any) {

  if (request.method === 'POST') {
    return response.status(200).json('POST 처리완료');
  } else if (request.method === 'GET') {
    return response.status(200).json('GET 처리완료');
  }
}