구성 요소에서 getStaticProps 사용

구성 요소에서 getStaticProps 사용

저는 다음 js와 typescript로 프로젝트를 시작했습니다.index.js 페이지에 있는 주 구성 요소를 사용합니다. 주 구성 요소의 getStaticProps 함수를 사용합니다. getStaticProps는 prop 개체를 반환하고 이 prop를 주 구성 요소에 기록하면 콘솔에 정의되지 않은 상태로 수신됩니다.구성 요소에서 getStaticProps를 사용하는 것이 잘못되었으며 페이지에서 해당 기능을 사용해야 하는지 여부를 알고 싶습니다.저는 next js 신입생인데 누가 저를 도와준다면 정말 감사하겠습니다.

이것은 나의 주요 구성요소입니다.

import React from 'react';
import {IMain} from "../../../../interfaces/components/IMenu/IMain";

const Main:React.FC<IMain> = (props) => {
    console.log(props);
    return (
        <div>
        </div>
    );
};


export async function getServerSideProps() {
    return {
        props: {
            data: 'ggwp'
        }
    };
}

export default Main;

그리고 이것은 제 색인입니다.js 페이지.

import Text from "./../components/ui/Text/Text";
import Button from "../components/ui/Button/Button";
import Main from "../components/Menu/Desktop/Main/Main";

const Home = () => {
  return <Main/>;
};




export default Home;

getStaticProps는 페이지에서만 내보낼 수 있습니다.페이지가 아닌 파일에서는 내보낼 수 없습니다.getStaticProps를 페이지 구성 요소의 속성으로 추가하면 작동하지 않습니다.

https://nextjs.org/docs/basic-features/data-fetching

가능한 해결책은 다음과 같습니다.

predev와 같은 노드 스크립트를 사용하여 컨텐츠를 가져와 프로젝트의 JSON 파일에 저장한 다음 구성 요소에서 해당 JSON 파일을 참조합니다.

여기에 게시: https://dev.to/brewhousedigital/nextjs-getstaticprops-with-components-f25

해결책

• 성분에 대해 react의 useEffect()를 사용
• 그리고 페이지의 경우 next.js의 StaticProps()를 가져옵니다.
• 결합한 후에 둘은 하이브리드 페이지를 가질 것입니다.

언급URL : https://stackoverflow.com/questions/68149201/use-getstaticprops-in-component