diff options
| author | kj_sh604 | 2026-03-15 16:19:35 -0400 |
|---|---|---|
| committer | kj_sh604 | 2026-03-15 16:19:35 -0400 |
| commit | 225db4a7805befe009fe055fc2ef5daedd6c04f9 (patch) | |
| tree | a5b0d073daabaadceb2f5c1b18640d785b5a9c71 /examples/with-nextjs/src | |
| parent | 8ff10d2bf233608b027f8503cb9c7100c9ee3f16 (diff) | |
refactor: examples/
Diffstat (limited to 'examples/with-nextjs/src')
| -rw-r--r-- | examples/with-nextjs/src/app/favicon.ico | bin | 0 -> 25931 bytes | |||
| -rw-r--r-- | examples/with-nextjs/src/app/layout.tsx | 11 | ||||
| -rw-r--r-- | examples/with-nextjs/src/app/page.tsx | 26 | ||||
| -rw-r--r-- | examples/with-nextjs/src/common.scss | 15 | ||||
| -rw-r--r-- | examples/with-nextjs/src/excalidrawWrapper.tsx | 22 | ||||
| -rw-r--r-- | examples/with-nextjs/src/pages/excalidraw-in-pages.tsx | 22 |
6 files changed, 96 insertions, 0 deletions
diff --git a/examples/with-nextjs/src/app/favicon.ico b/examples/with-nextjs/src/app/favicon.ico Binary files differnew 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 /> + </> + ); +} diff --git a/examples/with-nextjs/src/common.scss b/examples/with-nextjs/src/common.scss new file mode 100644 index 0000000..456bc76 --- /dev/null +++ b/examples/with-nextjs/src/common.scss @@ -0,0 +1,15 @@ +* { + box-sizing: border-box; + font-family: sans-serif; +} + +a { + color: #1c7ed6; + font-size: 20px; + text-decoration: none; + font-weight: 500; +} + +.page-title { + text-align: center; +} diff --git a/examples/with-nextjs/src/excalidrawWrapper.tsx b/examples/with-nextjs/src/excalidrawWrapper.tsx new file mode 100644 index 0000000..b4c45fa --- /dev/null +++ b/examples/with-nextjs/src/excalidrawWrapper.tsx @@ -0,0 +1,22 @@ +"use client"; +import * as excalidrawLib from "@excalidraw/excalidraw"; +import { Excalidraw } from "@excalidraw/excalidraw"; +import App from "../../with-script-in-browser/components/ExampleApp"; + +import "@excalidraw/excalidraw/index.css"; + +const ExcalidrawWrapper: React.FC = () => { + return ( + <> + <App + appTitle={"Excalidraw with Nextjs Example"} + useCustom={(api: any, args?: any[]) => {}} + excalidrawLib={excalidrawLib} + > + <Excalidraw /> + </App> + </> + ); +}; + +export default ExcalidrawWrapper; diff --git a/examples/with-nextjs/src/pages/excalidraw-in-pages.tsx b/examples/with-nextjs/src/pages/excalidraw-in-pages.tsx new file mode 100644 index 0000000..527a346 --- /dev/null +++ b/examples/with-nextjs/src/pages/excalidraw-in-pages.tsx @@ -0,0 +1,22 @@ +import dynamic from "next/dynamic"; +import "../common.scss"; + +// Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically +// with ssr false +const Excalidraw = dynamic( + async () => (await import("../excalidrawWrapper")).default, + { + ssr: false, + }, +); + +export default function Page() { + return ( + <> + <a href="/">Switch to App router</a> + <h1 className="page-title">Pages Router</h1> + {/* @ts-expect-error - https://github.com/vercel/next.js/issues/42292 */} + <Excalidraw /> + </> + ); +} |