[ TIL ] Next.js redirects와 rewrites로 API key 숨기기
✍ API KEY
개요
API 키(KEY) 는 인증(Authentication) 방식의 한 종류이다.
API 키 이외의 인증방식으로는 API 토큰(Token) 방식이 있다.
특징
API 키는 특정 사용자만 알 수 있는 문자열이다.
개발자는 API 제공사의 페이지에서 키를 발급받아 호출 시 API 키를 이용하여 호출한다.
단점
모든 클라이언트가 같은 API 키를 공유하기 때문에 보안에 취약할 수 있다.
✍ next.config.js
redirects와 rewrites는 둘 다 루트 디렉토리에 있는 next.config.js에서 사용할 수 있는 함수이다.
next.config.js는 설정 파일로 클라이언트의 접근 경로를 우회하여 전송해주는 방법을 명시 / 설정하는 파일이다.
📌 redirects
다른 페이지로 사용자를 이동시키고 싶으면 사용할 수 있는 함수다.
<next.config.js>
/** @type {import('next').NextConfig} */
const API_KEY = process.env.NEXT_PUBLIC_API_KEY;
const nextConfig = {
reactStrictMode: true,
async redirects() {
return [
{
source: "/old-blog/:path*", // ✨ 1
destination: "/new-sexy-blog/:path*", // ✨ 2
permanent: false, // ✨ 3
},
];
},
};✨ : 봐야 할 곳 표시
STEP
1. source : source를 찾는다
2. destination : 유저가 향하게 될 목적지 경로를 설정한다.
3. permanent : redirection이 영구적인지 아닌지 여부를 결정한다.
- 영구적일 경우 브라우저나 검색엔진이 이 정보를 저장할 수 있다.
4. terminal에서 서버를 재시작하라는 알림을 확인한다.
- > Found a change in next.config.js. Restart the server to see the changes in effect.
5. 재시작한다
특징
우리의 웹페이지 내부든 외부든 redirect 할 수 있다.
유저가 URL이 변하는 것을 확인할 수 있다.
📌 rewrites
다른 페이지로 사용자를 이동시키고 싶으면 사용할 수 있는 비동기 함수다
source와 destination이 들어있는 배열을 return 한다.
- source: String - is the incoming request path pattern.
- destination: String is the path you want to route to.
- basePath: false or undefined - if false the basePath won't be included when matching, can be used for external rewrites only.
- locale: false or undefined - whether the locale should not be included when matching.
- has is an array of has objects with the type, key and value properties.
<next.config.js>
/** @type {import('next').NextConfig} */
const API_KEY = process.env.NEXT_PUBLIC_API_KEY;
const nextConfig = {
reactStrictMode: true,
async rewrites() { // ✨ 1
return [
{
source: "/api/movies", // ✨ 2
destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`, // ✨ 3
},
{
source: "/api/movies/:id", // ✨ 2
destination: `https://api.themoviedb.org/3/movie/:id?api_key=${API_KEY}`, // ✨ 3
},
];
},
};
module.exports = nextConfig;✨ : 봐야 할 곳 표시
STEP
1. source : source를 찾는다
2. destination : 유저가 향하게 될 목적지 경로를 설정한다.
3. terminal에서 서버를 재시작하라는 알림을 확인한다.
- > Found a change in next.config.js. Restart the server to see the changes in effect.
4. 재시작한다
특징
우리의 웹페이지 내부든 외부든 redirect 할 수 있다.
유저가 URL의 변화를 확인할 수 없다.
개발자가 의도한 경로로만 접근가능하다.
✍ 숨긴 데이터 가져오기
<공식문서>
Data fetching in Next.js allows you to render your content in different ways, depending on your application's use case. These include pre-rendering with
Server-side Rendering
or
Static Generation
, and updating or creating content at runtime with
Incremental Static Regeneration
정적데이터를 가져오는지 / 페이지 요청시에 렌더되는 데이터인지에 따라
getStaticProps
- 빌드시 고정. 수정 불가능
getStaticPath
- 동적라우팅 + getStaticProps를 원할 때 사용
getServerSideProps
- 페이지 요청시마다 데이터를 가져온다.
로 구분할 수 있다.
예시
<index.js> (원하는 component에 추가로 넣어준다)
export async function getServerSideProps() { // ✨ 1
const { results } = await (
await fetch(`http://localhost:3000/api/movies`)
).json(); // ✨ 2
return {
props: {
results, // ✨ 3
},
};
}// 1. async는 하고 싶으면 하고 말고싶으면 말면 됨
// 2. rewrites로 연결된 source를 fetch시킨다
// 3. 이 props에 { results }값이 들어간다. 그리고 이 results는 props로 전달된다.
+ return하는 object는 props라고 불리는 key 혹은 property를 가진다.
<index.js>
export default function Home({ results }) {index.js에 results가 전달된다. == 데이터가 전달된다.
특징
- 이 자리에 어떤 코드를 짜든 그 코드는 server 쪽에서만 작동한다. (backEnd에서 실행됨)
- 이를 이용하여 API key를 숨길 수도 있다
- 무엇을 return하던지, 그 값을 props로서 page에 주게 된다
- fetch하는 주소는 서버에서 작동할 수 있어야 하기 때문에 http부터 추가해줘야 한다
🙇♀️ SUPER THANKS
https://nomadcoders.co/nextjs-fundamentals/lobby
https://nextjs.org/docs/api-reference/next.config.js/rewrites
https://nextjs.org/docs/basic-features/data-fetching/overview#getstaticprops-static-generation