반응형
프로젝트를 진행하다 보면 API를 사용하게 되는 경우가 자주 있다.
그럴 때, API마다 사용하기 위해서 고유한 API KEY를 사는 경우가 있다.
API KEY는 돈 주고 사거나, 사용할 수 있는 할당량이 정해져 있어서 프로젝트를 할 때 숨기는 경우가 대부분이다.
( ex_ .env )
하지만, 웹사이트 내부에서 network 창을 확인해보면 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 |