はじめに
Next.js×TypeScriptでコーディングをしていたところ、下記のエラーに遭遇しました。
React functionality 'useContext' is not available in this environment.
原因
クライアントで動かすべき機能を、サーバーで動かそうとしたのが主な原因でした。
今回使用しているProviderはサーバーコンポーネントとしてサポートされていません。
従って、クライアント側で動かしてあげる必要があるということです。
解決方法
Providerを別コンポーネントに分けて、クライアントコンポーネントとして実行しました。
公式ドキュメントにも同様の解決法が提示されています。
修正前
layout.tsx
//サーバーサイド
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<ApolloProvider client={client}>{children}</ApolloProvider>
</body>
</html>
);
}
修正後
ApolloProviderを扱うクライアントコンポーネントを新規作成しました。
ClientProvider.tsx
"use client";
//クライアントサイドで実行
import { ApolloProvider } from "@apollo/client";
import { client } from "../lib /apolo-client";
export default function ClientProvider({
children,
}: {
children: React.ReactNode;
}) {
return <ApolloProvider client={client}>{children}</ApolloProvider>;
}
layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<ClientProvider>{children}</ClientProvider>
</body>
</html>
);
}
参考