【Next.js/React】関数を渡せないエラーの解決方法について

はじめに

Next.jsで開発中データ取得するために関数を子コンポーネントへ渡そうと実装した際に以下のエラーが表示され、こちらの解決方法について記事にします。

【エラー内容】

[ Server ] Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
<... fetchData={function fetchData}>

propsで関数を渡してはいけないということのようです。

【修正前のコード】

page.tsx

const fetchData = async (): Promise<Posts[]> => {
  const res = await fetch("{ path }");
  if (!res) throw new Error("全データ取得に失敗しました");
  return res.json();
};

function page() {
  return (
    <>
      <Header>
        <Link href="/" className="btn btn-primary text-gray-100 mr-10">
          戻る
        </Link>
      </Header>
      <UseQueryPostsPage fetchData={fetchData} />
    </>
  );
}

export default page;

UseQueryPostsPage.tsx

"use client";

import React from "react";
import { useQuery } from "@tanstack/react-query";
import { Posts } from "../../../types";
import Link from "next/link";
import Image from "next/image";


type Props = {
  fetchData: () => Promise<Posts[]>;
}

function UseQueryPostsPage({fetchData}: Props) {
  const {
    data: allPostsData = [],
    isLoading,
    error,
  } = useQuery({
    queryKey: ["allposts"],
    queryFn: fetchData,
    staleTime: 1000 * 60 * 10,
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>エラーが発生しました</div>;

  return(
     // 省略 //

  )
}

export default UseQueryPostsPage;

解決方法

サーバーサイドで値を取得後propsで渡す

page.tsx

import { Posts } from "../../../types";
import Link from "next/link";
import Header from "../components/Header";
import UseQueryPostsPage from "../components/UseQueryPostsPage";


export default async function page() {
    const res = await fetch("{ path }");
    if (!res.ok) throw new Error("全データ取得に失敗しました");
    const allPostsData: Posts[] = await res.json();
  return (
    <>
      <Header>
        <Link href="/" className="btn btn-primary text-gray-100 mr-10">
          戻る
        </Link>
      </Header>
      <UseQueryPostsPage allPostsData={allPostsData} />
    </>
  );
}

UseQueryPostsPage.tsx

"use client";

import React from "react";
import { Posts } from "../../../types";
import Link from "next/link";
import Image from "next/image";

type Props = {
  allPostsData: Posts[];
};

function UseQueryPostsPage({ allPostsData }: Props) {
  return (
    // 省略
  );
}

export default UseQueryPostsPage;

参考

おわりに

App Routerでサーバーサイドからクライアントサイドへpropsで関数は渡せないようでした。
また１つ勉強になりました。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