[Next.js] Redirect & Rewrite

2022. 7. 3. 16:31·Next.js/이론
반응형

프로젝트를 진행하다 보면 API를 사용하게 되는 경우가 자주 있다. 

그럴 때, API마다 사용하기 위해서 고유한 API KEY를 사는 경우가 있다. 

 

API KEY는 돈 주고 사거나, 사용할 수 있는 할당량이 정해져 있어서 프로젝트를 할 때 숨기는 경우가 대부분이다. 

( ex_ .env )

하지만, 웹사이트 내부에서 network 창을 확인해보면 API KEY가 나오는 경우가 있다. 

Request URL에 api_key가 나와있는 것을 확인할 수 있다.

프로젝트에서 API KEY를 network 창에서 나오지 않게 하는 방법이 Next.js는 아주 간단하다. 

 

Rewrite

// next.config.js
const API_KEY = process.env.API_KEY;

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoivedb.org/...?api_key=${API_KEY}`,
      },
    ];
  },
};

module.exports = nextConfig;

 

 

rewrites 함수를 사용하면 source 경로로 데이터를 요청하면 destination으로 바꿔서 요청을 보내준다. 

이렇게 보내면 브라우저 상에서도 destination 경로로 요청하는 것이 아닌, source 경로로 요청하기 때문에 API KEY를 

숨길 수 있다. 

Redirect 

rewrite와 유사한 기능으로 특정 경로로 접근할 경우 자동으로 다른 경로로 redirect 시켜주는 함수도 있다. 

const API_KEY = process.env.API_KEY;

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoivedb.org/...?api_key=${API_KEY}`,
      },
    ];
  },
  async redirects() {
    return [
      {
        source: "/test",
        destination: "https://naver.com",
        permanent: false,
      },
    ];
  },
};

module.exports = nextConfig;

홈페이지에 " /test " 경로로 이동할 경우 네이버로 redirect 되게 작업하였다. 

여기서 permanent라는 옵션이 있는데, 이것은 브라우저나 검색엔진이 redirect 한 정보를 기억하는지 유무를 결정한다. 

 

source와 destination에는 *을 사용하면 모든 주소, :id와 같은 params도 적용되기 때문에 필요에 따라 사용할 수 있다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'Next.js > 이론' 카테고리의 다른 글

[Next.js] Dynamic Routes  (1) 2022.07.05
[Next.js] Server Side Rendering  (1) 2022.07.04
[Next.js] Pattern & Head  (1) 2022.07.02
[Next.js] Custom App  (1) 2022.07.01
[Next.js] Styles JSX  (2) 2022.06.30
'Next.js/이론' 카테고리의 다른 글
  • [Next.js] Dynamic Routes
  • [Next.js] Server Side Rendering
  • [Next.js] Pattern & Head
  • [Next.js] Custom App
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    식물
    next.js
    Node.js
    네이버 부스트캠프
    리얼학습일기
    영어독학
    다이소
    CSS
    타입스크립트
    react
    리액트
    typescript
    webpack
    javascript
    CCNA
    자바스크립트
    덤프
    알고리즘
    redux
    바질
    Babel
    영어회화
    ReactNative
    프로그래머스
    ChatGPT
    타일러영어
    리얼클래스
    바질 키우기
    Docker
    네트워크
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
[Next.js] Redirect & Rewrite
상단으로

티스토리툴바