komosyu

Next.js version13のappディレクトリでのデータフェッチ

komosyu
Next.js

目次

  1. はじめに
  2. 結論から
  3. 実際に使ってみると
  4. app ディレクトリの今後
  5. 参考
  6. さいごに

はじめに

ミーハーなので Next.js の versino13 を触って microCMS で Jamstack サイトを実装しているのですが、その中でいつも通りgetStaticPropsの中でデータを取得しようとした時にこんなエラーが出てしまいました。

./src/app/page.tsx
ReactServerComponentsError:

"getStaticProps" is not supported in app/. Read more: https://beta.nextjs.org/docs/data-fetching/fundamentals

まあ、エラーの文言通りでgetStaticPropsが app ディレクトリではサポートされていないんだな。ということがわかると思います。

では、app ディレクトリではどうやってデータを取得したらよいのでしょうか？
その辺りについて、今回の記事では解説していこうと思います！

結論から

それでは今回問題となっているNext.js の公式ドキュメントでgetStaticPropsについて見てみましょう。

Next.js公式ドキュメントのgetStaticPropsページ

すると、こんなことが書いてありました。

コンポーネント レベルで同じ場所に配置されたデータフェッチをサポートしています。

なるほど。これまでは page ディレクトリ内でgetStaticPropsを使ってデータを取得していましたが、app ディレクトリを使うとコンポーネント単位でデータフェッチができるようになるみたいですね。

なので、結論としては page ディレクトリ内のgetStaticPropsではなく各コンポーネント単位でデータを取得するようにしましょう。ということでした。

実際に使ってみると

今回は Jamstack のブログサイトでヘッダーに microCMS で設定したカテゴリーを一覧でメニューとして並べてみたいと思います！

import Link from 'next/link'
import { client } from 'src/lib/microcms/apis'

/**
 * ここでmicroCMSからのデータを取得してきます
 * */
const getData = async () => {
  const res = await client.getList({ endpoint: 'categories' })
  return res
}

/**
 * ここで先ほどのgetDataを使ってメニューとして展開していきましょう
 * */
export const Header = async () => {
  const data = await getData()
  const { contents } = data

  return (
    <header className={style.container}>
      <nav>
        <ul>
          {contents.map((content) => (
            <li key={content.id}>
              <Link href={content.id}>{content.name}</Link>
            </li>
          ))}
        </ul>
      </nav>
    </header>
  )
}

まあ、コードの通りではあるのですが、getDataでデータを取得してきてそれをコンポーネント内で使っていくという形になります。
あと、今回の本題ではないですが、13 になってから Link タグの下に a タグをつけなくてよくなりましたね。

app ディレクトリの今後

バックエンドエンジニアが Next.js の App Directory に夢を見るという記事でもお話されているように、これまでのようにコンポーネントが CSR であることがネックとなっていたところが、今回の app ディレクトリの採用によって SSR がデフォルトになるということで開発の生産性が上がったりもするのするのかな？というところで今後が楽しみになっています。

参考

さいごに

React の Server Components によって、Next.js のバージョン 13 でのもデータの扱い方が変わったなんて話はバージョンがアップデートされた時に真っ先にみて『ふーーーん』なんて思った気がしたのですが、実際に触ってみないとわからないものですね。

今回の件で app ディレクトリのおもしろさに気が付くことができたので、今後のフレームワークの進化に期待しながら理解も深めていきたいなと思いました。