From 8128128e22bb9e114a6e439bc9b8e8b975889c51 Mon Sep 17 00:00:00 2001 From: Kanav <110983198+kanavbajaj@users.noreply.github.com> Date: Sat, 4 Jan 2025 19:39:38 +0530 Subject: [PATCH] Update README.md Fixes issue #311 Used a conditional rendering strategy that waits until the client has mounted before rendering the Image component. --- next-themes/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/next-themes/README.md b/next-themes/README.md index 2d6bc5eb..3fefaa66 100644 --- a/next-themes/README.md +++ b/next-themes/README.md @@ -425,7 +425,7 @@ To avoid [Layout Shift](https://web.dev/cls/), consider rendering a skeleton/pla Showing different images based on the current theme also suffers from the hydration mismatch problem. With [`next/image`](https://nextjs.org/docs/basic-features/image-optimization) you can use an empty image until the theme is resolved: ```jsx -import Image from 'next/image' +[import Image from 'next/image' import { useTheme } from 'next-themes' function ThemedImage() { @@ -447,7 +447,7 @@ function ThemedImage() { return } -export default ThemedImage +export default ThemedImage](https://github.com/kanavbajaj/next-themes.git) ``` #### CSS