Next.js でクライアントでのみコードを実行したい

Next.js にて DOM を使って要素サイズを計測してから配置を決めたかったものの、SSR時に document.~ が実行されてエラーになってしまうため、メモ

const [isClient, setClient] = useState(false);
useEffect(() => {
  setClient(true);
}, []);

if (isClient) {
  // CSR時のみ実行
} else {
  // SSR時のみ実行
}

巷には typeof window !== 'undefined' での条件分岐を促す文献も見られたのですが、React18 からは Error: Hydration failed because the initial UI does not match what was rendered on the server.（意：クライアントでレンダリングされた初期 UI が SSR のそれと一致しないよ）とエラーが表示されるようですので、上記の方法が堅実かと思います。