[NextJS] Fetching Data & Redirect & Rewrite (API Key 숨기기)

Fetching Data

 

Redirection

next.config.js의 nextConfig에 아래의 코드를 추가한다

  async redirects() {
    return [
      {
        source: "/contact", // user가 source로 이동한다면
        destination: "/form", // 유저를 destination으로 보낸다
        permanent: false,
        // ㄴ redirection이 영구적인지 아닌지에 따라서 
        //    브라우저나 검색엔진이 이 정보를 기억하는지의 여부가 결정된다

      }
    ]
  }

 

그리고 next.config.js를 수정하였기 때문에 터미널에 npm run dev를 다시 입력해준다

그러면 localhost:3000/contact에 접속하였을 때 localhost:3000/form 주소로 redirect 되는 것을 볼 수 있다

** destination에 다른 웹페이지도 지정할 수 있다 

** 주소 뒤에 /:website 추가하여 지정했을 때 : ex. blog/:website면 blog/에 해당하는 url을 포함 (/blog/123, /blog/777)

** 주소 뒤에 /:website* 추가하여 지정했을 때 : ex. blog/:website*면 blog/에 해당하는 모든 url을 포함 (/blog/123/comments/#12)

** redirect를 하나 더 만들고 싶으면 배열 안에 return [ {  },{  },{  } ] 이렇게 추가하면 된다

 

Rewrite

rewrite는 user을 redirect시키긴 하지만 url을 변화하진 않는다

이 Rewrite 기능은 fetch할 때 API를 숨길 수 있도록 한다

 

API Key 숨기기

먼저 여기에서 추가했던 API Key를 잘라내고 fetch하는 url을 `/api/movies`로 수정한다

그리고 잘라낸 API Key를 위에 추가하고 next.config.js > nextConfig > rewrites에 아래와 같이 추가한다

index.js

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

export default function Home() {
  const [movies, setMovies] = useState([]);
  useEffect(() => {
    (async() => {
      const { results } = await(await fetch(`/api/movies`)).json();
      setMovies(results);
      console.log(results);
    })()
  },[])
  return (
    <div id="movie_content">
			....
    </div>
  )
}

 

next.config.js

/** @type {import('next').NextConfig} */

const API_KEY = `a82------------e0`;

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

module.exports = nextConfig

 

그리고 API Key를 더 꽁꽁 숨기고 싶다면 next.config.js의 API_KEY를 다음과 같이 작성하고

  const API_KEY = process.env.API_KEY;

 

.env 파일을 생성하여 그 안에 API_KEY를 작성한다

.env

API_KEY = a82------------e0