// next.config.js

// .env에서 API_KEY 가져오기
const API_KEY = process.env.API_KEY;

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = {
  nextConfig,
  // redirect 하는 방법
  async redirects() {
    return [
      {
        // 입력 주소
        source: '/contact',
        // 이동할 주소. 일반 주소를 원하면 http부터 시작
        destination: '/form',
        // true면 영구적으로 cache, false면 일시적이고 cache 없음
        permanent: false,
      },
      {
        // :path는 url파라미터, *는 뒤에 어떤 문자열이든 catch함
        source: '/old-blog/:path*',
        // 위 주소에서 old-blog만 new로 바뀌고 뒤는 같음
        destination: '/new-blog/:path*',
        permanent: false,
      }
    ]
  },
  // 숨기고 싶은 정보(API KEY 등) 가리기
  async rewrites() {
    return [
      {
        // 겉으로 보여지는 rul
        // 아래 주소로 접속 시 destination에 있는 정보 그대로 보여줌
        source: '/api/movies',
        // 숨기고 싶은 url
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
      }
    ]
  }
}

// index.js

import { useEffect, useState } from "react";
import Seo from "./Seo"

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

  useEffect(() => {
    (async () => {
      // fetch를 /api/movies로 변경
      const {results} = await (await fetch('/api/movies')).json();

      setMovies(results);
    })();
  }, []);

  return (
    <div className="container">
      <Seo title='Home' />
      {!movies && <h4>Loading...</h4>}
      {movies?.map(movie => (
        <div className="movie" key={movie.id}>
          <img src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} />
          <h4>{movie.original_title}</h4>
        </div>))
      }
      <style jsx> {`
        .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          padding: 20px;
          gap: 20px;
        }
        .movie img {
          max-width: 100%;
          border-radius: 12px;
          transition: transform 0.2s ease-in-out;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        }
        .movie:hover img {
          transform: scale(1.05) translateY(-10px);
        }
        .movie h4 {
          font-size: 18px;
          text-align: center;
        }
      `}
      </style>
    </div>
  )
}

// .env

API_KEY = 숨기고 싶은 정보

redirect

• async redirects를 이용해 특정 주소에 접속했을 때(source) 다른 주소로 이동(destination)
• 여러개를 설정하고 싶으면 { }를 이용해 여러개 만들기
• :path는 url 파라미터처럼 설정 가능
• *을 이용해 뒤에 어떤 문장이 오든 catch 가능
• 위에서 /comtact 접속 시 /form으로 이동, /old-blog/132/and/23 접속 시 /new-blog/132/and/23으로 이동
• permanent는 영구적으로 cache 가질지 여부 설정

rewrite

• 중요 정보 가릴 수 있는 기능
• source: 겉으로 보여지는 url. 해당 주소로 접속 시 destination의 정보 그대로 보여줌
• destination: 숨기고 싶은 url
• rewrite 설정 후 개발자 도구 network로 가면 숨기고 싶은 정보인 API_KEY가 사라지고 /api/movies로 나옴

.env

• 숨기고 싶은 정보 두는 곳
• gitignore에 .env 추가하여 github와 연동 끊기
• process.env.XXX
  • 다른 파일에서 env 파일에 있는 정보 가져오는 방법