[NextJS] Fetching Data

Fetching Data

Tips:

<img>대신에 <Image>를 갖고있다. 하지만 이번강의에서는 다루지않는다.
https://nextjs.org/docs/pages/api-reference/components/image

Movie DB에서 데이터 받아오기

• 사용할 DB
  https://www.themoviedb.org/

• pages/index.js

  import { useEffect, useState } from "react";
  import Seo from "../components/Seo";
  
  const API_KEY = "apikeyhere";
  
  export default function Home() {
    const [movies, setMovies] = useState();
    useEffect(() => {
      (async () => {
        const { results } = await (
          await fetch(
            `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
          )
        ).json();
        setMovies(results);
      })();
    }, []);
    return (
      <div>
        <Seo title="Home" />
        {!movies && <h4>Loading...</h4>}
        {movies?.map((movie) => (
          <div key={movie.id}>
            <h4>{movie.original_title}</h4>
          </div>
        ))}
      </div>
    );
  }

이렇게 간단하게 구현하는구나...
useState([])이렇게 빈배열로 선언하거나 movies?.map()을 해야 undefined에 map을 사용해서 에러가 발생하는 일이 없다.
하지만 빈배열로 선언하는 경우 어쨌든 movies가 존재하니까

  {!movies && <h4>Loading...</h4>}

이걸로 로딩처리를 하기위해서 일부러 선언자체를 안하는 것 같다.

CSS는 노마드코더 강의에서 올려준 그대로를 사용했다.

Redirect and Rewrite

Next에서는 redirect와 rewrite를 제공하며 이를 통해서 API KEY 숨길수있습니다.
redirect와 rewrite는 next.config.js 파일에 작성하며

**파일을 수정하면 반드시 서버를 껐다가 켜야 적용됩니다.

Redirect

• next.config.js

module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/old-blog/:path*",
        destination: "/new-sexy-blog/:path*",
        permanent: false,
      },
  	  // 여러개 설정하고싶으면 여기에 똑같이 더 만들면된다.
    ];
  },
}

이 site 내부나 외부 어디로든 redirect할수있습니다.
permanant를 true로 설정하면 브라우저나 검색엔진이 이 정보를 기억합니다.

Rewrite로 API KEY 숨기기

redirect는 path에 표시되어서 url이 바뀌는걸 유저도 알게됩니다.
하지만 rewrite는 유저에게 보이지않습니다.

• next.config.js

  const API_KEY = process.env.API_KEY;

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

• pages/index.js

  ...
  async () => {
      const { results } = await (await fetch(`/api/movies`)).json();
  ...

• .gitignore

  ...
  
  .env

이렇게하면 개발자도구의 네트워크 탭에서 대체된 url인 /api/movies가 표시되어서 API KEY를 숨길수있습니다.