How to usetypeof window in Next.js
Since window object is only available on the client side, you can use typeof window to check if it’s defined. If it’s undefined, the code is running on the server side.
Example:
//index.js
import Head from "next/head";
export default function Home() {
if (typeof window == "undefined") {
console.log("Application is on server side");
} else {
alert("Application is on client side");
}
return (
<>
<Head>
<title>Create Next App</title>
</Head>
<main>
<h2>This is a demo page</h2>
</main>
</>
);
}
Output:
Detecting server vs client in NextJS application
Next.js, a popular React framework, helps you to build powerful web applications with ease. However, managing server-side and client-side execution can pose unique challenges. In this article, we’ll explore techniques for detecting server or client execution in Next.js applications.
Table of Content
- What is Server Side Rendering?
- What is Client Side Rendering?
- Detecting server vs client-side rendering
- 1: Using typeof window
- 2: Using process.browser
- 3: Using a custom flag
- 4: Using req object in getServerSideProps
- 5: Using window object inside useEffect