next.js 내부 next.config.js 파일에서 할 수 있는 일들

next.config.js 파일에서 설정 가능한 것들

next.config.js 는 next.js 프로젝트를 생성하면 자동으로 생성되는 설정파일이다. 이 파일에 내용을 더하는 것으로 다양한 next.js 기능을 이용할 수 있다.

Redirect

Redirect 기능은 A 라는 페이지에 방문하면 자동으로 B 라는 페이지로 이동시켜주는 기능을 말한다.

module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
    ]
  },
}

• next.config.js 에 async redirects() 메서드를 작성하면 redirect 기능을 이용할 수 있다.
• source 는 이용자가 방문할 페이지다.
• destination 은 source 에 방문 시 이동될 페이지이다.
• permanent 는 HTTP 응답 코드 308(true)과 307(false) 중 어떤 것을 제공할지에 대해 선택 가능하다.
  • 307 (Temporary Redirect) 은 임시적으로 해당 페이지가 바뀌었으므로 브라우저에서 캐싱하지 않는다.
  • 308 (Permanent Redirect) 은 영구적으로 해당 페이지가 바뀌었으므로 브라우저에서 캐싱이 가능하다.

왜 Next.js 에서는 307 과 308 응답코드를 쓸까? 전통적으로는 영구적 주소 변경에는 301 (Moved Permanently) 과 302 (Found) 를 사용했는데, 301 상태 코드는 스펙에 맞게 구현하지 않은 경우 HTTP 요청 메서드가 GET 으로 변환되어버리는 문제가 있다. next.js 는 리다이렉트 전 상태코드를 명시적으로 지키기 위해 307 과 308 상태코드를 사용한다.

The request method and the body will not be altered, whereas 301 may incorrectly sometimes be changed to a GET method. from MDN Document

다른 도메인의 웹사이트로 이동하기

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/contact",
        destination: "https://nomadcoders.co",
        // 브라우저나 검색엔진이 이 정보를 기억하는지 결정한다.
        permanent: false,
      },
    ];
  },
};

module.exports = nextConfig;

위와 같이 작성 시에 다른 도메인의 웹사이트로 이동도 가능하다.

패턴 매칭하기 1: :path

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/blog/:path",
        destination: "/new_blog/:path",
        // 브라우저나 검색엔진이 이 정보를 기억하는지 결정한다.
        permanent: false,
      },
    ];
  },
};

module.exports = nextConfig;

위와 같이 :path 라는 패턴 매칭을 통해 /blog/... URL 에 접근 시에 /new_blog/... 과 같은 경로로 이동시켜줄 수도 있다.

패턴 매칭하기 2: *

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/blog/:path*",
        destination: "/new_blog/:path*",
        // 브라우저나 검색엔진이 이 정보를 기억하는지 결정한다.
        permanent: false,
      },
    ];
  },
};

module.exports = nextConfig;

• /blog/:path 이후 경로까지 매칭해준다.
• http://localhost:3000/blog/333/comments/12312323 경로로 접근하면, http://localhost:3000/new_blog/333/comments/12312323 로 안내해준다.

Rewrites

요청 경로를 다른 목적지 경로로 매핑할 수 있게 해준다. Rewrites 는 URL 프록시처럼 동작하고 목적지 경로를 마스킹하여 사이트에서 위치가 변화하지 않은 것으로 보이게 한다. 반대로, Redirect 는 새로운 페이지로 이동하고 URL 의 변화를 그대로 보여준다.

Redirect 기능과 비슷하지만, 이용자의 브라우저 상에서 URL 의 변화가 보이지 않는다.

예제 1: API 키 숨기기

const API_KEY = "a9d36e8de716b2445367dc38aba22d5a";

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

module.exports = nextConfig;

• 위와 같이 rewrites() 를 정의해두면, 통신상에서 API 키를 숨길 수 있다.
• 크롬 네트워크 탭으로 확인해보면 /api/movies 밖에 보이지 않는다.
• redirect 와 동일하게 source 와 destination 프로퍼티가 존재한다.

최종적으로 .env 에 저장 후 const API_KEY = process.env.API_KEY; 와 같은 형식으로 API 키를 불러오게 되면 소스코드 상에서도 해당 API 키는 볼 수 없게 된다.

레퍼런스

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/308
• https://nextjs.org/docs/api-reference/next.config.js/redirects