Іноді в Next.JS буває потрібно виконати якийсь код лише на клієнті. Як це зробити?

Перший варіант: застосувати справжні клієнтські компоненти за допомогою прапорця SSR:false та use client; Але це крайній варіант, тому що весь компонент буде виключений із первинного рендеру на сервері.

Другий варіант: виконати цей код в середині useEffect. За загальним правилом, ефекти виконуються виключно на клієнті і ви можете безпечно звертатися до, наприклад, об'єкту window або document. Але цей варіант не спрацює, якщо вам потрібно виконати код до ініціалізації React застосунку.

Тому існує третій варіант:

if (typeof window !== 'undefined') {
  console.log(`HELLO CLIENT`);
}

В середині цього if ви також можете безпечено працювати з DOM API.

А от перевірка накшталт if (window?.addEventListener) вже не спрацює, ви отримаєте помилку ReferenceError: window is not defined

Майте це на увазі.

@reactbeginners