<BlogMeta>
        {{
          title: "NextJS _document is only rendered on the server, so event handlers cannot be used in this file.",
          date: "2024-11-28",
          description: "If you tried to use state or onclick or any other kind of interactivity in a component imported by the _document file in the nextjs page router like a navbar with onclick property or anyother kind of client-side interactivity in it will fail to work. unable to usestate nextjs",
          image: "https://monyasau.netlify.app/favicon.png",
          url: "https://monyasau.netlify.app/blog/nextjs-document-interactivity",
          keywords: ["nextjs", "page", "client-side"],
          canonicalUrl: "https://monyasau.netlify.app/blog/nextjs-document-interactivity",
        }}
</BlogMeta>

<hr/>

## Non interactive _document NextJs

If you tried to use state or onclick or any other kind of interactivity in a component imported by the _document file in the nextjs page router like a navbar with onclick property or anyother kind of client-side interactivity in it will fail to work, but it won't throw any kind of error either on the client side nor on the server.
I ran into the same error while trying to implement a click dropdown in the globally shared navigation Bar and **wasted 3 days trying to fix it**.

## Suggestions i found online and tried that didn't work

- Updating/upgrading Node multiple times.
- Renaming the component with interactive code in it.
- Creating a new project and moving code

## How i eventually fixed it

All you have to do is move the import and declaration of the code that has client side interactivity or state in it from the ``_document`` file and put it in the `_app.tsx/jsx/js` file in the `src` dir

Former code:
_document.tsx:
```bash
import TopNav from "@/components/TopNav";
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head/>
      <body className="">
        <TopNav /> //TopNav has client side code
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```
_app.tsx:
```tsx
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}
```
New Codes:
_document.tsx:
```tsx
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head/>
      <body className="">
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```
_app.tsx:
```tsx
import "@/styles/globals.css";
import TopNav from "@/components/TopNav";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <><TopNav/><Component {...pageProps} /></>;
}
```

### Why this works

_document is only rendered on the server, but __app renders both on the server and client which therefore allows you to add clients side interactivity to your code and it is also shared between all pages.

## Alternative fix

Another way to fix it is to move you entire codebase to the newer app routing system which i personally hate

## conclusion and why this happens?

The reason this issue occurs is because the _document component renders only on the server then pass compiled html to the client which in other words disables any kind of programmed interactivity you want on the client side and all you need to do is move the code that needs client side interactivity into the _app file which is also shared with all pages

NextJS _document is only rendered on the server, so event handlers cannot be used in this file.

<BlogMeta>
        {{
          title: "Fixing 'document or window is not defined' Error in Next.js",
          date: "2024-12-13",
          description: "A guide to resolving the 'document is not defined' or 'window is not defined' error in Next.js and understanding server-side rendering constraints.",
          image: "https://yourdomain.com/path-to-og-image.jpg",
          url: "https://monyasau.netlify.app/blog/nextjs-document-or-window-is-not-defined",
          keywords: ["Next.js", "document is not defined", "window is not defined", "server-side rendering", "SSR", "client-side code"],
          canonicalUrl: "https://monyasau.netlify.app/blog/nextjs-document-or-window-is-not-defined",
        }}
</BlogMeta>

<hr/>

## Fixing the 'document is not defined' of 'window is not defined' Error

When working with Next.js, you may come across the error `ReferenceError: document is not defined` or `ReferenceError: window is not defined`. This issue arises because the `document` object is not available on the server-side.

Next.js uses server-side rendering (SSR) to make your site render faster. As a result, it attempts to render pages on the server before sending them to the client browser. Objects like `document`, `window`, or `localStorage` are part of the browser's runtime environment and are unavailable during server-side rendering.

```bash
ReferenceError: document is not defined
```

```bash
ReferenceError: window is not defined
```

## Why Does This Happen?

|  Context | Access to `document` | Access to `window` | Access to `localStorage` |
|--------|-------|--------|-------|
| **Server-side** | **❌ Not available** | **❌ Not available** | **❌ Not available** |
| **Client-side** | **✅ Available** | **✅ Available** | **✅ Available** |

The `document` or `window` object and other APIs are part of the browser’s environment. When you attempt to use them during the server-side rendering phase, they do not exist, leading to the error.

## How to Fix It?

To fix this issue, you have to make sure that the code only runs on the browser. One effective method is to use a `typeof` check to confirm if `document` or `window` exists before attempting to access it.

```bash
typeof document !== 'undefined' && document.querySelector('escapism');
```

```bash
typeof window !== 'undefined' && console.log(window.innerWidth);
```

## Alternative Fix

If you prefer, you can wrap your code in a `useEffect` hook, which only runs on the client after the component mounts.

```bash
import { useEffect } from 'react';

const MyComponent=() {
  useEffect(() => {
    const meElement = document.querySelector('escapism');
    // Your browser-dependent/client-side code here
  }, []);

  return <div>whaalever</div>;
}
```

