Next.js 시작하기(마무리 )

짜스의 하루 ·2024년 7월 26일

코드 챌린지

아래 3개의 API를 이용해서 credits, providers, similar 페이지 추가하기
/movies/:id/credits
/movies/:id/providers
/movies/:id/similar

우선 /movies/:id/credits, providers, similar를 하기 위해서
(movies)/movies/[id]/에 credits, providers, similar 폴더를 만들고 각각의 page.tsx에서 api를 fetch로 불러오는 작업을 했다!

credits

import { API_URL } from '../../../../api-config';
import { IParams } from '../page';
import styles from '../../../../../styles/movie-credit.module.css';

async function getCredit(id: string) {
  return await fetch(`${API_URL}/${id}/credits`).then((response) =>
    response.json()
  );
}

export default async function CreditPage({ params: { id } }: IParams) {
  const credits = await getCredit(id);
  return (
    <>
      <div className={styles.container}>
        {credits.map((credit) => (
          <div key={credit.id} className={styles.imgContainer}>
            <img src={credit.profile_path} alt={credit.name} />
            <h5>{credit.name}</h5>
            <p>Character: {credit.character}</p>
          </div>
        ))}
      </div>
    </>
  );
}

providers

import { API_URL } from '../../../../api-config';
import { IParams } from '../page';
import styles from '../../../../../styles/movie-provider.module.css';

async function getMovieDetail(id: string) {
  return await fetch(`${API_URL}/${id}`).then((response) => response.json());
}

export default async function ProviderPage({ params: { id } }: IParams) {
  const movies = await getMovieDetail(id);
  return (
    <>
      <div className={styles.container}>
        <h1>production_companies</h1>
        {movies.production_companies.map((company) => (
          <div key={company.id} className={styles.providerContainer}>
            <img src={company.logo_path} alt={company.name} />
            <h4>{company.name}</h4>
          </div>
        ))}
      </div>
    </>
  );
}

similar

import { API_URL } from '../../../../api-config';
import { IParams } from '../page';
import styles from '../../../../../styles/movie-similar.module.css';

async function getSimilar(id: string) {
  return await fetch(`${API_URL}/${id}/similar`).then((response) =>
    response.json()
  );
}

function formatDate(dateString) {
  const [year, month, day] = dateString.split('-');
  return `${year}.${month}.${day}`;
}

export default async function SimilarPage({ params: { id } }: IParams) {
  const similars = await getSimilar(id);

  return (
    <>
      <div className={styles.container}>
        {similars.map((similar) => (
          <div key={similar.id} className={styles.imgContainer}>
            <img src={similar.poster_path} alt={similar.title} />
            <h4>{similar.title}</h4>
            <div className={styles.subContainer}>
              <h5>⭐️ {similar.vote_average.toFixed(1)}</h5>
              <h5>🗓️ {formatDate(similar.release_date)}</h5>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

이렇게 코드를 작성했다.
크게 어려운 부분은 없고, async 로 데이터를 불러온 뒤, 데이터를 받아서 화면에 뿌려준게 다이다!

각각의 css는 styles 폴더안에 정리를 해두었다
(css 속성은 간단하기 떄문에 따로 설명하지 않겠다)

nav바 수정

원래 nav 바는 이렇게 구성되어 있었지만, 사실 About Us는 사용하지 않아서 Home과 back 버튼을 생성해보려고 한다.

'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import styles from '../styles/navigation.module.css';
import { useRouter } from 'next/navigation';

export default function Navigation() {
  const path = usePathname();
  const router = useRouter();

  const goBack = () => {
    router.back();
  };

  console.log(path);
  return (
    <>
      <nav className={styles.nav}>
        <ul>
          <li>
            <Link href="/">Home</Link>
            {path === '/' ? '🏠' : null}
          </li>
          <li>
            <button className={styles.btn} onClick={goBack}>
              Back
            </button>
          </li>
        </ul>
      </nav>
    </>
  );
}

const router = useRouter(); :

useRouter는 Next.js의 훅(hook)으로, 라우터(router) 객체를 반환한다.
이 라우터 객체는 현재 페이지의 경로, 쿼리 파라미터, 그리고 라우팅 관련 함수들을 포함한다.
const router = useRouter() 는 router 변수를 선언하고, 여기에 useRouter 훅을 사용하여 얻은 라우터 객체를 할당한다.

const goBack = () => { router.back(); }:

router.back() 은 라우터 객체의 메서드로, 브라우저의 뒤로 가기 기능과 동일하게 동작한다. 사용자를 이전 페이지로 이동시키게 된다.

이렇게 back 버튼을 만들어 보았다. 굿잡!

movie-nav바

위에서 만든 nav바는 페이지 모두에 적용되도록 RootLayout에 적용시켜두었다.
이제 영화를 하나 선택했을 때, 위에서 만들었던 credits, providers, similar, video로 이동할 수 있도록하는 nav바를 하나 생성하면 좋을 것 같았다

디자인은 이렇게 만들어 보았다.

import Link from 'next/link';
import styles from '../styles/movie-nav.module.css';

export default function MovieNavigation({ id }: { id: string }) {
  return (
    <>
      <nav className={styles.nav}>
        <ul>
          <li>
            <Link href={`/movies/${id}`}>movie</Link>
          </li>
          <li>
            <Link href={`/movies/${id}/credits`}>credits</Link>
          </li>
          <li>
            <Link href={`/movies/${id}/providers`}>providers</Link>
          </li>
          <li>
            <Link href={`/movies/${id}/similar`}>similar</Link>
          </li>
          <li>
            <Link href={`/movies/${id}/videos`}>video</Link>
          </li>
        </ul>
      </nav>
    </>
  );
}