Bump to Next 15 and React 19

app/[locale]/Providers.tsx

@@ -3,9 +3,9 @@
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { SpeedInsights } from "@vercel/speed-insights/next";
-import { useSearchParams } from "next/navigation";
 import { type AbstractIntlMessages, NextIntlClientProvider } from "next-intl";
 import { ThemeProvider } from "next-themes";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
 import type { ReactNode } from "react";
 
 import { Toaster } from "@/components/ui/sonner";
@@ -27,22 +27,24 @@ function Providers({ locale, messages, children }: Props) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <NextIntlClientProvider
-        locale={locale}
-        messages={messages}
-        now={now}
-        timeZone="America/Sao_Paulo"
-      >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          // forcedTheme={forcedThemeFromSearchParams}
+      <NuqsAdapter>
+        <NextIntlClientProvider
+          locale={locale}
+          messages={messages}
+          now={now}
+          timeZone="America/Sao_Paulo"
         >
-          <Toaster />
-          <SpeedInsights />
-          {children}
-        </ThemeProvider>
-      </NextIntlClientProvider>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            // forcedTheme={forcedThemeFromSearchParams}
+          >
+            <Toaster />
+            <SpeedInsights />
+            {children}
+          </ThemeProvider>
+        </NextIntlClientProvider>
+      </NuqsAdapter>
       <ReactQueryDevtools />
     </QueryClientProvider>
   );

app/[locale]/[id]/_components/highline-tabs.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useMemo } from "react";
 
 import type { Highline } from "@/app/actions/getHighline";
 import { Ranking } from "@/components/Ranking";
