getServerSideProps

getServerSideProps を分かりやすく

「getServerSideProps」とは、Next.js の機能の 1 つであり、「サーバーサイドレンダリング（SSR）」を実現するために使用されます。この機能は、ブラウザでページを表示する際に、サーバー側で動的にコンテンツを生成することができます。

例えば、ユーザーがログインしたときに、ユーザー情報を表示するページを作成する場合、サーバー側でユーザー情報を取得し、ページを動的に生成する必要があります。このような場合に、getServerSideProps を使うことができます。

GetServerSideProps型

あなたが、ユーザー情報を含む Web ページを作成するとします。まず、ユーザー情報を取得するために、getServerSideProps を使って、サーバー側でデータを取得する関数を定義します。

import { GetServerSideProps } from 'next'

type User = {
  name: string
  age: number
}

type ProfileProps = {
  user: User
}

export default function Profile({ user }: ProfileProps) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.age} years old</p>
    </div>
  )
}

export const getServerSideProps: GetServerSideProps<ProfileProps> = async (context) => {
  const user = await fetchUser() // ここでは、ユーザー情報を取得する関数を呼び出しています。
  return { props: { user } }
}

async function fetchUser(): Promise<User> {
  const response = await fetch('https://example.com/api/user')
  const data = await response.json()
  return data
}

このコードでは、GetServerSideProps型を使って、getServerSideProps 関数を定義しています。この関数では、fetchUser関数を使って、サーバー側でユーザー情報を取得しています。そして、propsに取得したユーザー情報を格納して返します。

Profileコンポーネントでは、propsに格納されたユーザー情報を使って、ユーザー名と年齢を表示しています。

以上のように、getServerSideProps を使うことで、サーバー側でデータを取得して動的に Web ページを生成することができます。