docs: add clerk sample for app router; upgrade docusaurus to 3.4

Author: ymc9

docs/guides/authentication/clerk.md

@@ -4,6 +4,9 @@ sidebar_position: 2
 sidebar_label: Clerk
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Integrating With Clerk
 
 [Clerk](https://clerk.com/) is a comprehensive authentication and user management platform, providing both APIs and pre-made UI components.
@@ -50,20 +53,45 @@ You can create an enhanced Prisma client that automatically validates access pol
 
 To create such a client with a standard setup, call the `enhance` API with a regular Prisma client and the current user (fetched from Clerk). Here's an example:
 
+<Tabs>
+
+<TabItem value="app-router" label="Next.js App Router">
+
+```ts
+import { enhance } from '@zenstackhq/runtime';
+import { auth } from "@clerk/nextjs/server";
+import { prisma } from '../lib/db';
+
+async function getPrisma() {
+  const authObject = auth();
+  // create a wrapper of Prisma client that enforces access policy
+  return enhance(prisma, {
+    user: authObject ? { id: authObject.userId } : undefined,
+  });
+}
+```
+
+</TabItem>
+
+<TabItem value="react" label="Next.js Pages Router">
+
 ```ts
 import type { NextApiRequest } from 'next';
 import { enhance } from '@zenstackhq/runtime';
 import { getAuth } from '@clerk/nextjs/server';
 import { prisma } from '../lib/db';
 
 async function getPrisma(req: NextApiRequest) {
-    const auth = getAuth(req);
-    // create a wrapper of Prisma client that enforces access policy,
-    // data validation, and @password, @omit behaviors
-    return enhance(prisma, { user: auth ? { id: auth.userId } : undefined });
+  const auth = getAuth(req);
+  // create a wrapper of Prisma client that enforces access policy
+  return enhance(prisma, { user: auth ? { id: auth.userId } : undefined });
 }
 ```
 
+</TabItem>
+
+</Tabs>
+
 ---
 
-You can find a working sample project [here](https://github.com/zenstackhq/docs-tutorial-clerk).
+You can find a working sample project for Next.js [here](https://github.com/zenstackhq/docs-tutorial-clerk). Use the "main" branch for app router, and the "pages-router" branch for pages router.

docs/quick-start/nextjs-app-router.mdx

@@ -1,7 +1,7 @@
 ---
 title: Next.js (app router)
 description: Step-by-step guide for building a blogging app with Next.js (app router).
-sidebar_position: 2
+sidebar_position: 1
 ---
 
 import Requirements from './_requirements.md';

docs/quick-start/nextjs.mdx

@@ -1,7 +1,7 @@
 ---
 title: Next.js (pages router)
 description: Step-by-step guide for building a blogging app with Next.js (pages router).
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 import Requirements from './_requirements.md';

package.json

@@ -16,10 +16,10 @@
     },
     "dependencies": {
         "@algolia/client-search": "^4.22.1",
-        "@docusaurus/core": "3.2.1",
-        "@docusaurus/preset-classic": "3.2.1",
-        "@docusaurus/theme-common": "3.2.1",
-        "@docusaurus/theme-mermaid": "3.2.1",
+        "@docusaurus/core": "3.4.0",
+        "@docusaurus/preset-classic": "3.4.0",
+        "@docusaurus/theme-common": "3.4.0",
+        "@docusaurus/theme-mermaid": "3.4.0",
         "@giscus/react": "^2.4.0",
         "@mdx-js/react": "^3.0.1",
         "autoprefixer": "^10.4.13",
@@ -35,8 +35,8 @@
         "tailwindcss": "^3.2.4"
     },
     "devDependencies": {
-        "@docusaurus/module-type-aliases": "3.2.1",
-        "@docusaurus/types": "^3.2.1",
+        "@docusaurus/module-type-aliases": "3.4.0",
+        "@docusaurus/types": "^3.4.0",
         "@tailwindcss/typography": "^0.5.9",
         "@tsconfig/docusaurus": "^2.0.3",
         "@types/node": "^20.11.17",