问题描述
我用 nextjs 和 typescript 开始了一个项目。我有一个主要组件,我在 index.js 页面中调用它我在主要组件中使用 getStaticProps 函数 getStaticProps 返回一个道具,当我在我的主要组件中记录道具时,我收到了未定义的我的控制台。 我想知道使用 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: 'gg'
}
};
}
export default Main;
这是我的 index.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#only-allowed-in-a-page