next.js データを取得する関数が使えない

Question

実現したいこと

getEquioment()で取得したitemsDataをitemsDataProviderに渡したいです

発生している問題・分からないこと

いろいろなことを試したもののうまくitemsDataを取得する方法がわかりません

エラーメッセージ

Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

該当のソースコード

'use server';
import { JWT } from 'google-auth-library'; // 認証用。
import { GoogleSpreadsheet } from 'google-spreadsheet';
import { itemProps } from 'const/equipmentType';

// sheetのインスタンスを取得
const getSheets = () => {
  // まず認証情報を作る

  // 見られるスコープはどこまでか
  const scopes = [
    'https://www.googleapis.com/auth/spreadsheets',
    'https://www.googleapis.com/auth/drive.file',
  ];
  // スプシのシートID process.envうんたらは、.env.localに書いてある
  const sheetId = process.env.SHEET_ID;
  // サービスアカウントのメアドとパス
  const clientEmail =
    process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL;
  const privateKey = (
    process.env.GOOGLE_PRIVATE_KEY as string
  ).replace(/\\n/g, '\n');

  // 認証インスタンス作る
  const jwt = new JWT({
    email: clientEmail,
    key: privateKey,
    scopes: scopes,
  });

  // シートIDと認証情報をセットにして、spreadsheetのインスタンス生成
  const doc = new GoogleSpreadsheet(sheetId as string, jwt);
  return doc;
};

// itemProps[]型のデータを取得する関数
export const getEquipmentInfo = async () : Promise<itemProps[]> => {
  // シートインスタンスつくって
  const sheet = getSheets();
  // GCPからデータ取得
  await sheet.loadInfo();
  // "equipments"というシートを取得
  const sheetInfo = sheet.sheetsByTitle['equipments'];

  // シートから列データ取得
  const rows = await sheetInfo.getRows<itemProps>();
  console.log(rows);
  if (rows) {
    // 辞書の配列の形式にして、各データを返す
    return rows.map((row) => {
      return {
        name: row.get('name'),
        count: row.get('count'),
        tag: row.get('tag'),
        location: row.get('location'),
        imagePath: row.get('imagePath'),
        latestUpdate: row.get('latestUpdate'),
        purchasePlace: row.get('purchasePlace'),
        threshold: row.get('threshold'),
      };
    });
  } else {
    // ここでエラーを返すようにすることでitemsがundefinedになるのを防ぐ.
    // 参考: https://zenn.dev/estra/articles/ts-with-promise-type-annotation#promise-%E3%81%AE%E5%9E%8B%E6%B3%A8%E9%87%88
    return [];
  }
}

'use client';
import { ReactNode, createContext, use, useEffect, useState } from 'react';
import { itemProps } from '@/lib/const/equipmentType';
import { getEquipmentInfo } from '@/lib/apis/getEquipmentInfo';

export const ItemsDataContext = createContext({
  itemsData: [] as itemProps[],
});

export const ItemsDataContextProvider = ({
  children,
}: {
  children: ReactNode;
}) => {
    const [itemsData, setItemsData] = useState<itemProps[]>([]);
    useEffect(() => {   
        const fetchData = async () => {
            const data = await getEquipmentInfo();
            setItemsData(data);
        };
        fetchData();
    }, []);
  return (
    <ItemsDataContext.Provider value={{ itemsData }}>
      {children}
    </ItemsDataContext.Provider>
  );
};

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

• リストPage Routerではなく，App Routerであるため，getStaticPropsなどが使えないこと
• リストServer Actionで行けるかと思い，試したものの，

It is not allowed to define inline "use server" annotated Server Actions in Client Components. To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component.

と言われてしまう

補足

参考記事
getEquipment内のconsole.logからデータが取得されていることはわかっています
どうぞよろしくお願いいします

Answer 1

2024/02/20 追記: コードに誤りがあったので、修正しました。

Pages Router の getStaticProps / getServerSideProps に相当するのは、Server Component です。

• fetch() を呼び出すときにオプションを指定
• unstable_noStore() を呼び出す
• cookies() を呼び出す

などの「動的な機能」を使ったときのみ「動的レンダリング」となり、getServerSideProps に相当、使っていないときは「静的レンダリング」となって、getStaticProps に相当します。

https://nextjs.org/docs/app/building-your-application/rendering/server-components#switching-to-dynamic-rendering

---

とりあえず、page.tsx を Server Component にしてそこで使うなら、こんな感じになります。

// page.tsx か layout.tsx
import { ReactNode, use, useEffect, useState } from 'react';
import { getEquipmentInfo } from '@/lib/apis/getEquipmentInfo';

const Page = async () => {
  const data = await getEquipmentInfo();

  return (
    <ItemsDataProvider value={{ itemsData }}>
      {children}
    </ItemsDataProvider>
  );
};

export default Page;

"use client";

import { FC, ReactNode, createContext, useContext } from "react";
import { itemProps } from '@/lib/const/equipmentType';

type ItemDataContextValue = {
  items: ItemProps[];
};

const ItemsDataContext = createContext<ItemDataContextValue>({ items: [] });

export const ItemsDataProvider: FC<{
  value: ItemDataContextValue;
  children: ReactNode;
}> = ({ value, children }) => {
  return (
    <ItemsDataContext.Provider value={value}>
      {children}
    </ItemsDataContext.Provider>
  );
};

export const useItemsData = () => {
  return useContext(ItemsDataContext);
};

Comments

[mksmkss]

回答ありがとうございます。試してみましたが解決できませんでした。
getStaticPropsなどがServer Componetnに相当することは理解することができました．
しかし，教えていただいた通りapp/equipments/layout.tsxを追加，変更してみたのですが

Error: Could not find the module "/Users/****/Coding/Next/equipment-manager/src/context/itemsContext.tsx#ItemsDataContext#Provider" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

とエラーが出るようになりました．https://github.com/vercel/next.js/issues/50243 によると，親コンポーネントに'use client'と書けば良いとあります．しかし，そのようにした場合，当該ファイルは子ファイルに当たるためserver componetとして利用できないように感じます．どうすれば良いのでしょうか

主なファイル構成は以下のようになります
src/app/equipments/layout.tsx : Serve Component化（？），Providerをここに
src/app/equipments/page.tsx : Client Componet フロント
src/context/itemsContext.tsx : createContextだけに変更

また，awaitはasyncがないと使えないという認識なのですが，page.tsx/layout.tsxで書く場合，

const Page = async () => {

と書くのが正しいのでしょうか．
拙い文章で申し訳ありません，よろしくお願いいたします．

[honey32]

すみません、僕の回答で2点不備があったので、訂正します。

1. async のつけ忘れ。

ご指摘の通り、Component の中で await するためには async が必要です。

2. Provider の export のしかたについて

ItemsDataContext.Provider は、たとえ "use client" をファイル先頭につけていても Server Component からは使用不可能なようです。(関数コンポーネントじゃなくて内部ではクラスコンポーネントになっているのかも)

自力で関数型コンポーネントを作るのが必須だったようです。以下のように書けば、 value を渡せるような ItemsDataProvider になり、これであれば Server Component 側から利用できるようになります。

"use client";
import { ReactNode, createContext, use, useEffect, useState } from 'react';

export const ItemsDataContext = createContext({
itemsData: [] as itemProps[],
});

export const ItemsDataProvider: FC<{
value:itemProps[];
children: ReactNode;
}> = ({ value, children }) => {
return (
<ItemsDataContext.Provider value={value}>
{children}
</ItemsDataContext.Provider>
);
};