[Next.js] Naver API - Rewrite 오류 해결

 ~~~ 지난이야기 ~~~

Next.js에서 Naver API를 연동해 기사 데이터를 조회해왔는데 ...

---

1️⃣ 오류 발생

필자는 Next.js app router를 사용 중이다.

dynamic router를 사용해 게시물 상세 페이지를 구현했었다.

 

어림도 없지

어느 날부터 갑자기 dynamic router 작동이 되지 않는 것이다 ...

상세페이지에 들어가면 아래와 같은 화면만 나올 뿐이었다 ..

 

본 적도 없는 에러 형태였다 ..

 

정말 처음 보는 페이지였다.404면 404지 저건 무슨 형태인가?

Malformed URL 부터 에러코드까지 전부 검색해봤지만 비슷한 내용조차 찾지 못했다..

 

결국 작동이 되던 때를 생각하며 어디서부터 잘못되었는가를 복기했다.

 

 

2️⃣ 돌아가자

아, 이건 Naver API 연동부터 잘못됐다

라는 느낌이 들어 설정 파일부터 하나하나 열어봤다.

 

 

일단 어떤 설정들을 추가했었는지 확인해보자.

 

1. package.json 파일에 proxy 설정을 추가했다.
2. next.config.js 파일에 rewrites 함수를 추가했다.
3. fetch api url 을 수정했다.

아, 그럼 rewrites 함수가 뭔가 잘못 됐구나

next.config.js 파일을 살펴보자

 

/** @type {import('next').NextConfig} */

const path = require('path');

const nextConfig = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },

  reactStrictMode: false,
  async rewrites() {
    return [ 
      {
        source: '/:path*',
        destination: 'https://openapi.naver.com/:path*',
      },
    ]
  }
};

module.exports = nextConfig;

 

Naver API를 연동하며 rewrites 함수를 추가했었다.

당시 결과를 보기에 바빴던 나는 rewrites 함수가 뭘 의미하는지 깊이 생각하지 않고 프로젝트를 계속 진행했다.

결과적으로는 그런 옳지 못한 태도가 dynamic router 오류를 야기한 것이다..

 

그럼 이제 rewrite가 어떤걸 의미하는지 살펴보자

 

 

3️⃣ rewrite

rewrite는 유저가 특정 path로 이동할 때 정해진 화면이 보이도록 맵핑하는 것이다.

 

하지만 화면이 아니라 api url이 될 수도 있다. 간단한 예시를 보자.

 

간혹 api url을 작성할 때 API Key가 노출되는 경우가 발생한다.

API Key는 사용자마다 고유한 번호로 유료 API일 경우 노출 시 누군가 사용해 돈이 나가는.. 처참한 일이 발생할 수도 있다.

그걸 방지하기 위해 env파일에 API Key를 저장해서 쓰지만 개발자도구 network 탭에서 내 의도와 별개로 공개되는 경우가 있다..

이를 방지하기 위해 rewrite를 사용해 api url에서 api key가 보이지 않도록 설정할 수 있는 것이다.

 

module.exports = {
  async rewrites() {
    return [
      {
        source: '/about',
        destination: '/',
      },
    ]
  },
}

 

source는 유저가 진입할 path를, destination은 유저가 이동할 path를 의미한다.

위 코드를 보면 about 페이지로 이동하는 Link가 있을 경우 rewrite이 적용되어 첫 페이지로 이동하게 된다.

 

 

그럼 위에서 작성했던 rewrite를 보자.

async rewrites() {
    return [ 
      {
        source: '/:path*',
        destination: 'https://openapi.naver.com/:path*',
      },
    ]
}

source(유저가 진입할 path)는 모든 경로를

destination(유저가 이동할 path)는 openapi.naver.com을 가리키고 있다.

 

그렇기 때문에 /learn/1 과 같이 learn의 상세페이지로 이동할 때 openapi.naver.com/learn/1로 이동해버리는 것이다.

이 현상을 해결하기 위해 다음과 같이 코드를 수정해야 한다.

 

async rewrites() {
    return [ 
      {
        source: '/v1/:path*',
        destination: 'https://openapi.naver.com/v1/:path*',
      },
    ]
  }

source에 naver api url에 포함되는 /v1 를 앞에 추가해준다.

destination에도 opanapi.naver.com/v1 으로 /v1 을 추가해준다.

 

이렇게 되면 dynamic router를 방해하지 않고 외부 api를 연동해 사용할 수 있게 된다.

 

 

 

rewrite를 알려준 고마우신 분. rewrite와 redirect에 대해 자세히 알고싶다면 참고

https://velog.io/@deli-ght/nextrewrite%EC%99%80-redirect

next.js의 rewrite와 redirect

 

 

틀린정보가 있다면 말씀해주세요!! 피드백 대환영