From 30ae932245f3a1ed8aa7ada2daca42d81ff0620c Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Tue, 14 Sep 2021 17:47:08 -0400
Subject: [PATCH] Update readme with `next/image` example (#57)

* Update readme with `next/image` example

* Fix typo

* Wrap component

Co-authored-by: Paco <34928425+pacocoursey@users.noreply.github.com>

* Indent

Co-authored-by: Paco <34928425+pacocoursey@users.noreply.github.com>
---
 README.md | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 51019b0..d0ca173 100644
--- a/README.md
+++ b/README.md
@@ -332,7 +332,33 @@ const ThemeChanger = () => {
 }
 ```
 
-To avoid Content Layout Shift, consider rendering a skeleton until mounted on the client side.
+To avoid [Layout Shift](https://web.dev/cls/), consider rendering a skeleton/placeholder until mounted on the client side.
+
+For example, with [`next/image`](https://nextjs.org/docs/basic-features/image-optimization) you can use an empty image until the theme is resolved.
+
+```js
+import Image from 'next/image'
+import { useTheme } from 'next-themes'
+
+function ThemedImage() {
+  const { resolvedTheme } = useTheme()
+  let src
+
+  switch (resolvedTheme) {
+    case 'light':
+      src = '/light.png'
+      break
+    case 'dark':
+      src = '/dark.png'
+      break
+    default:
+      src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+      break
+  }
+
+  return <Image src={src} width={400} height={400} />
+}
+```
 
 ### With Tailwind