Update README with instructions for Next.js 13 appDir (#168)

Update README.md
pacocoursey · Mar 10, 2023 · a385b8d · a385b8d
1 parent 8fc17e2
commit a385b8d
Showing 1 changed file with 57 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -5,6 +5,7 @@ An abstraction for themes in your Next.js app.
 - ✅ Perfect dark mode in 2 lines of code
 - ✅ System setting with prefers-color-scheme
 - ✅ Themed browser UI with color-scheme
+- ✅ Support for Next.js 13 `appDir`
 - ✅ No flash on load (both SSR and SSG)
 - ✅ Sync theme across tabs and windows
 - ✅ Disable flashing when changing themes
@@ -24,6 +25,8 @@ $ yarn add next-themes
 
 ## Use
 
+### With pages/
+
 You'll need a [Custom `App`](https://nextjs.org/docs/advanced-features/custom-app) to use next-themes. The simplest `_app` looks like this:
 
 ```js
@@ -52,6 +55,60 @@ function MyApp({ Component, pageProps }) {
 export default MyApp
 ```
 
+### With app/
+
+You'll need to update your `app/layout.jsx` to use next-themes. The simplest `layout` looks like this:
+
+```js
+// app/layout.jsx
+
+export default function Layout({ children }) {
+  return (
+    <html>
+      <head />
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+Adding dark mode support still only takes a few lines of code. Start by creating a new [providers component](https://beta.nextjs.org/docs/rendering/server-and-client-components#rendering-third-party-context-providers-in-server-components) in its own file:
+
+```js
+// app/providers.jsx
+
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+
+export function Providers({ children }) {
+  return <ThemeProvider>{children}</ThemeProvider>
+}
+```
+
+Then add the `<Providers>` component to your layout _inside_ of the `<body>`.
+
+```js
+// app/layout.jsx
+
+import { Providers } from './providers'
+
+export default function Layout({ children }) {
+  return (
+    <html suppressHydrationWarning>
+      <head />
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
+```
+
+> **Note!** If you do not add [suppressHydrationWarning](https://reactjs.org/docs/dom-elements.html#suppresshydrationwarning:~:text=It%20only%20works%20one%20level%20deep) to your `<html>` you will get warnings because `next-themes` updates that element. This property only applies one level deep, so it won't block hydration warnings on other elements.
+
+### HTML & CSS
+
 That's it, your Next.js app fully supports dark mode, including System preference with `prefers-color-scheme`. The theme is also immediately synced between tabs. By default, next-themes modifies the `data-theme` attribute on the `html` element, which you can easily use to style your app:
 
 ```css