노마드 Next JS 강의 듣다가 API KEY 비공개 처리 방식 부분을 듣고있었는데, Redirect 세팅 방법에 대해 배게 되면서 메모해놓기로 마음 먹었다.
Redirect VS Rewrite
- Redirect는
세팅한 경로에 맞게 변경되고 도메인에 표시되어 클라이언트가 확인 가능
- Rewrite는
세팅한 경로에 맞게 변경되지만 도메인에 표시가 되어있지않아 클라이언트가 확인 불가능
1. Redirect
1_ next.config.js
next.config.js 파일을 오픈한다.
2_ Redifrect 설정
- next.config.js
//1) test1 경로 들어가면 네이버로 이동
async redirects() {
return [
{
source: "/test1",
destination: "https://www.naver.com",
permanent: false,
}
]
}
//2) test2 경로 들어가면 form경로로 이동
async redirects() {
return [
{
source: "/test2",
destination: "/form",
permanent: false,
}
]
}
* 수정했으니 적용하려면 터미널을 재실행 시켜서 서버를 재시작한다.
3_ Pattern Matching - 경로 매칭
- 이전 경로를 입력했을 때, 새로운 링크로 리다이렉트 방법
- next.config.js
async redirects() {
return [
{
source: "/old-link/:path",
destination: "/new-link/:path",
permanent: false,
}
]
}
- before
localhost:3000/old-link/12345
-after
localhost:3000/new-link/12345
경로뒤에 *넣을경우 ex) ~/:path*
- next.config.js
async redirects() {
return [
{
source: "/old-link/:path*",
destination: "/new-link/:path*",
permanent: false,
}
]
}
별표를 붙여주면 모든걸 catch 가능하다.
- before
localhost:3000/old-link/12345/test/6789
-after
localhost:3000/new-link/12345 /test/6789
2. Rewrite
API같은 key값을 컴포넌트에 넣으면 네트워킹 체크했을 때 공개적으로 공유된다.
이를 막기위해 Rewrite 기능을 사용하여 클라이언트가 알 수 없게 설정.
- next.config.js
API_KEY="abcd1234"
async rewriets() {
return [
{
source: "/api/data",
destination: `https://api.test.com/data?api_key=${API_KEY}`,
}
]
}
API 데이터 받아오는 fetch 장소에 위에 설정한 ''/api/data"를 적용.
- component files
(
async () => {
const data = await fetch(`api/data`).json();
}
)()
* 위에처럼 next.config.js 파일에도 API_KEY 값을 넣고싶지 않다면,
.env 파일을 추가하여 환경 설정.
- .env 파일
API_KEY=abcd1234
// 따옴표(") 없음
- next.config.js
// API_KEY 보안 방법
const API_KEY=process.env.API_KEY;
async rewriets() {
return [
{
source: "/api/data",
destination: `https://api.test.com/data?api_key=${API_KEY}`,
}
]
}
★ .gitignore 파일에 .env파일이 꼭 포함되도록 해야함!
Why?
- git으로 push할때 같이 안올라가도록 적용하기 위해서(정보를 비공개로 유지가능).
글이 유용했다면
광고 한번씩 눌러주시면 티클모아 커피 맛있게 드링킹하겠습니다.
감사하겠습니다 ♥