🙆

【Next.js】getServerSidePropsで取得した値が表示されない

2022/01/21に公開

結論

値を使用したいコンポーネントの親コンポーネントの存在を失念しており、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