[React/NextJS] NextJS 시작하기 (2) - fetch, redirect/rewrite, router

NextJS

NextJS  시작하기

Fetch Data

API통신을 통해서 무료 movie data 사이트로 부터 정보를 json 값으로 얻어 온다. 얻어온 값으 각각의 카드 형태로 만들어 보여주는 예제다.

CSR(Client-Side-Rendering) 버전

const API_KEY = "10923b261ba94d897ac6b81148314a3f";

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" />
      <h1 className="active">Hello</h1>
      {!movies && <h4>Loading...</h4>}
      {movies?.map((movie) => (
        <div key={movie.id}>
          <h4>{movie.original_title}</h4>
        </div>
      ))}
    </div>
  );
}

await fetch()하여 가져온 결과를 state에 저장하고, 가져오는 동안 값이 없는 경우엔 'Loading...'을 보여주고 있는 경우엔 해당 값으로 영화 제목들을 보여준다.

SSR(Server-Side-Rendering) 버전

export default function Home({ results }) {
    return (
      <div className="container">
        <Seo title="Home" />
        {results?.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>))}
      </div>
    );
  }
  
export async function getServerSideProps() {
  const { results } = await (
    await fetch(`http://localhost:3000/api/movies`)
  ).json();
  return {
    props: {
      results,
    },
  };
}

getServerSideProps()를 통해 서버쪽에서 먼저 fetch를 시도하여 결과 값을 Home에 props로 전달한다. 결과 값이 무조건 들어온다는 가정 하에 영화 제목들이 출력된다. 

---

Redirect/Rewrite

next.config.js 라는 파일 내에 Redirect와 Rewrite 에 대해 정의할 수 있다.

Redirect 는 A 경로라고 입력했을 경우 B 경로로 넘겨 B 페이지를 보여주게 되는 기능이다. Rewrite는 원래 B라고 하는 것을 A라고 명명하여 alias 처럼 사용할 수 있다. 아래 코드는 redirect/rewrite의 예제다.

module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/old-blog/:path*",
        destination: "/new-sexy-blog/:path*",
        permanent: false,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: "/api/movies",
        destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
      {
        source: "/api/movies/:id",
        destination: `https://api.themoviedb.org/3/movie/:id?api_key=${API_KEY}`,
      }
    ];
  },
};

//서버에서만 실행되는 코드
export async function getServerSideProps() {
  const { results } = await (
    await fetch(
      `http://localhost:3000/api/movies`
    )
  ).json();
  return {
    props : {
      results
    },
  };
}

redirect시 old-blog페이지를 입력한 경우 new-blog 페이지로 이동하게 되며, rewrites시 원래는 destination 경로를 호출하는거지만 source 경로 라고 입력해서 호출하겠다는 뜻이다.  redirect를 사용하면 이전에 사용하던 페이지를 새 페이지로 넘기거나 특정 이벤트 시 다른 페이지로 넘어가도록 도을 수 있으며, rewrite는 긴 URL도 짧고 rest api 방식으로도 사용 가능하도록 만들 수 있다.

---

Router 라우팅

우리는 지난 시간에 pages 폴더 내의 js 파일들을 이용하여 쉽게 폴더 구조로 라우팅을 할 수 있으며, 이 폴더 구조에 맞게 url을 작성하면 해당 페이지로 넘어가는 걸 배웠다.

2022.09.05 - [개발 Study/Node, js, react] - [React/NextJS] NextJS 시작하기 (1) - NextJS vs ReactJS / CSR vs SSR

[React/NextJS] NextJS 시작하기 (1) - NextJS vs ReactJS / CSR vs SSR

이번에는 해당 페이지에서 값을 여러개 받을 수 있는 dynamic(동적) url을 만들 수 있는 예제를 살펴보자.

page 구조

import {useRouter} from 'next/router';

export default function Detail({ params }) {
    const router = useRouter();
    const [title, id] = params || [];
    console.log(router)
    return (
        <div>
            <h4>
                {title}
            </h4>
        </div>
    );
}

export function getServerSideProps({ params: { params }}) {
    return {
        props : {params},
    };
}

useRouter를 이용해서 현재 페이지가 호출된 경우 router 내의 값들을 알 수 있다. 서버로부터 해당 페이지가 호출되었을 때 뒤에 파라미터로 어떤 값들이 들어오는지 볼 수 있다. 다만 여러 개의 지정되지않은 값을 받는 경우 파일 명을 '[]' 대괄호로 지정하고 앞에 '...'을 넣어줘야한다. '[id].js'는 id라는 값 하나를 받겠다는 뜻이고, '[...params].js'는 params라는 값을 array로 여러개 받겠다는 뜻이다. 

반응형

params와 path

console로 router를 찍어봤을 때, asPath 의 값으로는 /movies/{title}/{id}가 들어갔고 route를 보면 /movies/[...params] 라고 나와있는 걸 볼 수 있다. router로부터 정보를 받기 때문에 새로 고침 시 client에서 값이 없을 수 있으므로 params || [] 빈 Array를 설정해줘야한다.

 

어떻게보면 사용하기 쉽고 어떻게 보면 좀 어려울 수도 있는데 그냥 react 대신 next js로 새 프로젝트를 개발할 거라 앞으로 가는 길이 ㅋㅋ떨리고 기대된다.