Next.jsのpageでURLから情報を取得する方法

前置き

Next.jsを使ったアプリケーションの開発をしていて、URLでもらった情報を画面側で取得するにはどうすればよいか調べたので残しておきます！

具体的な方法

page側でgetServerSidePropsを使います。
getServerSidePropsはサーバー側で実行される処理で、リクエスト時に呼ばれるそうです。
そのため、リクエスト時に外部APIで情報を取得して、それを基に画面を表示などもできるようです。

URLから情報を取得する方法について

getServerSidePropsは引数としてcontextを受け取れますが、その中にURLの情報（クッキーやクエリなど）が含まれています。

・パラメータ一覧
https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props

・コード例
// URLからクッキーの情報を取得
export async function getServerSideProps(context) {
const { userSession } = context.req.cookies;

取得した情報をpageに渡す方法について

getServerSidePropsの戻り値として設定した値は、pageでPropsとして受け取ることが可能です。

・コード例
export async function getServerSideProps(context) {
// URLからクッキーの情報を取得
const user = JSON.parse(userSession);
　// クッキーの情報を戻り値に設定
return { props: { user } };
}

export default function Dashboard({ user }) {
return

こんにちは、{user.name}さん

;
}

このようにしてURLから情報を取得して画面に渡すことが可能になります！

最後に

Next.js初心者なので、何か気になる点ありましたら教えていただけますと幸いです