docs: add next js with app router example (#7552)

* move the existing example to with-script-in-browser

* Add example with next js app router

* disable ssr for excalidraw client comp

* typo

* update output dir

* don't include nextjs example in tsconfig

* remove meta.json

* lint

* remove example.ts

* port

* move the examples outside packages and use the deps as workspaces in examples

* update gitignore

* fix example

* update path of build dir

* fix

* fix scripts

* try local path

* fix

* update commands

* fix

* fix

* fix script

* skip ts

* disable ts

* add vercel.json

* install

* update tsconfig

* fix lint

* remove console.log

* lets see if this works

* revert

* remove ts nocheck

* add types and some utils in nextjs example

* fix types

* updatw example and remove nextjs dynamic syntax so we don't import excal twice

* move both examples to workspaces and create generic example to be used by browser and next js both

* copy the static assets to nextjs

* fix ts config

* render custom menu items

* fix custom footer

* fix types in browser example

* use regular imports for importing excal and import it using dynamic next js in app router instead

* Add example for pages router

* fix css discrepancies

* fix css

* configure output dir

* fix

* fix css

* rename to with-nextjs

* move components to examples/excalidraw/components

scripts/buildExample.mjs

@@ -4,8 +4,9 @@ import { execSync } from "child_process";
 
 const createDevBuild = async () => {
   return await esbuild.build({
-    entryPoints: ["example/index.tsx"],
-    outfile: "example/public/bundle.js",
+    entryPoints: ["../../examples/excalidraw/with-script-in-browser/index.tsx"],
+    outfile:
+      "../../examples/excalidraw/with-script-in-browser/public/bundle.js",
     define: {
       "import.meta.env": "{}",
     },
@@ -26,7 +27,7 @@ const startServer = async (ctx) => {
   });
 };
 execSync(
-  `rm -rf example/public/dist && yarn build:esm && cp -r dist example/public`,
+  `rm -rf ../../examples/excalidraw/with-script-in-browser/public/dist && yarn build:esm && cp -r dist ../../examples/excalidraw/with-script-in-browser/public`,
 );
 
 const ctx = await createDevBuild();