diff --git a/.changeset/thin-flowers-prove.md b/.changeset/thin-flowers-prove.md
new file mode 100644
index 00000000..4b4cbdb2
--- /dev/null
+++ 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
index 2a16ac99..32891b70 100644
--- 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.
+
+ 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 `` tag of the admin page.
+ See [the next-themes docs](https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app)
+
+
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index 1e466460..e9f57e79 100644
--- 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 tag for the admin page
`;
}