## Another fix using dynamic import

```bash
import dynamic from 'next/dynamic';

const ComponentWithBrowserCode = dynamic(() => import('./MyComponent'), { ssr: false });
```

## Conclusion

The `'document is not defined'` or `'window is not defined'` error in Next.js arises due to the server-side rendering process, where browser-specific APIs are unavailable. To fix it:

- Use `typeof` checks to ensure the code runs in the browser.
- Use React hooks like `useEffect` for client-side execution.
- Use dynamic import


Fixing 'document or window is not defined' Error in Next.js


<BlogMeta>
{{
  title: "How to Fix the 'Invalid Date' Error in Safari and iOS",
  date: "2024-12-22",
  description: "Fix and understand Safari and iOS 'Invalid Date' errors for valid JavaScript date strings to handle dates across all browsers",
  image: "",
  url: "",
  keywords: ["Safari Invalid Date issue", "iOS date parsing error", "JavaScript date error Safari", "Safari ISO 8601 date parsing", "Fix Invalid Date in JavaScript", "Cross-browser date handling", "Date format Safari compatibility", "Debugging date issues Safari", "Safari date string solutions", "JavaScript date parsing fix"],
  canonicalUrl: ""
}}
</BlogMeta>
<hr/>
  
# Understanding and Debugging the "Invalid Date" Issue in Safari/iOS

When working with dates in javascript, you might encounter an issue in Safari and iOS where valid date strings result in `"Invalid Date"` errors. This problem has puzzled many developers, so let's explore why it happens and how to fix it.

## The Root of the Problem

The core issue stems from Safari's strict interpretation of the ECMAScript specification for date parsing. While browsers like Chrome and Firefox are more forgiving, Safari adheres rigidly to specific date format requirements.

Consider this date string:

```javascript
const date = new Date('2024-12-22');  // this Works in Chrome/Firefox/Edge and most browsers
console.log(date);  // but on Safari: Invalid Date
const otherDate = new Date("2024/12/22");
console.log(otherDate) // Invalid in Safari
```

Safari does not support the simplified ISO 8601 format (YYYY-MM-DD). This same issue occurs with datetime strings like `2024-12-22 14:30:00`.

## Why Does This Happen?

Safari strictly requires dates to be in one of these formats:
1. Dates must use a hyphen (-) as the separator and have timezone info (e.g., "YYYY-MM-DD").
2. Full ISO 8601 format with time and timezone: `2024-12-22T00:00:00Z`
3. RFC 2822 format: `Sun, 22 Dec 2024 00:00:00 GMT`
4. Traditional format: `December 22, 2024`

> If your application relies on locale-specific date strings, Safari will throw an error unless you manually parse them.



## Solutions / How to fix this

### 1. One Liner that does the same thing as Number 2

```javascript
console.log (new Date('2024-12-21'.replace(/-/g, "/")));
```

### 2. Use Date.parse() with ISO 8601 Format

```javascript
function parseDate(dateString) {
    // Add the time component if it's missing
    if (dateString.length === 10) {
        dateString += 'T00:00:00Z';
    }
    return new Date(dateString);
}

// Usage
const validDate = parseDate('2024-12-22');
console.log(validDate);  // Works in all browsers even safari
```

### 2. Manual Date String Manipulation By Replacing Dashes

```javascript
function safariSafeDate(dateString) {
    // Convert YYYY-MM-DD to MM/DD/YYYY
    const [year, month, day] = dateString.split('-');
    return new Date(`${month}/${day}/${year}`);
}
```
**OR**

```javascript
function parseDate(dateString) {
    const normalized = dateString.replace(/-/g, '/');
    return new Date(normalized);
}

const date = parseDate('2024-12-22');
console.log(date); // Works in all browsers
```
### 3. Using a Date Library

Consider using a reliable date library like Day.js or date-fns:

```javascript
// Using Day.js
import dayjs from 'dayjs';

const date = dayjs('2024-12-22').toDate();
```

## Conclusion

> When implementing date handling, always test your solution across different browsers.

The Safari date parsing issue is a reminder of the importance of cross-browser testing and the need for robust date handling in web applications. While it might seem like a minor inconvenience, proper date handling is crucial for maintaining consistent user experiences across all platforms.

Remember:
- Always validate date inputs
- Use consistent date formats throughout your application
- Consider using a reliable date library for complex date operations
- Test your date handling code across different browsers and devices

By following these guidelines and implementing appropriate solutions, you can ensure your application handles dates correctly across all browsers and platforms.

My Blog Posts

NextJS _document is only rendered on the server, so event handlers cannot be used in this file.

Fixing 'document or window is not defined' Error in Next.js

How to Fix the 'Invalid Date' Error in Safari and iOS