From 86859fa71a33bfd67c2aa0779d8217f2604a4e0c Mon Sep 17 00:00:00 2001
From: victoria <github@victoriahchang.com>
Date: Tue, 3 Dec 2024 10:54:43 -0500
Subject: [PATCH] (users/metadata) fix: next.js app router code and remove page
 router code (#1758)

---
 docs/users/metadata.mdx | 262 ++++++++++++----------------------------
 1 file changed, 78 insertions(+), 184 deletions(-)

diff --git a/docs/users/metadata.mdx b/docs/users/metadata.mdx
index 43cc5f2290..f5b54aac9e 100644
--- a/docs/users/metadata.mdx
+++ b/docs/users/metadata.mdx
@@ -22,44 +22,24 @@ Private metadata is only accessible by the backend, which makes this useful for
 
 <Tabs type="framework" items={["Next.js", "Node", "Go", "Ruby", "cURL"]}>
   <Tab>
-    <CodeBlockTabs type="router" options={["App Router", "Pages Router"]}>
-      ```ts {{ filename: 'app/route/private.ts' }}
-      import { NextResponse } from 'next/server'
-      import { clerkClient } from '@clerk/nextjs/server'
+    ```ts {{ filename: 'app/private/route.ts' }}
+    import { NextRequest, NextResponse } from 'next/server'
+    import { clerkClient } from '@clerk/nextjs/server'
 
-      export async function POST() {
-        const { stripeId, userId } = await body.json()
+    export async function POST(request: NextRequest) {
+      const { stripeId, userId } = await request.json()
 
-        const client = await clerkClient()
+      const client = await clerkClient()
 
-        await client.users.updateUserMetadata(userId, {
-          privateMetadata: {
-            stripeId: stripeId,
-          },
-        })
-        return NextResponse.json({ success: true })
-      }
-      ```
-
-      ```ts {{ filename: 'pages/api/private.ts' }}
-      import { clerkClient } from '@clerk/nextjs/server'
-      import { NextApiRequest, NextApiResponse } from 'next'
-
-      export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-        const { stripeId, userId } = req.body
-
-        const client = await clerkClient()
-
-        await client.users.updateUserMetadata(userId, {
-          privateMetadata: {
-            stripeId: stripeId,
-          },
-        })
+      await client.users.updateUserMetadata(userId, {
+        privateMetadata: {
+          stripeId: stripeId,
+        },
+      })
 
-        res.status(200).json({ success: true })
-      }
-      ```
-    </CodeBlockTabs>
+      return NextResponse.json({ success: true })
+    }
+    ```
   </Tab>
 
   <Tab>
@@ -135,36 +115,20 @@ You can retrieve the private metadata for a user by using the [`getUser`](/docs/
 
 <Tabs type="framework" items={["Next.js", "Node", "cURL", "Go", "Ruby"]}>
   <Tab>
-    <CodeBlockTabs type="router" options={["App Router", "Pages Router"]}>
-      ```ts {{ filename: 'app/private/route.ts' }}
-      import { NextResponse } from 'next/server'
-      import { clerkClient } from '@clerk/nextjs/server'
-
-      export async function GET(request: Request) {
-        const { stripeId, userId } = await request.body.json()
-
-        const client = await clerkClient()
-
-        const user = await client.users.getUser(userId)
-        return NextResponse.json(user.privateMetadata)
-      }
-      ```
+    ```ts {{ filename: 'app/private/route.ts' }}
+    import { NextRequest, NextResponse } from 'next/server'
+    import { clerkClient } from '@clerk/nextjs/server'
 
-      ```ts {{ filename: 'pages/api/private.ts' }}
-      import { clerkClient } from '@clerk/nextjs/server'
-      import { NextApiRequest, NextApiResponse } from 'next'
+    export async function GET(request: NextRequest) {
+      const { userId } = await request.json()
 
-      export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-        const { userId } = await req.body.json()
+      const client = await clerkClient()
 
-        const client = await clerkClient()
+      const user = await client.users.getUser(userId)
 
-        const user = await client.users.getUser(userId)
-
-        res.status(200).json(user.privateMetadata)
-      }
-      ```
-    </CodeBlockTabs>
+      return NextResponse.json(user.privateMetadata)
+    }
+    ```
   </Tab>
 
   <Tab>
@@ -224,44 +188,24 @@ Public metadata is accessible by both the frontend and the backend, but can only
 
 <Tabs type="framework" items={["Next.js", "Node", "Go", "Ruby", "cURL"]}>
   <Tab>
-    <CodeBlockTabs type="router" options={["App Router", "Pages Router"]}>
-      ```ts {{ filename: 'app/route/public.ts' }}
-      import { NextResponse } from 'next/server'
-      import { clerkClient } from '@clerk/nextjs/server'
-
-      export async function POST() {
-        const { role, userId } = await body.json()
-
-        const client = await clerkClient()
-
-        await client.users.updateUserMetadata(userId, {
-          publicMetadata: {
-            role,
-          },
-        })
-        return NextResponse.json({ success: true })
-      }
-      ```
+    ```ts {{ filename: 'app/public/route.ts' }}
+    import { NextRequest, NextResponse } from 'next/server'
+    import { clerkClient } from '@clerk/nextjs/server'
 
-      ```ts {{ filename: 'pages/api/public.ts' }}
-      import { clerkClient } from '@clerk/nextjs/server'
-      import { NextApiRequest, NextApiResponse } from 'next'
+    export async function POST(request: NextRequest) {
+      const { stripeId, userId } = await request.json()
 
-      export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-        const { role, userId } = req.body
+      const client = await clerkClient()
 
-        const client = await clerkClient()
-
-        await client.users.updateUserMetadata(userId, {
-          publicMetadata: {
-            role,
-          },
-        })
+      await client.users.updateUserMetadata(userId, {
+        privateMetadata: {
+          stripeId: stripeId,
+        },
+      })
 
-        res.status(200).json({ success: true })
-      }
-      ```
-    </CodeBlockTabs>
+      return NextResponse.json({ success: true })
+    }
+    ```
   </Tab>
 
   <Tab>
@@ -355,44 +299,24 @@ Updating this value overrides the previous value; it does not merge. To perform
 
 <Tabs type="framework" items={["Next.js", "Node", "Go", "Ruby",  "cURL"]}>
   <Tab>
-    <CodeBlockTabs type="router" options={["App Router", "Pages Router"]}>
-      ```ts {{ filename: 'app/route/private.ts' }}
-      import { NextResponse } from 'next/server'
-      import { clerkClient } from '@clerk/nextjs/server'
+    ```ts {{ filename: 'app/unsafe/route.ts' }}
+    import { NextRequest, NextResponse } from 'next/server'
+    import { clerkClient } from '@clerk/nextjs/server'
 
-      export async function POST() {
-        const { stripeId, userId } = await body.json()
+    export async function POST(request: NextRequest) {
+      const { userId } = await request.json()
 
-        const client = await clerkClient()
+      const client = await clerkClient()
 
-        await client.users.updateUserMetadata(userId, {
-          unsafeMetadata: {
-            birthday: '11-30-1969',
-          },
-        })
-        return NextResponse.json({ success: true })
-      }
-      ```
-
-      ```ts {{ filename: 'pages/api/private.ts' }}
-      import { clerkClient } from '@clerk/nextjs/server'
-      import { NextApiRequest, NextApiResponse } from 'next'
-
-      export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-        const { stripeId, userId } = req.body
-
-        const client = await clerkClient()
-
-        await client.users.updateUserMetadata(userId, {
-          unsafeMetadata: {
-            birthday: '11-30-1969',
-          },
-        })
+      await client.users.updateUserMetadata(userId, {
+        unsafeMetadata: {
+          birthday: '11-30-1969',
+        },
+      })
 
-        res.status(200).json({ success: true })
-      }
-      ```
-    </CodeBlockTabs>
+      return NextResponse.json({ success: true })
+    }
+    ```
   </Tab>
 
   <Tab>
@@ -465,62 +389,32 @@ Updating this value overrides the previous value; it does not merge. To perform
 
 <Tabs type="framework" items={["Next.js", "React", "Remix", "JavaScript"]}>
   <Tab>
-    <CodeBlockTabs type="router" options={["App Router", "Pages Router"]}>
-      ```tsx {{ filename: 'app/route/unsafe.tsx' }}
-      'use client'
-      import { useUser } from '@clerk/nextjs'
-      import { useState } from 'react'
-
-      export default function UnSafePage() {
-        const { user } = useUser()
-        const [birthday, setBirthday] = useState('')
-
-        return (
-          <div>
-            <input type="text" value={birthday} onChange={(e) => setBirthday(e.target.value)} />
-            <button
-              onClick={() => {
-                user.update({
-                  unsafeMetadata: {
-                    birthday,
-                  },
-                })
-              }}
-            >
-              Update Birthday
-            </button>
-          </div>
-        )
-      }
-      ```
-
-      ```tsx {{ filename: 'pages/unsafe.tsx' }}
-      import { useUser } from '@clerk/nextjs'
-      import { useState } from 'react'
-
-      export default function UnSafePage() {
-        const { user } = useUser()
-        const [birthday, setBirthday] = useState('')
-
-        return (
-          <div>
-            <input type="text" value={birthday} onChange={(e) => setBirthday(e.target.value)} />
-            <button
-              onClick={() => {
-                user.update({
-                  unsafeMetadata: {
-                    birthday,
-                  },
-                })
-              }}
-            >
-              Update Birthday
-            </button>
-          </div>
-        )
-      }
-      ```
-    </CodeBlockTabs>
+    ```tsx {{ filename: 'app/unsafe/route.tsx' }}
+    'use client'
+    import { useUser } from '@clerk/nextjs'
+    import { useState } from 'react'
+
+    export default function UnSafePage() {
+      const { user } = useUser()
+      const [birthday, setBirthday] = useState('')
+
+      return (
+        <div>
+          <input type="text" value={birthday} onChange={(e) => setBirthday(e.target.value)} />
+
+          <button
+            onClick={() => {
+              user?.update({
+                unsafeMetadata: { birthday },
+              })
+            }}
+          >
+            Update birthday
+          </button>
+        </div>
+      )
+    }
+    ```
   </Tab>
 
   <Tab>