Next.jsのimport 'server-only'でコンポーネントをServer Componetに固定する

Next.jsでコンポーネントはServer ComponentsとClient Componentsに分類されます。

Client Componentsに限定する

Client Componentsは非常によく利用されますがカスタムフックを利用する場合やイベントを指定する場合にはClient Componentsを利用する必要があり冒頭に'use client'を指定することでClient Componentsとして取り扱いされます。

'use client';

export default function ClientComponents() {

  return (
    <h1>Client Components</h1>
  );
}

https://ja.react.dev/reference/rsc/use-client

Server Componentsに限定する

Server Componentsに限定するしたいケースとしてはサーバーと通信を行うようなケースでしょう。

コンポーネントに'use client'を指定していなくても先祖要素にClient Componentsがあると自動的にClient Componentsとして取り扱われます。

そのため開発時はServer Componentsとして通信を行っていたが、運用中に先祖要素がClient Componentsに変更されブラウザでも通信が行われていたなど手違いがが発生してしまします。

それを防ぐためには、ページの冒頭にimport 'server-only';をつけてServer Componentsであるとこと宣言します。

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment

Server Functionsを利用する場合には'use server'ディレクティブが用意されていますが通常のデータフェッチを行うようなServer Componentsでは利用できません。

import 'server-only';

export default function ServerComponents() {

  return (
    <h1>Server Components</h1>
  );
}

こうすることにより、このコンポーネントがClient Componentsで読み込まれた場合に以下のようなエラーが表示され事前に検知することが可能になります。

これで予期せぬ手違いを防ぐことができるようになります。