Browser APIs Not Working in Next.js? The SSR , CSR Issue Explained

Next.js Browser API Issues: Problem and Solutions

1. The Problem

In Next.js, we can use SSR (Server-Side Rendering), CSR (Client-Side Rendering), or a hybrid approach depending on the use case.

With CSR, rendering is delegated to the browser. The server initially sends a small amount of HTML and JavaScript, and the browser then loads the required data and builds the page. This can sometimes cause a brief empty/white screen during the initial load and may negatively affect SEO and performance scores.

However, CSR is useful when the page depends heavily on browser-side functionality.

The bigger issue appears when a component uses browser-specific APIs such as:

• window

• document

• canvas

• Other browser-only HTML APIs

The Node.js runtime used for SSR does not provide these browser APIs. Since Next.js may render React components on the server or at build time, trying to access these APIs during server rendering can cause the rendering process to fail.

2. Why Does This Happen?

The simple reason is:

The code expects a browser, but Next.js is trying to execute it on the server.

So, when window, document, canvas, or another browser-dependent API is accessed during SSR, it isn't available and can result in errors or an empty page.

3. Common Solutions

Solution 1: Use useEffect() hook

useEffect() runs on the client after the component has rendered, making it suitable for browser-dependent logic.

useEffect(() => {
  // Browser-specific code
  console.log(window.innerWidth);
}, []);

This prevents browser APIs from being accessed during the server-rendering phase.

Solution 2: Check Whether Code Is Running in the Browser

Another approach is to explicitly check whether the browser environment exists before using browser APIs:

if (typeof window !== "undefined") {
  // Browser-only code
}

This ensures the code only executes when window is available.

Solution 3: using process.browser variable

 const side = process.browser ? 'client' : 'server';

Solution 4: other is dynamic react component loading etc

Simple Note

Problem: Browser APIs don't exist in the Node.js server environment.
Reason: Next.js may execute components during SSR/build time.
Solution: Run browser-dependent logic on the client using useEffect() or browser-environment checks.