React - Next.js API Routes

next js의 장점은 SSR(server side rendering)이다. getServerSideProps와 getStaticProps 라는 함수를 통해서 page가 로딩될때, 함수들이 실행되어 data fetching을 미리하는 장점이 있다.

 

이후에 client의 api 통신은 client에서 직접사용을 했었지만, API Routes를 알게된 이후로 client의 api호출을 SSR로 통신이 가능한 것을 알게되었다. API Routes를 사용하면 API server의 도메인 값을 알 수 없어서 보안적으로 매우 좋다고 생각을 한다.

 

#object

     - API Routes

     - API Routes와 getServerSideProps 차이

     - API CORS

 

## API Routes

   - API Routes는 pages 폴더에 api폴드를 만들면 자동으로 'api/*' 맵핑이 된다.(from nextjs 공식문서)

   - 공식문서에 있는 내용을 토대로 login 과정을 해보면...

     * client 에서 login button을 누르면 postRequest가 호출이 되고, postRequest에서 axios를 통해서 api routes 호출을 보낸다.

     * pages/api/auth/index.ts 에 handler 함수를 통해서 api 서버와 통신을 한다(api 주소가 localhost:8000)

     * 이후에 응답(res) 값으로 result를 json으로 풀어서 넘겨주면 api utils에 있는 response값으로 넘주게 되고, axios를 통해서 요청을 보냈기 때문에 axios 응답 형태인 data 값에 json(result) 값이 들어있다.

client

api utils

pages/api/auth/index.ts

 

### API Routes와 getServerSideProps

   - getServerSideProps도 SSR 형태이고, API Routes도 직접 API 서버로 통신하는 것이 아니라 next js 내부 서버로 호출을 보내고 내부 서버에서 data를 받아서 보내주는 SSR 형태이다.

   - 가장 큰 차이점은 run time 환경 이다. getServerSideProps의 run time 환경은 build time이고, API Routes는 run time 때 실행이 된다.

   - local 환경에서는 api routes 에도 localhost를 넣어도 호출이 잘 되진만, 배포를 하고는 안된다.(docker로 배포를 했을 때, 그 원인을 알게되었음)

   - docker로 배포할 때, node version은 16을 사용하는것이 좋다. 14일때는 build를 통해서 output folder를 만들었지만 next 와 node version이 올라가면서 자동으로 .next 폴더에서 routing이 된다.

 

     * 아래와 같이 getServerSideProps 안에서는 fetch http://localhost:3000/api/login 으로 내부서버와 통신이 가능하다.

export cont getServerSideProps = wrapper.getServerSideProps(store => async(context) => {
	const response = awiat fetch('http://localhost:3000/api/login')
})

     

     * 아래와 같이 client에서 내부 서버로 통신을 하려고 하면 통신이 안된다.

//client
const loginBtn = async () => {
	const response = await fetch('http://localhost:3000/api/login')
}

     * 하지만, 호출하는 주소를 api routes 호출 방식으로 해주는 url을 입력하면 호출이 가능하다.

//client
const loginBtn = async () => {
	const response = await fetch('/api/login')
}

 

    * 이와 반대로 getServerSideProps에서 api routes 처럼 getServerSideProps에서 호출을 하면 통신이 불가능 하다.

export cont getServerSideProps = wrapper.getServerSideProps(store => async(context) => {
	const response = awiat fetch('/api/login')
})

 

즉, 정리를 하면 getServerSideProps 에서는 http://localhost:3000 url로 통신을 해야하고, api routes는 '/api/*' 형식으로 통신을 해야한다.

 

### API Routes CORS

내부 통신을 하면서 browser에서 CORS error를 받는다면... api routes handler에 미들웨어를 통해서 해결할 수 있다. client이지만 cors 라이브러리를 설치를 해야한다.

pages/api/middleware.ts

pages/api/auth/index.ts

 

 

※ 참조

https://nextjs.org/docs/api-routes/introduction

API Routes: Introduction | Next.js

https://github.com/vercel/next.js/tree/canary/examples/api-routes-cors

GitHub - vercel/next.js: The React Framework