【Next.js】”use client”境界では関数外でclient関数を使えない

こんにちは、フリーランスエンジニアの太田雅昭です。

use client

Next.jsのApp Routerでは、use clientをつけることで、ここからのツリーはclientで動かすことを明示します。実際にはサーバーでも同時に動いたりするのでそこは注意が必要なのですが、今回はまた別の話です。

use client境界ファイル

サーバーコンポーネントからツリーを辿り、始めてuse clientを書いたファイルをclient境界と呼ぶことにします。このclient境界ファイルでは、通常、クライアントサイドの関数が使えます。たとえばuseEffectはclient onlyですが、以下のようにして使用できます。

// client1.tsx

"use client"

import {useEffect} from 'react';

export function Client1(){

  // 関数内。OK
  useEffect(()=>{}, []);

  return <div>Client1</div>
}

ところが、関数内ではクライアントサイドの機能を使えるものの、関数外では使えません。今度は関数外で、createContextを使用してみます。

// client2.tsx

"use client"

import {createContext} from 'react';

// 関数外。エラー
const Context = createContext({} as any)

export function Client2(){
  return <div>Client2</div>
}

これは、serverコンポーネントから読み込むタイミングで、関数外の行が自動実行されるためです。そのためこの場合、一旦別のClientを挟む必要があります。

// client3.tsx

"use client"

export function Client3(){
  return <Client2 />
}

これで、関数外でclientサイドの機能を使うファイルを読み込むことができるようになります。

余談

ハイミーってご存知でしょうか？うま味調味料の一つで、味の素よりも美味しいらしいです。今度見かけたら、買ってみようと思います。なお味の素はサトウキビを原料にしており、大丈夫だろうと考えている派です。