해결된 질문
작성
·
795
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'로 변경하시면 잘 작동할 것으로 보입니다.
비슷한 일을 방지하기 위해 해당 강의의 설명란에 추가 설명을 적어두겠습니다. 질문해주셔서 감사합니다! :)
네 맞습니다. 말씀하신대로 fetch를 이용하면 됩니다.
data-fetching 관련 문서도 읽어보시면 좋을 것 같습니다 :)
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching
그럼 저 한가지만 더 여쭤봐두될까요?
Next.js13에선 app 폴더에서 특정페이지에서 SSG를 하고싶다면 getStaticProps를 사용하지 않고 fetch함수로 옵션값으로 SSG를 하게되는것일까요?
공식문서에만 보면 https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering
그리되어있는것같아서.. next.js에 관해서는 지식공유자님이 좀더 알고계시지는게 많을것같아서 여쭤봅니다!!ㅠㅠ