@@ -24,26 +23,23 @@ export const HighlineTabs = ({ highline }: Props) => {
 
   const selectedTab = searchParams.get("tab") || "info";
 
-  const tabs = useMemo(
-    () => [
-      {
-        id: "info",
-        label: t("informations.label"),
-        content: <Info highline={highline} />,
-      },
-      {
-        id: "comments",
-        label: t("comments"),
-        content: <Comments highline={highline} />,
-      },
-      {
-        id: "ranking",
-        label: "Ranking",
-        content: <Ranking highlines_ids={[highline.id]} />,
-      },
-    ],
-    [t, highline]
-  );
+  const tabs = [
+    {
+      id: "info",
+      label: t("informations.label"),
+      content: <Info highline={highline} />,
+    },
+    {
+      id: "comments",
+      label: t("comments"),
+      content: <Comments highline={highline} />,
+    },
+    {
+      id: "ranking",
+      label: "Ranking",
+      content: <Ranking highlines_ids={[highline.id]} />,
+    },
+  ];
 
   return (
     <>

app/[locale]/[id]/page.tsx

@@ -8,8 +8,8 @@ import HighlineCard from "./_components/HighlineCard";
 export const dynamic = "force-dynamic";
 
 type Props = {
-  params: { id: string };
-  searchParams: { [key: string]: string | undefined };
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ [key: string]: string | undefined }>;
 };
 
 const getHigh = cache(async ({ id }: { id: string }) => {
@@ -19,10 +19,13 @@ const getHigh = cache(async ({ id }: { id: string }) => {
   return result.data;
 });
 
-export default async function Highline({
-  params: { id },
-  searchParams,
-}: Props) {
+export default async function Highline(props: Props) {
+  const params = await props.params;
+
+  const {
+    id
+  } = params;
+
   const highlines = await getHigh({ id });
 
   if (!highlines || highlines.length === 0) return notFound();

app/[locale]/_components/HighlineList.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { useSearchParams } from "next/navigation";
 
 import { getHighline } from "@/app/actions/getHighline";

app/[locale]/auth/callback/route.ts

@@ -1,7 +1,6 @@
 // Refer to the following documentation for more context
 // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
 
-import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 
 import { useSupabaseServer } from "@/utils/supabase/server";
@@ -16,9 +15,8 @@ export async function GET(request: Request) {
   const redirectTo = requestUrl.searchParams.get("redirect_to");
 
   if (code) {
-    const cookieStore = cookies();
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const supabase = useSupabaseServer(cookieStore);
+    const supabase = await useSupabaseServer();
 
     await supabase.auth.exchangeCodeForSession(code);
   }

app/[locale]/festival/_components/festival-tabs.tsx

@@ -1,4 +1,3 @@
-import { cookies } from "next/headers";
 import React from "react";
 
 import { getHighline } from "@/app/actions/getHighline";
@@ -9,8 +8,8 @@ import { useSupabaseServer } from "@/utils/supabase/server";
 import { Highline } from "../../_components/Highline";
 
 export const FestivalTabs = async () => {
-  const cookieStore = cookies();
-  const supabase = useSupabaseServer(cookieStore);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const supabase = await useSupabaseServer();
 
   const { data: sectors } = await supabase
     .from("sector")

app/[locale]/festival/page.tsx

@@ -2,18 +2,24 @@ import { Loader2 } from "lucide-react";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { unstable_setRequestLocale } from "next-intl/server";
-import { Suspense } from "react";
+import { Suspense, use } from "react";
 
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import { FestivalTabs } from "./_components/festival-tabs";
 
 type Props = {
-  params: { locale: string; username: string };
-  searchParams: { [key: string]: string | undefined };
+  params: Promise<{ locale: string; username: string }>;
+  searchParams: Promise<{ [key: string]: string | undefined }>;
 };
 
-export default function Festival({ params: { locale } }: Props) {
+export default function Festival(props: Props) {
+  const params = use(props.params);
+
+  const {
+    locale
+  } = params;
+
   unstable_setRequestLocale(locale);
   const t = useTranslations("festival");
 

app/[locale]/layout.tsx

@@ -1,3 +1,4 @@
+import { use } from "react";
 import "./globals.css";
 
 import { Analytics } from "@vercel/analytics/react";
@@ -64,13 +65,22 @@ export function generateStaticParams() {
   return locales.map((locale) => ({ locale }));
 }
 
-export default function RootLayout({
-  children,
-  params: { locale },
-}: {
-  children: React.ReactNode;
-  params: { locale: "en" | "pt" };
-}) {
+export default function RootLayout(
+  props: {
+    children: React.ReactNode;
+    params: Promise<{ locale: "en" | "pt" }>;
+  }
+) {
+  const params = use(props.params);
+
+  const {
+    locale
+  } = params;
+
+  const {
+    children
+  } = props;
+
   unstable_setRequestLocale(locale);
   // Validate that the incoming `locale` parameter is valid
   if (!locales.includes(locale)) notFound();
@@ -79,7 +89,7 @@ export default function RootLayout({
   return (
     // suppressHydrationWarning because of `next-themes`
     // refer to https://github.com/pacocoursey/next-themes#with-app
-    <html lang={locale} suppressHydrationWarning>
+    (<html lang={locale} suppressHydrationWarning>
       <body className={`min-h-screen md:px-0 ${GeistSans.variable} font-sans`}>
         <Providers locale={locale} messages={messages}>
           <div className="relative flex h-full min-h-screen flex-col">
@@ -94,6 +104,6 @@ export default function RootLayout({
         </Providers>
         <Analytics />
       </body>
-    </html>
+    </html>)
   );
 }

app/[locale]/page.tsx

@@ -1,21 +1,16 @@
-import {
-  dehydrate,
-  HydrationBoundary,
-  QueryClient,
-} from "@tanstack/react-query";
+"use client";
+
 import dynamic from "next/dynamic";
-import { unstable_setRequestLocale } from "next-intl/server";
+import { useLocale } from "next-intl";
+import { useQueryState } from "nuqs";
 
-import { getHighline } from "@/app/actions/getHighline";
 import CreateHighline from "@/components/CreateHighline";
 import MapToggle from "@/components/Map/MapToggle";
 
 import { HeroPromoCard } from "./_components/hero-promo-card";
 import { HighlineList } from "./_components/HighlineList";
 import Search from "./_components/search";
 
-const PAGE_SIZE = 6;
-
 const Map = dynamic(() => import("@/components/Map/Map"), {
   ssr: false,
   loading: () => (
@@ -40,31 +35,15 @@ const Map = dynamic(() => import("@/components/Map/Map"), {
   ),
 });
 
-export default async function Home({
-  params: { locale },
-  searchParams,
-}: {
-  params: { locale: "en" | "pt" };
-  searchParams: { [key: string]: string | undefined };
-}) {
-  unstable_setRequestLocale(locale);
-  const mapOpen = searchParams["view"] === "map";
-  const location = searchParams["location"] || null;
-  const focusedMarker = searchParams["focusedMarker"];
+export default function Home() {
+  const locale = useLocale();
+
+  const [view] = useQueryState("view");
+  const [location] = useQueryState("location");
+  const [focusedMarker] = useQueryState("focusedMarker");
+
+  const mapOpen = view === "map";
   const isPickingLocation = location === "picking";
-  const searchValue = searchParams["q"] || "";
-  const queryClient = new QueryClient();
-  await queryClient.prefetchInfiniteQuery({
-    queryKey: ["highlines", { searchValue }],
-    queryFn: ({ pageParam }) =>
-      getHighline({ pageParam, searchValue, pageSize: PAGE_SIZE }),
-    initialPageParam: 1,
-    getNextPageParam: (lastPage, pages) => {
-      const nextPage = pages.length + 1;
-      return lastPage.data?.length === PAGE_SIZE ? nextPage : undefined;
-    },
-    pages: 2,
-  });
 
   return (
     <div className="relative mx-2 max-w-screen-xl space-y-4 md:mx-auto">
@@ -78,9 +57,7 @@ export default async function Home({
         <>
           <Search />
           <HeroPromoCard />
-          <HydrationBoundary state={dehydrate(queryClient)}>
-            <HighlineList />
-          </HydrationBoundary>
+          <HighlineList />
         </>
       )}
       <CreateHighline

app/[locale]/profile/[username]/_components/LastWalks.tsx

@@ -1,5 +1,4 @@
 import { ChevronRightIcon } from "@radix-ui/react-icons";
-import { cookies } from "next/headers";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { getTranslations } from "next-intl/server";
@@ -37,8 +36,9 @@ interface Props {
 }
 
 export default async function LastWalks({ username, year }: Props) {
-  const cookieStore = cookies();
-  const supabase = useSupabaseServer(cookieStore);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const supabase = await useSupabaseServer();
+
   const t = await getTranslations("profile.lastWalks");
 
   const { data: entries } = await supabase

app/[locale]/profile/[username]/page.tsx

@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import { cookies } from "next/headers";
 import { getTranslations } from "next-intl/server";
 import { Suspense } from "react";
 
@@ -14,27 +13,26 @@ import UserNotFound from "./_components/UserNotFound";
 export const dynamic = "force-dynamic";
 
 type Props = {
-  params: { locale: string; username: string };
-  searchParams: { [key: string]: string | undefined };
+  params: Promise<{ locale: string; username: string }>;
+  searchParams: Promise<{ [key: string]: string | undefined }>;
 };
 
-export async function generateMetadata({
-  params,
-  searchParams,
-}: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const t = await getTranslations("profileMetadata");
   return {
     title: t("title", { username: `@${params.username}` }),
     description: t("description"),
   };
 }
 
-export default async function Profile({
-  params: { username },
-  searchParams,
-}: Props) {
-  const cookieStore = cookies();
-  const supabase = useSupabaseServer(cookieStore);
+export default async function Profile(props: Props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const supabase = await useSupabaseServer();
+
+  const searchParams = await props.searchParams;
+  const params = await props.params;
+  const { username } = params;
 
   const result = await Promise.all([
     supabase.auth.getUser(),