<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.

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


<BlogMeta>
{{
  title: "Olanrewaju",
  date: "2025-01-01",
  description: "I thought i should make this one too",
  image: "",
  url: "https://monyasau.netlify.app/blog/me",
  slug: "me",
  keywords: ["olajide", "olanrewaju", "me", "whoami"],
  }}
  </BlogMeta>
  <hr/>
  
<h1 class="text-glow text-6xl mb-4">Me.</h1>

Hello! I'm **Olanrewaju**, a Software Engineer and i have been in the tech space for a couple  [Years](https://github.com/monyasau?tab=overview&from=1999-12-01&to=1999-12-31).

> well, i try

![Ha me](https://github-readme-stats.vercel.app/api?username=monyasau&show_icons=true&include_all_commits=true&custom_title=Me&hide_rank=true)

## What I Do

I specialize in **full-stack development**, focusing on building **modern, scalable web applications**. My skill set includes a range of front-end and back-end technologies, but I’m always exploring new tools to stay on the cutting edge

## A Little About Me

```mermaid
pie
  "Tech & stuffs" : 70
  "Photography" : 5
  "Redacted" : 25
```

I try to bring a bit of that creativity and curiosity into everything I do.

### Get in Touch
You can find me on:
- [GitHub](https://github.com/monyasau)
- [LinkedIn](https://linkedin.com/in/monyasau)
- [Twitter](https://twitter.com/_monyasau)

> If you’d like to discuss a project or just want to connect, don’t hesitate to reach out!

---

**“The best way to predict the future is to predict the future.” – Me**


Olanrewaju Olajide


<BlogMeta>
{{
  title: "How to Improve Website Performance with Lazy Loading",
  date: "2025-01-03",
  description: "Learn how to implement lazy loading to improve the performance of your website and enhance user experience",
  image: "https://i.imgur.com/qFNRjWD.png",
  url: "https://monyasau.netlify.app/blog/website-performance-lazy-loading",
  slug: "website-performance-lazy-loading",
  keywords: ["lazy loading", "website performance", "optimization", "frontend development"],
  }}
  </BlogMeta>
  <hr/>
  
## Why?

Image and other assets(`scripts,icons,audio,css...`) you use on your website can grow exponentially in size as your app grow and that throttles the amount of bandwidth available to your app and also slow your app/page down.

| Method | Logic | Performance | Impact |
| - | - | - | - |
| Without Lazy Loading | All assets try to load at once | Slow page load time | high initial bandwidth usage |
| With Lazy Loading | Resources are deferred | Faster load time | reduced initial page size |

## Implementation of lazy loading of Images and others

1. Lazy load images
```html
<img src="image.jpg" alt="Description" loading="lazy"/>
```
This will delay the image loading until it is close to being visible in the viewport.

2. Lazy Loading of JavaScript Modules
```javascript
document.getElementById("someActionThatNeedHeavyModule").addEventListener("click", function() {
  import("./heavyModule.js").then((module) => {
    // Use the module
    module();
    console.log(module.someVariable);
  }).catch((error) => {
    console.error("Error loading the module:", error);
  });
});
```

> I btw used lazy loading for this image

<img src="https://i.imgur.com/qFNRjWD.png" alt="I use lazy loading for this image" loading="lazy"/>

## Benefits of lazy loading
1. Reduces Initial Load Time
Lazy loading will only loads essential assets first, speeding up the page load and making it feel faster.

2. Bandwidth Savings
Non-visible resources aren’t loaded until necessary, saving bandwidth and server resources.

3. Improved SEO
Faster loading time contributes positively to SEO, as Google prioritizes quicker-loading websites.




How to Improve Website Performance with Lazy Loading


<BlogMeta>
{{
  title: "Optimizing Performance with Minimalistic Design",
  date: "2025-01-06",
  description: "Don't be sluggish, read on how minimalist design can boost website or app performance and improve user experience.",
  image: "",
  url: "https://monyasau.netlify.app/blog/optimizing-performance-with-minimalistic-design",
  slug: "optimizing-performance-with-minimalistic-design",
  keywords: ["minimalist", "design", "performance", "web optimization"],
  }}
  </BlogMeta>
  <hr/>
  

By simplifying the visual hierarchy and reducing non-essential content, minimalist design directly contributes to improved load speeds and user satisfaction.

## Benefits of Minimalist Web Design
1. Improved User Experience
A clean, straightforward layout allows users to focus on content without distractions.

2. Faster Load Times
By reducing the number of elements and images, pages load faster, improving overall performance.

3. Timeless Appeal
Minimalistic design is often more enduring, avoiding trends that can quickly feel outdated.

## Considerations for Minimalist Design
- [x] **Not every website should be minimalist**; it's crucial to align the design with your content's goals.
Sometimes less is more, but attention must be paid to ensure usability is not sacrificed for aesthetics.

- [ ] **Use whitespace effectively** to allow users to focus on key actions or information.

By simplifying the visual hierarchy and reducing non-essential content, minimalist design directly contributes to improved load speeds and user satisfaction, **sometimes**.

## Why Simplifying Your Design Matters
In the end, minimalist design isn't just a trend—it's a powerful tool for creating faster, more effective websites. It helps users engage with content more easily, boosts performance, and provides a timeless aesthetic that adapts well to future needs.

> Remember, in web design, sometimes less really is more. - ***Me***

Optimizing Performance with Minimalistic Design


<BlogMeta>
{{
  title: "Ideas",
  date: "2025-01-11",
  description: "Should be private ",
  image: "",
  url: "https://monyasau.netlify.app/blog/ideas",
  slug: "ideas",
  keywords: [""],
  }}
  </BlogMeta>
  <hr/>
  
## stuff to add to blog

- share blog post card and button
- automated/sheduled posts
- email list or newsletter
- write for other blogs
- comments and post view/like count
- community(discussions)
- social sharing button

Ideas


<BlogMeta>
{{
  title: "Why I Want to Be a Frontend Developer and How HNG Will Help Me Achieve My Goals",
  date: "2025-01-30",
  description: "I'm olanrewaju and my journey into frontend development began with a curiosity about how websites and ngrok work. This curiosity evolved into a passionate pursuit of becoming a frontend developer, and I'm excited to share my story and aspirations.",
  image: "",
  url: "https://monyasau.netlify.app/blog/why-i-want-to-be-a-frontend-developer-and-how-hng",
  slug: "why-i-want-to-be-a-frontend-developer-and-how-hng",
  keywords: [""],
  }}
  </BlogMeta>

  <hr/>

  <h3 class="text-glow font-semibold text-6xl mb-4 not-prose">My Motivation.</h3>
I'm olanrewaju and my journey into frontend development began with a curiosity about how websites and ngrok work. This curiosity evolved into a passionate pursuit and motivated me into becoming a frontend developer, and I'm excited to share my aspirations.

## Why HNG Internship?

The HNG Internship is an opportunity for me to **accelerate my growth** in the web development field. I'm doing it for the practical experience that the internship offers. Building real-world projects and working with experienced developers will also help me bridge the gap between theory and practice. Also, the networking opportunities within the HNG community is also useful but if you need engineers who can help build interactive UIs, you can [Hire some Vue.js Developers from hng](https://hng.tech/hire/vuejs-developers) to bring your ideas to the web.

## My Goals for the Internship

During this internship, I've set several specific goals for myself:

### Technical Skills
- Master modern JavaScript frameworks and libraries
- Improve my understanding of web performance optimization
- Learn best practices for writing clean, maintainable code

### Soft Skills
- I want to my improve ability to work in remote teams
- Improve my technical communication skills
- Develop better time management and project planning abilities

### Professional Development
- Build a strong portfolio of real-world projects
- Network with other developers and mentors
- Gain confidence in tackling complex technical challenges

## How I Plan to Achieve These Goals

My strategy for success in the HNG internship involves:

1. **Daily Practice**: Dedicating specific hours each day to coding and learning
2. **Active Participation**: Engaging in team projects and discussions on the slack space
4. **Seeking Feedback**: Actively requesting and implementing feedback from mentors and peers

## Looking Forward

The frontend development landscape is  evolving, and I'm excited to be part of it. Through the HNG internship, I aim to not only develop technical proficiency but grow into a well-rounded developer who can contribute meaningfully to the tech community and make the most of this opportunity. If you're looking for skilled developers, you can [Hire Web Developers](https://hng.tech/hire/web-developers) through HNG.

---

*This blog post is part of my journey as an HNG intern, where I'm working towards becoming a professional frontend developer. Follow along as I document my progress and share my experiences in the world of web development.*

My Blog Posts