3 files changed, 37 insertions, 0 deletions
diff --git a/examples/with-nextjs/src/app/favicon.ico b/examples/with-nextjs/src/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
--- /dev/null
+++ b/examples/with-nextjs/src/app/favicon.ico
diff --git a/examples/with-nextjs/src/app/layout.tsx b/examples/with-nextjs/src/app/layout.tsx
new file mode 100644
index 0000000..225b603
--- /dev/null
+++ b/examples/with-nextjs/src/app/layout.tsx
@@ -0,0 +1,11 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/with-nextjs/src/app/page.tsx b/examples/with-nextjs/src/app/page.tsx
new file mode 100644
index 0000000..191aca1
--- /dev/null
+++ b/examples/with-nextjs/src/app/page.tsx
@@ -0,0 +1,26 @@
+import dynamic from "next/dynamic";
+import Script from "next/script";
+import "../common.scss";
+
+// Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically
+// with ssr false
+const ExcalidrawWithClientOnly = dynamic(
+  async () => (await import("../excalidrawWrapper")).default,
+  {
+    ssr: false,
+  },
+);
+
+export default function Page() {
+  return (
+    <>
+      <a href="/excalidraw-in-pages">Switch to Pages router</a>
+      <h1 className="page-title">App Router</h1>
+      <Script id="load-env-variables" strategy="beforeInteractive">
+        {`window["EXCALIDRAW_ASSET_PATH"] = window.origin;`}
+      </Script>
+      {/* @ts-expect-error - https://github.com/vercel/next.js/issues/42292 */}
+      <ExcalidrawWithClientOnly />
+    </>
+  );
+}