[Next.js] api키 숨기기 / redirect / rewrite

api 주소나 api key를 숨겨주고 싶을 때 사용하는 방법을 알아보자

 

// index.js

const API_KEY = "...";

export default function Home() {
  const [movies, setMovies] = useState([]);
  useEffect(() => {
    (async () => {
      const { results } = await (await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`)).json();
      setMovies(results);
      console.log(results);
    })();
  }, []);

개발자 모드에서 network 탭으로 들어가 확인을 해보면 api키가 그대로 나오는 것을 확인할 수 있다. 

 

api키가 다른사람들에게 보이게 된다면 악용이 될 수 있기 때문에 안 보이게 해 보자

 

Rewrites

redirect 시키지만 url은 변하지 않는다

실제 url은 destination이지만 보이는 url은  source그대로 보여준다. 

// next.config.js

const API_KEY = "...";

const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: "/api/movie",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};

module.exports = nextConfig;

 

// index.js

export default function Home() {
  const [movies, setMovies] = useState([]);
  useEffect(() => {
    (async () => {
      const { results } = await (await fetch(`/api/movie`)).json();
      setMovies(results);
      console.log(results);
    })();
  }, []);

 

 

다른 방법으로는 아래 게시물에서 설명되어 있는것 처럼 .env 파일을 활용하여 진행할 수 있다.

https://dkfma6033.tistory.com/160?category=1248417 

.env 파일을 통한 환경변수 관리하기

 

 

Redirects

source의 URL을 destination으로 바꿔서 연결해준다.

const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
      //sorce찾아 destination으로 redirects 시켜준다
        source: "/old-blog/:path*",
        destination: "/new-blog/:path*",
        permanent: false,  // 검색엔진이 이 정보를 기억하는지에 대한 여부
      },
    ];
  },
};

 

url을 이렇게 입력한 상태에서 엔터를 치면 아래처럼 바뀐다