Next.js 13 - Redirect & Rewrite(API key 숨기기)

✏️ Redirect

Next.js는 Redirection을 허용합니다. Redirection을 설정하기 위해서 next.config.js 파일에 아래와 같은 구조로 작성해줄 수 있습니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: "/contact",
        destination: "/form",
        permanent: false
      }
    ]
  }
}

module.exports = nextConfig

• source를 찾습니다. (유저가 이동한 경로 = contact)
• destination으로 보내줄 경로를 지정합니다. (실제로 유저를 이동시킬 경로 = form)
• permanent가 영구적인지 아닌지에 따라 브라우저나 검색엔진이 해당 정보를 기억하는지 여부가 결정됩니다.

destination을 설정할 때 자신이 만든 프로젝트 웹 사이트 안의 경로로 이동도 가능하고, 프로젝트 외부의 url 경로도 지정해줄 수 있습니다.

📌 pattern matching

Redirect 기능을 사용할 때 패턴 매칭도 지원됩니다. 패턴 매칭이란 아래 코드와 같이 /old-post/:path 경로에 접근하게되면 /new-post/:path 로 이동시켜주게 되는데 이때 path의 값은 동일한 값이 들어가도록 매칭되는 것을 말합니다.

/old-post/1234 >>> /new-post/1234

/** @type {import('next').NextConfig} */
const nextConfig = {
  async redirects() {
    return [
      {
        source: "/old-post/:path",
        destination: "/new-post/:path",
        permanent: false,
      },
    ];
  },
};

module.exports = nextConfig;

path 뒤에 * 기호를 붙여주게 되면 뒤에 붙는 모든 경로도 함께 매칭됩니다.

/old-post/1234/comments/567 >>> /new-post/1234/comments/567

✏️ Rewrite

Rewrite는 Redirect와 마찬가지로 유저를 다른 경로로 이동시켜주지만 Redirect에서는 유저가 url의 경로가 바뀌는 것을 직접 확인할 수 있었다면, Rewrite는 url 주소가 바뀌는 것을 확인할 수 없다는 차이점이 있습니다.

위와 같은 특징을 이용하여 아래 코드 예시와 같이 API keys를 숨겨줄 수 있습니다.

export default function Home() {
  const [movies, setMovies] = useState();
  useEffect(() => {
    (async () => {
      🔥 fetch에 url과 API key정보가 들어있어 외부에서 확인이 가능했으나 
     	 rewrite 경로로 지정해주어 정보를 숨김 🔥
      const { results } = await (await fetch(`/api/movies`)).json();
      setMovies(results);
    })();
  }, []);

/** @type {import('next').NextConfig} */
const API_KEY = "~~~";

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

module.exports = nextConfig;