フロントエンド開発の先端を突っ走るNext.js
next.js アプリの初期化( npx create-next-app@latest <アプリ名> ) または yarn create next-app <アプリ名> または bun create next-app <アプリ名> )

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

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

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

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

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

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

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

const isClient = typeof window !== 'undefined';
No.2066
05/17 15:37

edit