getServerSidePropsの値が取得できない(undefinedになる)
Q&A
Closed
解決方法
_app.tsxの書き方を修正する。
function MyApp({ Component, pageProps }: AppProps) {
return (
- <Component />
+ <Component {...pageProps}/>
);
}
単純なミスでしたorz
解決したいこと
getServerSidePropsの値を取得、表示したい。
特殊な書き方をしていないと思うのですが、
getServerSidePropsの値が取得できません。
公式の書き方や検索したら出てくる解消法を一通り試しましたが
ダメでした。。。
Next.jsの設定はプロジェクトを作成して
ほとんど変更はしていません。
バージョン
next.js : 12.2.0
react : 18.2.0
typescript : 4.7.4
※Next.js, React, TypeScript初心者です。
言葉の使い方や言い回しが不適切な場合は
ご指摘いただければ幸いです。
クライアント側
pages/admin/edit
import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
import * as React from "react";
type Props = InferGetServerSidePropsType<typeof getServerSideProps>;
const Edit = (data: Props) => {
console.log(data); // undefined
return <></>;
};
export const getServerSideProps: GetServerSideProps = async (context) => {
const url = `http://localhost:3000/api/admin/get`;
const res = await fetch(url, {
headers: {
"Content-Type": "application/json;charset=utf-8",
},
});
const data = await res.json();
console.log({ data }); // ← array object
return {
props: {
data,
},
};
};
export default Edit;
サーバー側
pages/api/get
import type { NextApiRequest, NextApiResponse } from "next";
import { sequelize } from "../../../libs/db";
export default async (req: NextApiRequest, res: NextApiResponse) => {
const id = req.query.id;
await sequelize.sync();
const sql = `
SELECT * FROM admin
WHERE id = 1
`;
const query = await sequelize.query(sql);
const result = await typeof query !== undefined ? query[0] : [];
/** 下記の形で取得
[
{
id:1,
name:'test
}
]
*/
res.status(200).send(JSON.stringify(result));
};
自分で試したこと
公式＋下記サイトのような書き方
https://stackoverflow.com/questions/61314910/props-passed-to-page-from-getserversideprops-is-always-undefined
https://stackoverflow.com/questions/70962619/why-is-my-getserversideprops-coming-back-as-undefined-within-my-nextjs-app-i-am
0
