● Next.js のページが 「サーバー」/「クライアント」でどう動いているかを調べる

https://next-code-elimination.vercel.app/

左側がページのコンポーネント全て、右側がクライアントに渡されるコードです。

App Router導入後のNext.js開発におけるDead Code Eliminationの活用

● クライアント側だけで処理を行う。

isClient を 定義して、これを利用します

const isClient = typeof window !== 'undefined';

使い方

const isClient = typeof window !== 'undefined';

if ( isClient ){
  // クライアントだけで実行されるコード
}

共通関数として利用する場合はこのようにして定義しておくと良いでしょう

const isClient = () => typeof window !== 'undefined'

使い方

if ( isClient() ){
  // クライアントだけで実行されるコード
}