Merge pull request #13 from Electrium-Mobility/next-js-update

updated breaking changes for next-js 15

app/auth/callback/route.ts

@@ -8,12 +8,17 @@ export async function GET(request: Request) {
   const requestUrl = new URL(request.url);
   const code = requestUrl.searchParams.get("code");
   const origin = requestUrl.origin;
+  const redirectTo = requestUrl.searchParams.get("redirect_to")?.toString();
 
   if (code) {
-    const supabase = createClient();
+    const supabase = await createClient();
     await supabase.auth.exchangeCodeForSession(code);
   }
 
+  if (redirectTo) {
+    return NextResponse.redirect(`${origin}${redirectTo}`);
+  }
+
   // URL to redirect to after sign up process completes
   return NextResponse.redirect(`${origin}/protected`);
 }

app/items/page.tsx

@@ -1,7 +1,7 @@
 import { createClient } from '@/utils/supabase/server';
 
 export default async function Notes() {
-    const supabase = createClient();
+    const supabase = await createClient();
     const { data: notes } = await supabase.from("bikes").select();
 
     return <pre>{JSON.stringify(notes, null, 2)}</pre>

app/page.tsx

@@ -89,8 +89,8 @@ function ProductDisplay({ id, image, name, price, isRental }: {
 }
 
 export default async function Home() {
-    const supabase = createClient();
-    const { data: bikes, error } = await supabase.from('bikes').select('*');
+    const supabase = await createClient();
+    const { data: bikes, error } = await supabase.from("bikes").select();
 
     if (error) {
         console.error('Error fetching bikes:', error);

app/products/[productId]/page.tsx

@@ -4,7 +4,7 @@ import Navbar from '@/components/shop/Navbar';
 import Footer from '@/components/shop/Footer';
 import {Bike, getOneBike} from "@/utils/getBike";
 import {notFound} from "next/navigation";
-
+import { GetServerSideProps } from 'next';
 
 function CartNotification({bike, subtotal, quantity, numItems}: {
     bike: Bike,
@@ -36,9 +36,13 @@ function CartNotification({bike, subtotal, quantity, numItems}: {
         );
 }
 
+interface ProductPageProps {
+    params: Promise<{ productId: string }>;
+}
 
-export default async function ProductPage({params}: { params: { productId: string } }) {
-    const bike = await getOneBike(params.productId);
+export default async function ProductPage({ params }: ProductPageProps) {
+    const { productId } = await params;
+    const bike = await getOneBike(productId);
     if (!bike) {
         notFound();
     }
@@ -62,14 +66,15 @@ export default async function ProductPage({params}: { params: { productId: strin
                                 unoptimized
                                 width={500}
                                 height={500}
-                                style={{objectFit: "contain"}}
-                                className="rounded-lg"/>
+                                style={{ objectFit: "contain" }}
+                                className="rounded-lg"
+                            />
                         </div>
                         <div className="md:w-1/2">
                             <p className="text-gray-700 mb-4">{bike.description}</p>
                             <div className="flex items-center gap-4 mb-6">
                                 <input type="number" defaultValue={1} min={1} max={bike.amount_stocked}
-                                       className="border p-2 w-16 text-center text-gray-800"/>
+                                       className="border p-2 w-16 text-center text-gray-800" />
                                 <button className="bg-green-600 text-white px-6 py-2 rounded hover:bg-green-500">
                                     {bike.for_rent ? 'Rent Now' : 'Add to Cart'}
                                 </button>

app/protected/page.tsx

@@ -6,7 +6,7 @@ import Header from "@/components/Header";
 import { redirect } from "next/navigation";
 
 export default async function ProtectedPage() {
-  const supabase = createClient();
+  const supabase = await createClient();
 
   const {
     data: { user },

components/AuthButton.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 
 export default async function AuthButton() {
-  const supabase = createClient();
+  const supabase = await createClient();
 
   const {
     data: { user },
@@ -12,7 +12,7 @@ export default async function AuthButton() {
   const signOut = async () => {
     "use server";
 
-    const supabase = createClient();
+    const supabase = await createClient();
     await supabase.auth.signOut();
     return redirect("/login");
   };

utils/getBike.tsx

@@ -15,7 +15,7 @@ export interface Bike {
 
 export async function getOneBike(productId: string) {
     const cookieStore = cookies();
-    const supabase = createClient();
+    const supabase = await createClient();
     const {data: bike, error} = await supabase
         .from('bikes')
         .select('*')
@@ -30,7 +30,7 @@ export async function getOneBike(productId: string) {
 
 export async function getManyBikes(productIds: string[]) {
     const cookieStore = cookies();
-    const supabase = createClient();
+    const supabase = await createClient();
     const {data: bikes, error} = await supabase
         .from('bikes')
         .select('*')

utils/supabase/server.ts

@@ -1,36 +1,29 @@
-import { createServerClient, type CookieOptions } from "@supabase/ssr";
+import { createServerClient } from "@supabase/ssr";
 import { cookies } from "next/headers";
 
-export const createClient = () => {
-  const cookieStore = cookies();
+export const createClient = async () => {
+  const cookieStore = await cookies();
 
   return createServerClient(
-    process.env.NEXT_PUBLIC_SUPABASE_URL!,
-    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
-    {
-      cookies: {
-        get(name: string) {
-          return cookieStore.get(name)?.value;
-        },
-        set(name: string, value: string, options: CookieOptions) {
-          try {
-            cookieStore.set({ name, value, ...options });
-          } catch (error) {
-            // The `set` method was called from a Server Component.
-            // This can be ignored if you have middleware refreshing
-            // user sessions.
-          }
-        },
-        remove(name: string, options: CookieOptions) {
-          try {
-            cookieStore.set({ name, value: "", ...options });
-          } catch (error) {
-            // The `delete` method was called from a Server Component.
-            // This can be ignored if you have middleware refreshing
-            // user sessions.
-          }
+      process.env.NEXT_PUBLIC_SUPABASE_URL!,
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+      {
+        cookies: {
+          getAll() {
+            return cookieStore.getAll();
+          },
+          setAll(cookiesToSet) {
+            try {
+              cookiesToSet.forEach(({ name, value, options }) => {
+                cookieStore.set(name, value, options);
+              });
+            } catch (error) {
+              // The `set` method was called from a Server Component.
+              // This can be ignored if you have middleware refreshing
+              // user sessions.
+            }
+          },
         },
       },
-    },
   );
 };