• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

Next.js13 에서 getStaticProps 관련해서 질문드립니다!

23.07.04 13:32 작성 조회수 690

1

안녕하세요! 강의 잘보고있습니다 :)

next.js 13 버전으로 create-next-app 으로 설치하여 강의를 듣고있는데요,

섹션1 > getStaticProps 강의내용대로 동일코드를 입력했지만

props로 넘긴 값을 받아오질 못하더라구요.. console.log를 찍어봐도 안넘어와서 문의드립니다ㅠㅠ 아래와같이 입력했고 /app/section1/page.tsx로 만들었습니다.

관련 깃헙소소는 : https://github.com/simjieun/next13 여기에 있습니다!

한번 확인부탁드리겠습니다ㅠㅠ

import { NextPage } from "next";

interface Props {
  second: number;
}

const Example: NextPage<Props> = ({ second }) => {
  return (
    <main>
      <h1>getStaticProps Page</h1>
      <p>{second}</p>
    </main>
  );
};

export default Example;

export async function getStaticProps() {
  const delayInSecond = 2;
  const second = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(Math.random());
    }, delayInSecond * 1000);
  });

  return {
    props: {
      second,
    },
  };
}

답변 1

답변을 작성해보세요.

0

안녕하세요 문의 감사합니다.

create-next-app 강의를 확인해보니 혼란의 여지가 있네요ㅠㅠ Next.js 버전이 올라가면서 기존 강의와 세팅이 달라지게 되었습니다.

강의는 Next.js version 13.0, pages directory를 기준으로 진행되기 때문에 'app' 폴더 이름을 'pages'로 변경하시면 잘 작동할 것으로 보입니다.

비슷한 일을 방지하기 위해 해당 강의의 설명란에 추가 설명을 적어두겠습니다. 질문해주셔서 감사합니다! :)

simjieun님의 프로필

simjieun

질문자

2023.07.04

그럼 저 한가지만 더 여쭤봐두될까요?

Next.js13에선 app 폴더에서 특정페이지에서 SSG를 하고싶다면 getStaticProps를 사용하지 않고 fetch함수로 옵션값으로 SSG를 하게되는것일까요?

공식문서에만 보면 https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering

그리되어있는것같아서.. next.js에 관해서는 지식공유자님이 좀더 알고계시지는게 많을것같아서 여쭤봅니다!!ㅠㅠ

네 맞습니다. 말씀하신대로 fetch를 이용하면 됩니다.

data-fetching 관련 문서도 읽어보시면 좋을 것 같습니다 :)
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching

simjieun님의 프로필

simjieun

질문자

2023.07.05

답변 감사합니다.^^