Upgrade @clerk/nextjs to the latest version and refactor code for com…

…patibility

.env.example

@@ -8,4 +8,6 @@ POSTGRES_PASSWORD=""
 POSTGRES_DATABASE=""
 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=""
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=""
-CLERK_SECRET_KEY=""
+CLERK_SECRET_KEY=""
+NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
+NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"

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

@@ -3,7 +3,7 @@ import { SignIn } from '@clerk/nextjs';
 export default function Page() {
   return (
     <div className="flex justify-center py-24">
-      <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
+      <SignIn />
     </div>
   );
 }

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

@@ -3,7 +3,7 @@ import { SignUp } from '@clerk/nextjs';
 export default function Page() {
   return (
     <div className="flex justify-center py-24">
-      <SignUp path="/sign-up" routing="path" signInUrl="/sign-in" />
+      <SignUp />
     </div>
   );
 }

app/components/site-header.tsx

@@ -1,5 +1,11 @@
 import Link from 'next/link';
-import { UserButton, SignedIn, SignedOut } from '@clerk/nextjs';
+import {
+  UserButton,
+  SignedIn,
+  SignedOut,
+  SignInButton,
+  SignUpButton,
+} from '@clerk/nextjs';
 import {
   Popover,
   PopoverContent,
@@ -13,19 +19,14 @@ export function SiteHeader() {
       <Link href="/" className="z-20">
         <Icons.logoWordmark className="h-[18px] shrink-0" />
       </Link>
-      <nav>
+      <div className="z-40 inline-flex">
         <SignedIn>
-          <div className="flex items-center justify-center">
-            <Icons.menu className="mr-1.5 size-6 shrink-0" />
-            <div className="size-7 shrink-0">
-              <UserButton />
-            </div>
-          </div>
+          <UserButton />
         </SignedIn>
         <SignedOut>
           <Popover>
             <PopoverTrigger>
-              <div className="flex items-center justify-center text-neutral-800">
+              <div className="flex items-center justify-center p-2 text-neutral-800">
                 <Icons.menu className="mr-1.5 size-6 shrink-0" />
                 <Icons.user className="size-7 shrink-0" />
               </div>
@@ -37,19 +38,17 @@ export function SiteHeader() {
               className="w-60 px-0 py-2 text-neutral-800 shadow-xl"
             >
               <ul className="flex flex-col gap-0.5 text-sm">
-                <Link href={'/sign-up'}>
-                  <li className="py-2.5 pl-4 font-semibold hover:bg-neutral-100">
-                    Sign up
-                  </li>
-                </Link>
-                <Link href={'/sign-in'}>
-                  <li className="py-2.5 pl-4 hover:bg-neutral-100">Sign in</li>
-                </Link>
+                <li className="[&_button]:w-full [&_button]:py-2.5 [&_button]:pl-4 [&_button]:text-left [&_button]:font-semibold [&_button]:hover:bg-neutral-100">
+                  <SignUpButton />
+                </li>
+                <li className="[&_button]:w-full [&_button]:py-2.5 [&_button]:pl-4 [&_button]:text-left [&_button]:hover:bg-neutral-100">
+                  <SignInButton />
+                </li>
               </ul>
             </PopoverContent>
           </Popover>
         </SignedOut>
-      </nav>
+      </div>
     </header>
   );
 }

app/components/ui/scroll-area.tsx

@@ -33,9 +33,9 @@ const ScrollBar = React.forwardRef<
     className={cn(
       'flex touch-none select-none transition-colors',
       orientation === 'vertical' &&
-        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+        'h-full w-2.5 border-l border-l-transparent p-px',
       orientation === 'horizontal' &&
-        'h-2.5 border-t border-t-transparent p-[1px]',
+        'h-2.5 border-t border-t-transparent p-px',
       className,
     )}
     {...props}

app/components/ui/select.tsx

@@ -40,7 +40,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 min-w-32 overflow-hidden rounded-md border border-neutral-200 bg-white text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,

app/globals.css

@@ -87,9 +87,3 @@
     }
   }
 }
