Next.jsのgetStaticPropsを使用して関数コンポーネントにpropsを渡したい

Question

実現したいこと

• 関数コンポーネントにgetStaticProps()からpropsを渡す

前提

Next.js13の勉強中で、ブログサイトを作成しています。
microCMSからブログ記事のデータをgetStaticPropsで取得して関数コンポーネントに渡すコードを書いたのですがpropsがundefineとなってしまいます。
値の取得はapi.js内のgetPostBySlug(slug)を使って行っています。

発生している問題・エラーメッセージ

エラーメッセージ
- error app\blog\schedule\page.js (8:16) @ title
- error TypeError: Cannot read properties of undefined (reading 'title')
    at Schedule (./app/blog/schedule/page.js:18:28)
    at stringify (<anonymous>)
digest: "3697126974"
   6 |   return(
   7 |     <Container>
>  8 |       <h1>{blog.title}</h1>
     |                ^
   9 |     </Container>
  10 |   )
  11 | }

該当のソースコード

import { getPostBySlug } from "lib/api";
import Container from "components/container";

export default function Schedule({ blog }){
  return(
    <Container>
      <h1>{blog.title}</h1>
    </Container>
  )
}

export async function getStaticProps(){
  const slug = 'schedule'

  const post = await getPostBySlug(slug)

  return {
    props: { 
      blog: post
    },
  }
}

import { createClient } from 'microcms-js-sdk'

export const client = createClient({
  serviceDomain: process.env.SERVICE_DOMAIN,
  apiKey: process.env.API_KEY,
})

export async function getPostBySlug(slug) {
  try {
    const post = await client.get({
      endpoint: 'blogs',
      queries: { filters: `slug[equals]${slug}` }
    }).then((res) => console.log(res));
    return post
  } catch (error) {
    console.log('~~getPostBySlug~~')
    console.log(error)
    return null
  }
}

試したこと

書籍や公式ドキュメントのコードを見たり、propsをblog: post.contents[0]に書き換えたりしましたがうまく値を渡せませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

Next.js13ではappディレクトリ内でgetStaticPropsが使えなくなったようです。
コンポーネント内で直接データを取得したらエラーが消えました。