Next.js 12 - public dir, API key 숨기기(redirects, rewrites)

Next.js

 

⚫ Public directory

---

 - Next.js를 이용하면 public 파일들을 아주 쉽게 다룰 수 있다.

  public 파일들을 public 디렉토리에 넣어주기만 하면 public 디렉토리 안에 있는 파일들을 쉽게 찾아올 수 있다.

 

<img src="../public/vercel.svg"/> -> 이렇게 할 필요 없다.

<img src="/vercel.svg"/> -> Next.js는 "/" 절대경로를 자동으로 "/public"에 매핑한다. 그러므로 "/public"과 같은 위치에 있는 폴더들에 접근하고 싶을 때는 상대 경로를 사용해야 한다.

 

⚫ Redirects

---

- API key를 숨기지 않는다.

 

[next.config.js]

const API_KEY = process.env.API_KEY;

module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/old-blog/:path*",
        destination: "/new-sexy-blog/:path*",
        permanent: false,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};

permanent: 이 redirection이 permanent(영구적)인지 아닌지에 따라서, 브라우저나 검색엔진이 이 정보를 기억하는지 여부가 결정된다.

 

- 웹 사이트의 내부 url 뿐만 아니라 외부 사이트의 url로도 이동할 수 있다.

- pattern matching 또한 지원한다.

  source: "/old-blog/:path"

  destination: "/new-sexy-blog/:path" 라고 적으면 :path 부분은 유지한 채, 새로운 주소로 이동시켜준다.

  ("/old-blog/:path*"로 *을 추가해주면 모든 뒷부분 주소까지 유지한다)

 

⚫ Rewrites

---

[next.config.js]

const API_KEY = process.env.API_KEY;

module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/old-blog/:path*",
        destination: "/new-sexy-blog/:path*",
        permanent: false,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};

- redirects는 url이 바뀌는 걸 볼 수 있지만, rewrites는 유저를 redirect 시키기는 하지만, url은 변하지 않는다.

  이 기능을 이용해 "/api/movies" url로 접근하면 API key를 사용해 데이터를 fetch해오는 주소로 rewrites해준다.(.env 활용)