feat(Clerk Upgrades): upgrades to Clerk v5

- Upgrades required changes in Middleware
- Import changes for server side functions
- UserProfile requires a path
https://github.com/clerk/javascript/blob/main/packages/nextjs/CHANGELOG.md

package.json

@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@clerk/localizations": "^1.26.13",
-    "@clerk/nextjs": "^4.29.1",
+    "@clerk/nextjs": "5.0.0-alpha-v5.17",
     "@hookform/resolvers": "^3.3.3",
     "@libsql/client": "^0.3.6",
     "@sentry/nextjs": "^7.91.0",

src/app/[locale]/(auth)/(center)/layout.tsx

@@ -1,4 +1,4 @@
-import { auth } from '@clerk/nextjs';
+import { auth } from '@clerk/nextjs/server';
 import { redirect } from 'next/navigation';
 import React from 'react';
 

src/app/[locale]/(auth)/(center)/sign-in/[[...sign-in]]/page.tsx

@@ -13,6 +13,6 @@ export async function generateMetadata(props: { params: { locale: string } }) {
   };
 }
 
-const SignInPage = () => <SignIn />;
+const SignInPage = () => <SignIn path="/sign-in" />;
 
 export default SignInPage;

src/app/[locale]/(auth)/(center)/sign-up/[[...sign-up]]/page.tsx

@@ -13,6 +13,6 @@ export async function generateMetadata(props: { params: { locale: string } }) {
   };
 }
 
-const SignUpPage = () => <SignUp />;
+const SignUpPage = () => <SignUp path="sign-up" />;
 
 export default SignUpPage;

src/app/[locale]/(auth)/dashboard/user-profile/[[...user-profile]]/page.tsx

@@ -14,7 +14,7 @@ export async function generateMetadata(props: { params: { locale: string } }) {
 
 const UserProfilePage = () => (
   <div className="my-6 -ml-16">
-    <UserProfile />
+    <UserProfile path="/dashboard/user-profile" />
   </div>
 );
 

src/components/Hello.tsx

@@ -1,4 +1,4 @@
-import { currentUser } from '@clerk/nextjs';
+import { currentUser } from '@clerk/nextjs/server';
 import { getTranslations } from 'next-intl/server';
 
 const Hello = async () => {

src/middleware.ts

@@ -1,5 +1,8 @@
-import { authMiddleware, redirectToSignIn } from '@clerk/nextjs';
-import type { NextRequest } from 'next/server';
+import {
+  clerkMiddleware,
+  experimental_createRouteMatcher,
+  redirectToSignIn,
+} from '@clerk/nextjs/server';
 import createMiddleware from 'next-intl/middleware';
 
 import { AppConfig } from './utils/AppConfig';
@@ -10,23 +13,18 @@ const intlMiddleware = createMiddleware({
   defaultLocale: AppConfig.defaultLocale,
 });
 
-export default authMiddleware({
-  publicRoutes: (req: NextRequest) =>
-    !req.nextUrl.pathname.includes('/dashboard'),
-
-  beforeAuth: (req) => {
-    // Execute next-intl middleware before Clerk's auth middleware
-    return intlMiddleware(req);
-  },
-
-  // eslint-disable-next-line consistent-return
-  afterAuth(auth, req) {
-    // Handle users who aren't authenticated
-    if (!auth.userId && !auth.isPublicRoute) {
+export default clerkMiddleware(
+  (auth, req) => {
+    const isProtectedRoute = experimental_createRouteMatcher([
+      'dashboard/(.*)',
+    ]);
+    if (!auth().userId && isProtectedRoute(req)) {
       return redirectToSignIn({ returnBackUrl: req.url });
     }
+    return intlMiddleware(req);
   },
-});
+  { debug: true },
+);
 
 export const config = {
   matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],