-
-/* Clerk styles */
-.cl-userButtonAvatarBox {
-  height: 28px;
-  width: 28px;
-}

app/layout.tsx

@@ -61,23 +61,7 @@ interface RootLayoutProps {
 
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
-    <ClerkProvider
-      appearance={{
-        variables: { colorPrimary: '#000000' },
-        elements: {
-          formButtonPrimary:
-            'bg-black border border-black border-solid hover:bg-white hover:text-black',
-          socialButtonsBlockButton:
-            'bg-white border-gray-200 hover:bg-transparent hover:border-black text-gray-600 hover:text-black',
-          socialButtonsBlockButtonText: 'font-semibold',
-          formButtonReset:
-            'bg-white border border-solid border-gray-200 hover:bg-transparent hover:border-black text-gray-500 hover:text-black',
-          membersPageInviteButton:
-            'bg-black border border-black border-solid hover:bg-white hover:text-black',
-          card: 'bg-[#fafafa]',
-        },
-      }}
-    >
+    <ClerkProvider>
       <html lang="en" className={fontSans.variable}>
         <body>
           <div className="relative flex flex-col">{children}</div>

app/(reservation)/reservation/page.tsx → app/reservation/[[...rest]]/page.tsx

@@ -5,10 +5,10 @@ import { Button } from '@/app/components/ui/button';
 import { Separator } from '@/app/components/ui/separator';
 import { siteConfig } from '@/config/site';
 import { formatCurrency } from '@/app/lib/utils';
-import { NavigateBack } from './components/navigate-back';
+import { NavigateBack } from '../components/navigate-back';
 import { SearchParams } from '@/app/lib/types';
 import { getCarBySlug, getLocationBySlug } from '@/db/queries';
-import { formatDates } from './lib/dates';
+import { formatDates } from '../lib/dates';
 import { differenceInDays } from 'date-fns';
 import { SignIn, SignedIn, SignedOut } from '@clerk/nextjs';
 
@@ -100,7 +100,7 @@ export default async function ReservationPage({
             <div className="mb-16 md:hidden">
               <Separator orientation="horizontal" decorative className="my-8" />
               <SignedOut>
-                <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
+                <SignIn />
               </SignedOut>
               <SignedIn>
                 <Button size="xl" className="w-full text-lg">
@@ -151,7 +151,7 @@ export default async function ReservationPage({
               <Separator orientation="horizontal" decorative className="my-8" />
               <div className="hidden pt-4 md:block">
                 <SignedOut>
-                  <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
+                  <SignIn />
                 </SignedOut>
                 <SignedIn>
                   <Button size="xl" className="w-full text-lg">

middleware.ts

@@ -1,16 +1,12 @@
-import { authMiddleware } from '@clerk/nextjs';
+import { clerkMiddleware } from '@clerk/nextjs/server';
 
-export default authMiddleware({
-  // Routes that can be accessed while signed out
-  publicRoutes: ['/', '/cars', '/car/:path', '/reservation'],
-  // Routes that can always be accessed, and have
-  // no authentication information
-  ignoredRoutes: ['/sign-up', '/sign-in'],
-});
+export default clerkMiddleware();
 
 export const config = {
-  // Protects all routes, including api/trpc.
-  // See https://clerk.com/docs/references/nextjs/auth-middleware
-  // for more information about configuring your Middleware
-  matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
+  matcher: [
+    // Skip Next.js internals and all static files, unless found in search params
+    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+    // Always run for API routes
+    '/(api|trpc)(.*)',
+  ],
 };

package.json

@@ -11,7 +11,7 @@
     "seed": "node -r dotenv/config ./scripts/seed.js"
   },
   "dependencies": {
-    "@clerk/nextjs": "^4.31.3",
+    "@clerk/nextjs": "^5.3.0",
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",