chore: add note about hydration warning for next-themes (#503)

* chore: add note about hydration warning for next-themes * add changeset
premieroctet · Dec 13, 2024 · 248838e · 248838e
1 parent 07d8996
commit 248838e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/.changeset/thin-flowers-prove.md b/.changeset/thin-flowers-prove.md
@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin-cli": patch
+---
+
+chore: add extra instructions for app router
diff --git a/apps/docs/pages/docs/getting-started.mdx b/apps/docs/pages/docs/getting-started.mdx
@@ -109,7 +109,7 @@ Next-Admin uses a dynamic route `[[...nextadmin]]` to handle all the admin route
     export default async function AdminPage({
       params,
       searchParams,
-    }: PageProps) {
+    }: PageProps) { // or PromisePageProps for Next 15+
       const props = await getNextAdminProps({
         params: params.nextadmin,
         searchParams,
@@ -135,6 +135,12 @@ Next-Admin uses a dynamic route `[[...nextadmin]]` to handle all the admin route
       Make sure to not use `use client` in the page.
     </Callout>
 
+    <Callout emoji="⚠️">
+      Because we are using [next-themes](https://github.com/pacocoursey/next-themes) to handle dark mode,
+      you will need to add the `suppressHydrationWarning` to your the closest `<html>` tag of the admin page.
+      See [the next-themes docs](https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app)
+    </Callout>
+
   </Tabs.Tab>
   <Tabs.Tab>
 

diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
@@ -277,7 +277,13 @@ experimental: {
     extraInstructions = `You will need to do the following manually:
 - ${usesBabel ? `${packageManagerData.name} ${packageManagerData.installDevCmd} babel-plugin-superjson-next superjson@^1` : `${packageManagerData.name} ${packageManagerData.installDevCmd} next-superjson-plugin superjson`}
 - ${superjsonInstructions}
-- Add "@premieroctet/next-admin" to your transpilePackages array in the Next.js configuration file 
+- Add "@premieroctet/next-admin" to your transpilePackages array in the Next.js configuration file
+`;
+  }
+
+  if (routerRootPath.type === "app") {
+    extraInstructions = `You will need to do the following manually:
+- Add the suppressHydrationWarning prop to the closest <html> tag for the admin page
 `;
   }