Updating to latest version of Clerk (#41192)

## Documentation / Examples

Updating Clerk to latest example for our with-clerk. 


Co-authored-by: jamesp-codes <84922519+jamesp-codes@users.noreply.github.com>
Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>

examples/with-clerk/.env.local.example

@@ -1,2 +1,3 @@
-NEXT_PUBLIC_CLERK_FRONTEND_API=your-frontend-api
-CLERK_API_KEY=your-api-key
+NEXT_PUBLIC_CLERK_FRONTEND_API=your_clerk_frontend_api
+CLERK_API_KEY=your_clerk_api_key
+CLERK_JWT_KEY=your_clerk_jwt_key

examples/with-clerk/middleware.js

@@ -0,0 +1,10 @@
+import { withClerkMiddleware } from '@clerk/nextjs/server'
+import { NextResponse } from 'next/server'
+
+export default withClerkMiddleware((_req) => {
+  return NextResponse.next()
+})
+
+export const config = {
+  matcher: ['/api/getAuthenticatedUserId'],
+}

examples/with-clerk/package.json

@@ -6,9 +6,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "@clerk/nextjs": "1.0.1",
+    "@clerk/nextjs": "4.5.1",
     "next": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   }
 }

examples/with-clerk/pages/api/getAuthenticatedUserId.js

@@ -1,10 +1,9 @@
-import { withSession } from '@clerk/nextjs/api'
+import { getAuth } from '@clerk/nextjs/server'
 
-export default withSession((req, res) => {
-  res.statusCode = 200
-  if (req.session) {
-    res.json({ id: req.session.userId })
-  } else {
-    res.json({ id: null })
+export default function handler(req, res) {
+  const { sessionId, userId } = getAuth(req)
+  if (!sessionId) {
+    return res.status(401).json({ id: null })
   }
-})
+  return res.status(200).json({ id: userId })
+}

examples/with-clerk/pages/index.js

@@ -40,16 +40,15 @@ const SignupLink = () => (
   </Link>
 )
 
-const apiSample = `import { withSession } from '@clerk/nextjs/api'
+const apiSample = `import { getAuth } from '@clerk/nextjs/server'
 
-export default withSession((req, res) => {
-  res.statusCode = 200
-  if (req.session) {
-    res.json({ id: req.session.userId })
-  } else {
-    res.json({ id: null })
+export default function handler(req, res) {
+  const { sessionId, userId } = getAuth(req);
+  if (!sessionId) {
+    return res.status(401).json({ id: null });
   }
-})`
+  return res.status(200).json({ id: userId });
+}`
 
 // Main component using <SignedIn> & <SignedOut>.
 //