[TIL] Next.js 13 - getStaticProps, getStaticPaths (feat. 12버전에서의 getServerSideProps)

💡 TIL 20230818 - Next.js 13 - getStaticProps, getStaticPaths (feat. 12버전에서의 getServerSideProps)

---

1. 12버전 : getServerSideProps

Next.js 12버전에서는 Data Fetching시 pre-rendering 하려면 getServerSideProps 함수를 사용했었다.

 

1) getServerSideProps 코드 예시

import Seo from "../../components/Seo";
import { useRouter } from "next/router";

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

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

노마드코더 Next.js 무료 강의를 들으면서, 강의에서 진행했던 Next.js 12버전 코드이다. 위 코드는 자바스크립트로 작성됐으므로, 이 코드를 타입스크립트+Next.js 13버전으로 수정해서 작성해보았다.

 

 

---

2. 13버전 : getStaticProps, getStaticPaths

Next.js 13버전에서는 getStaticProps, getStaticPaths 함수를 사용하여 Fetching data를 pre-render 할 수 있다.

1) 13버전으로 리팩토링

위의 자바스크립트+12버전 코드에서 타입스크립트+13버전으로 수정한 코드는 아래와 같다.

import Seo from "@/components/Seo";
import { GetStaticPropsContext } from "next";
// import { useRouter } from "next/router";
import React from "react";

interface DetailProps {
  params: [string, string];
}

const Detail = ({ params }: DetailProps) => {
  // router.query를 보면 파일명에서 설정해준 movieId가 key값으로 들어가있음
  const [title, id] = params || [];
  return (
      <div>
        <Seo title={title} />
        <h4>{title}</h4>
      </div>
  );
};

export default Detail;

interface ParamsProps {
  params: {
    params: GetStaticPropsContext
  }
};

// 1. URL에 들어있는 영화제목을 사용하여 SEO 최적화
// 2. 유저가 접속하기 전에 <title></title> 제목을 변경해서 보여주고 싶을 때
export const getStaticProps = async ({params: { params }}: ParamsProps) => {
  return {
      props: { params },
  };
};

export const getStaticPaths = async () => {
  return {
    paths: [], // 동적 경로가 없으므로 빈 배열로 설정
    fallback: 'blocking', // 다른 경로로의 접근은 서버 사이드에서 대기
  };
};

 

 

---

참고 사이트

노마드코더 - NextJS 시작하기