개발공부/Next.js

getStaticPaths,getStaticProps

soOoOnger 2022. 11. 12. 16:19
export async function getStaticPaths() {
  // 동적페이지에 필요한 함수이고 어떤 동적 매개변수 밸류의 어떤 페이지가 프리 제너레이트 되어야 하는지 말해준다.
  // 모든 페이지를 실행한다. 따라서 모든 미트 업 id 밸류가 데이터를 패치하고 미트업의 프랍을 리턴하도록 한다. 
  return {
    fallback: false, // 특정 path를 정의하는 것
    paths: [
      {
        params: {
          meetupId: "1",
        },
      },
      {
        params: {
          meetupId: "2",
        },
      },
    ],
  };
}

export async function getStaticProps(context) {
  // 라우터는 컴포넌트 함수에서만 사용이 가능하다.
  // 여기서는 리액트 훅을 사용할 수 없다.
  // getStactic,getServerSideProps를 사용하지 않는다면 getStaticProps 사용해야한다.

  const meetupId = context.params.meetupId;

  return {
    props: {
      meetupData: {
        image:
          "https://i.pinimg.com/564x/dd/2a/49/dd2a496c89e10478823e532a41b29adf.jpg",
        id: meetupId,
        title: "첫모임",
        address: "강서구",
        description: "재밌겠다~~",
      },
    },
  };
}