[노마드코더]Next.js #3 redirects, rewrites(API 키 숨기기)

redirect

next.config.js
구 페이지로 접속하면 새로만든 페이지로 이동하는 코드를 만들 수 있다.
마지막에 애스터리스크를 붙여주면 /old-blog/1232/comment/12 이런 주소까지 redirect시켜 줄 수 있다.

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

module.exports = nextConfig;

rewrites

rewrites는 redirects와 다르게 url은 변경시키지 않는다!
그래서 주소창에 /api/movies를 쳐보면 masking해준 값이 그대로 나온다.
(redirects였다면 url도 변했을 것이다.)

index.jsx

import { useState, useEffect } from 'react';
import axios from 'axios';
import Seo from '../components/Seo';

export default function Home() {
  const [movies, setMovies] = useState();

  const getMovies = async () => {
    const { data } = await axios.get(`api/movies`); // 📌
    setMovies(data.results);
  };

  useEffect(() => {
    getMovies();
  }, []);

  if (!movies) return '로딩중';

  return (
    <div>
      <Seo title={'Home'} />
      <ul>
        {movies.map(movie => (
          <li key={movie.id}>
            <h1>{movie.title}</h1>
            <p>{movie.overview}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

.env

API_KEY = 9c1da7e439a125227bcd28cdc4e7b02a

next.config.js

/** @type {import('next').NextConfig} */
const API_KEY = process.env.API_KEY;
const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/old-blog/:path',
        destination: '/new-blog/:path',
        permanent: false,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: '/api/movies',
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ];
  },
};

module.exports = nextConfig;