🙆
【Next.js】getServerSidePropsで取得した値が表示されない
結論
値を使用したいコンポーネントの親コンポーネントの存在を失念しており、propsが渡っていなかった
コード
getServerSideProps
export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
const count = await prisma.daily_mission.count();
return {
props: {
count,
},
};
};
値を使用したいコンポーネント
これの親になるコンポーネントの存在を失念していました。
今思えば、export default
がついていないことで、どこかで使われているのかもという推測ができたのかもしれません。
function DashboardContent(props: Props) {
return (
// 一部抜粋
<div>{props.count}</div>
)
}
値を使用したいコンポーネントの親コンポーネント
ファイルの最下部に書かれていたため見逃していました。
DashboardContentコンポーネントを使用しているコンポーネント側でpropsを渡す処理を追加することで想定した動作になりました
変更前
export default function Dashboard() {
return <DashboardContent />;
}
変更後
export default function Dashboard(props_1: Props) {
return <DashboardContent {...props_1} />;
}
Discussion