[BUG] - Hydration Issue Handling Missing in Page Router Example

[Miladxsar23]

HeroUI Version

2.7.0

Describe the bug

Title: Hydration Issue Handling Missing in Page Router Example

Description:

I have noticed that in the example provided for the app router using useTheme from the next-themes package, the mounted state is checked to prevent hydration errors. However, in the page router example, this check is omitted, even though hydration issues can still occur there as well.

To maintain consistency and prevent potential hydration errors across both routing strategies, I suggest adding the mounted check in the page router example as well. Hydration mismatches can occur in page router as much as in app router, and the solution of checking whether the component has mounted or not is crucial for preventing mismatched rendering during the initial hydration phase.

---

Suggested Change:

Please update the page router example to include the mounted state check, similar to the app router example, to handle hydration issues correctly.

Additional Context:

Ensuring that the mounted state check is applied in both routing strategies will prevent potential rendering issues and improve the reliability of the theme switching mechanism across different routing approaches in Next.js applications.

---

Benefits of this change:

• Prevents potential hydration-related rendering issues in page router.
• Provides consistent and correct behavior across both routing approaches in Next.js.
• Clarifies the usage of useTheme in both app and page routers.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Go to the following URL in the documentation: https://www.heroui.com/docs/customization/dark-mode#add-the-theme-switcher-1
2. Check the provided examples for both app router and page router implementations of the useTheme hook.

Expected behavior

• In the app router example, you’ll notice the mounted state is used to prevent hydration issues.
• However, in the page router example, this is missing, even though hydration issues can also occur in this case.

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[linear]

ENG-2223 [BUG] - Hydration Issue Handling Missing in Page Router Example