Bump to React 19 and Next 15, implement NUQS as also to manage query …

…params (#49)

* Enable static rendering for festival and home page

* Bump to Next 15 and React 19

* Update React to stable version

app/[locale]/Providers.tsx

@@ -3,10 +3,10 @@
 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 type { ReactNode } from "react";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
+import { Suspense, type ReactNode } from "react";
 
 import { Toaster } from "@/components/ui/sonner";
 import { getQueryClient } from "@/lib/query";
@@ -18,33 +18,29 @@ interface Props {
 }
 
 function Providers({ locale, messages, children }: Props) {
-  const searchParams = useSearchParams();
   const queryClient = getQueryClient();
   const now = new Date();
 
-  const forcedThemeFromSearchParams =
-    searchParams.get("view") === "map" ? "light" : undefined;
-
   return (
-    <QueryClientProvider client={queryClient}>
-      <NextIntlClientProvider
-        locale={locale}
-        messages={messages}
-        now={now}
-        timeZone="America/Sao_Paulo"
-      >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          forcedTheme={forcedThemeFromSearchParams}
-        >
-          <Toaster />
-          <SpeedInsights />
-          {children}
-        </ThemeProvider>
-      </NextIntlClientProvider>
-      <ReactQueryDevtools />
-    </QueryClientProvider>
+    <Suspense>
+      <QueryClientProvider client={queryClient}>
+        <NuqsAdapter>
+          <NextIntlClientProvider
+            locale={locale}
+            messages={messages}
+            now={now}
+            timeZone="America/Sao_Paulo"
+          >
+            <ThemeProvider attribute="class" defaultTheme="system">
+              <Toaster />
+              <SpeedInsights />
+              {children}
+            </ThemeProvider>
+          </NextIntlClientProvider>
+        </NuqsAdapter>
+        <ReactQueryDevtools />
+      </QueryClientProvider>
+    </Suspense>
   );
 }
 

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

@@ -1,14 +1,12 @@
 "use client";
 
-import { motion } from "framer-motion";
-import { useSearchParams } from "next/navigation";
+import { motion } from "motion/react";
 import { useTranslations } from "next-intl";
-import { useMemo } from "react";
+import { useQueryState } from "nuqs";
 
 import type { Highline } from "@/app/actions/getHighline";
 import { Ranking } from "@/components/Ranking";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useQueryString } from "@/hooks/useQueryString";
 
 import Comments from "./Comments";
 import Info from "./Info";
@@ -19,38 +17,34 @@ interface Props {
 
 export const HighlineTabs = ({ highline }: Props) => {
   const t = useTranslations("highline.tabs");
-  const searchParams = useSearchParams();
-  const { replaceQueryParam } = useQueryString();
+  const [tab, setTab] = useQueryState("tab");
 
-  const selectedTab = searchParams.get("tab") || "info";
+  const selectedTab = 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 (
     <>
       <Tabs
         value={selectedTab}
         onValueChange={(value) => {
-          replaceQueryParam("tab", value);
+          setTab(value);
         }}
       >
         <TabsList className="my-2 w-full gap-2">

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,8 +1,8 @@
 "use client";
 
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { motion } from "framer-motion";
-import { useSearchParams } from "next/navigation";
+import { motion } from "motion/react";
+import { useQueryState } from "nuqs";
 
 import { getHighline } from "@/app/actions/getHighline";
 
@@ -12,13 +12,16 @@ import { HighlineListSkeleton } from "./HighlineListSkeleton";
 const PAGE_SIZE = 6;
 
 export function HighlineList() {
-  const searchParams = useSearchParams();
-  const searchValue = searchParams.get("q") || "";
+  const [searchValue = ""] = useQueryState("q");
 
   const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery({
     queryKey: ["highlines", { searchValue }],
     queryFn: ({ pageParam }) =>
-      getHighline({ pageParam, searchValue, pageSize: PAGE_SIZE }),
+      getHighline({
+        pageParam,
+        searchValue: searchValue ?? undefined,
+        pageSize: PAGE_SIZE,
+      }),
     initialPageParam: 1,
     getNextPageParam: (lastPage, pages) => {
       const nextPage = pages.length + 1;

app/[locale]/_components/search.tsx

@@ -2,22 +2,22 @@
 
 import { SearchIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useQueryState } from "nuqs";
 
 import { Input } from "@/components/ui/input";
-import { useQueryString } from "@/hooks/useQueryString";
 
 export default function Search() {
   const t = useTranslations("home");
-  const { searchParams, pushQueryParam, deleteQueryParam } = useQueryString();
+  const [search, setSearch] = useQueryState("q");
 
   function onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     const val = e.target as HTMLFormElement;
-    const search = val.search as HTMLInputElement;
-    if (search.value) {
-      pushQueryParam("q", search.value);
+    const searchInput = val.search as HTMLInputElement;
+    if (searchInput.value) {
+      setSearch(searchInput.value);
     } else {
-      deleteQueryParam("q");
+      setSearch(null);
     }
   }
 
@@ -27,12 +27,12 @@ export default function Search() {
         <SearchIcon className="h-6 w-6 text-muted-foreground" />
       </span>
       <Input
-        key={searchParams?.get("q")}
+        key={search}
         type="search"
         name="search"
         placeholder={t("searchPlaceholder")}
         autoComplete="off"
-        defaultValue={searchParams?.get("q") || ""}
+        defaultValue={search || ""}
         className="bg-transparent pl-10 text-base"
       />
     </form>

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

@@ -1,21 +1,26 @@
+import { Loader2 } from "lucide-react";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
-import { Suspense } from "react";
+import { unstable_setRequestLocale } from "next-intl/server";
+import { Suspense, use } from "react";
 
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import { FestivalTabs } from "./_components/festival-tabs";
-import { Loader2 } from "lucide-react";
 
 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: { username },
-  searchParams,
-}: Props) {
+export default function Festival(props: Props) {
+  const params = use(props.params);
+
+  const {
+    locale
+  } = params;
+
+  unstable_setRequestLocale(locale);
   const t = useTranslations("festival");
 
   return (

app/[locale]/layout.tsx

@@ -5,8 +5,10 @@ import { GeistSans } from "geist/font/sans";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { useMessages } from "next-intl";
+import { unstable_setRequestLocale } from "next-intl/server";
+import { use } from "react";
 
-import Footer from "@/components/Footer";
+// import Footer from "@/components/Footer";
 import NavBar from "@/components/layout/navbar";
 import { locales } from "@/navigation";
 
@@ -59,21 +61,35 @@ export const metadata: Metadata = {
   },
 };
 
-export default function RootLayout({
-  children,
-  params: { locale },
-}: {
-  children: React.ReactNode;
-  params: { locale: "en" | "pt" };
-}) {
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+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();
   const messages = useMessages();
 
   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">
@@ -88,6 +104,6 @@ export default function RootLayout({
         </Providers>
         <Analytics />
       </body>
-    </html>
+    </html>)
   );
 }