fix: awaiting params and searchparams and update to nuqs v2

package.json

@@ -48,7 +48,7 @@
     "next": "15.0.1",
     "next-intl": "^3.23.5",
     "next-themes": "1.0.0-beta.0",
-    "nuqs": "^1.17.4",
+    "nuqs": "^2.0.4",
     "postgres": "^3.4.4",
     "react": "19.0.0-rc-69d4b800-20241021",
     "react-day-picker": "^9.1.4",

src/app/[locale]/(default)/about/page.tsx

@@ -1,11 +1,11 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 
-export async function generateMetadata(props: {
+export async function generateMetadata({
+  params,
+}: {
   params: Promise<{ locale: string }>;
 }) {
-  const params = await props.params;
-
-  const { locale } = params;
+  const { locale } = await params;
 
   const t = await getTranslations({ locale, namespace: 'layout' });
 
@@ -14,13 +14,12 @@ export async function generateMetadata(props: {
   };
 }
 
-export default async function AboutPage(props: {
+export default async function AboutPage({
+  params,
+}: {
   params: Promise<{ locale: string }>;
 }) {
-  const params = await props.params;
-
-  const { locale } = params;
-
+  const { locale } = await params;
   setRequestLocale(locale);
   return <div>this should be about page</div>;
 }

src/app/[locale]/(default)/events/page.tsx

@@ -1,11 +1,11 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 
-export async function generateMetadata(props: {
+export async function generateMetadata({
+  params,
+}: {
   params: Promise<{ locale: string }>;
 }) {
-  const params = await props.params;
-
-  const { locale } = params;
+  const { locale } = await params;
 
   const t = await getTranslations({ locale, namespace: 'layout' });
 
@@ -14,13 +14,12 @@ export async function generateMetadata(props: {
   };
 }
 
-export default async function EventsPage(props: {
+export default async function EventsPage({
+  params,
+}: {
   params: Promise<{ locale: string }>;
 }) {
-  const params = await props.params;
-
-  const { locale } = params;
-
+  const { locale } = await params;
   setRequestLocale(locale);
   return <div>This should be events page</div>;
 }

src/app/[locale]/(default)/news/(main)/layout.tsx

@@ -1,7 +1,6 @@
 import { SquarePenIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { setRequestLocale } from 'next-intl/server';
-import { use } from 'react';
 
 import { Link } from '@/lib/locale/navigation';
 
@@ -12,12 +11,11 @@ type NewsHeaderLayoutProps = {
   params: Promise<{ locale: string }>;
 };
 
-export default function NewsHeaderLayout(props: NewsHeaderLayoutProps) {
-  const params = use(props.params);
-
-  const { locale } = params;
-
-  const { children } = props;
+export default async function NewsHeaderLayout({
+  params,
+  children,
+}: NewsHeaderLayoutProps) {
+  const { locale } = await params;
 
   setRequestLocale(locale);
   const t = useTranslations('news');

src/app/[locale]/(default)/news/(main)/loading.tsx

@@ -3,7 +3,7 @@ import { CardGridSkeleton } from '@/components/news/CardGridSkeleton';
 import { ItemGridSkeleton } from '@/components/news/ItemGridSkeleton';
 import { Separator } from '@/components/ui/Separator';
 
-export default function NewsSkeleton() {
+export default function NewsLoading() {
   return (
     <>
       <CardGridSkeleton />

src/app/[locale]/(default)/news/(main)/page.tsx

@@ -1,8 +1,12 @@
 import { articleMockData as articleData } from '@/mock-data/article';
 import { useTranslations } from 'next-intl';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
-import { createSearchParamsCache, parseAsInteger } from 'nuqs/server';
-import { Suspense, use } from 'react';
+import {
+  type SearchParams,
+  createSearchParamsCache,
+  parseAsInteger,
+} from 'nuqs/server';
+import { Suspense } from 'react';
 
 import { PaginationCarousel } from '@/components/composites/PaginationCarousel';
 import { CardGrid } from '@/components/news/CardGrid';
@@ -24,22 +28,21 @@ export async function generateMetadata(props: {
   };
 }
 
-export default function NewsPage(props: {
+export default async function NewsPage({
+  params,
+  searchParams,
+}: {
   params: Promise<{ locale: string }>;
-  searchParams: Promise<Record<string, string | string[] | undefined>>;
+  searchParams: Promise<SearchParams>;
 }) {
-  const searchParams = use(props.searchParams);
-  const params = use(props.params);
-
-  const { locale } = params;
-
+  const { locale } = await params;
   setRequestLocale(locale);
   const t = useTranslations('ui');
   const searchParamsCache = createSearchParamsCache({
     [t('page')]: parseAsInteger.withDefault(1),
   });
 
-  const { [t('page')]: page = 1 } = searchParamsCache.parse(searchParams);
+  const { [t('page')]: page = 1 } = searchParamsCache.parse(await searchParams);
   // TODO: Button to create new article should only be visible when logged in
   return (
     <>

src/app/[locale]/(default)/news/[article]/page.tsx

@@ -6,7 +6,6 @@ import { useTranslations } from 'next-intl';
 import { setRequestLocale } from 'next-intl/server';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
-import { use } from 'react';
 import readingTime from 'reading-time';
 
 import { AvatarIcon } from '@/components/profile/AvatarIcon';
@@ -18,34 +17,34 @@ import { Badge } from '@/components/ui/Badge';
 //   }));
 // }
 
-export async function generateMetadata(props: {
+export async function generateMetadata({
+  params,
+}: {
   params: Promise<{ article: string }>;
 }) {
-  const params = await props.params;
-  const article = articleData.find(
-    (article) => article.id === Number(params.article),
-  );
+  const { article } = await params;
+  const data = articleData.find((a) => a.id === Number(article));
 
   return {
-    title: article?.title,
+    title: data?.title,
   };
 }
 
-export default function ArticlePage(props: {
+export default async function ArticlePage({
+  params,
+}: {
   params: Promise<{ locale: string; article: string }>;
 }) {
-  const params = use(props.params);
-  setRequestLocale(params.locale);
+  const { locale, article } = await params;
+  setRequestLocale(locale);
   const t = useTranslations('news');
 
-  const article = articleData.find(
-    (article) => article.id === Number(params.article),
-  );
-  if (!article) {
+  const data = articleData.find((a) => a.id === Number(article));
+  if (!data) {
     return notFound();
   }
 
-  const { minutes } = readingTime(article.content as string); // assert because its a mock data file
+  const { minutes } = readingTime(data.content as string); // assert because its a mock data file
   const author = authorData[0] as {
     name: string;
     photoUrl: string;
@@ -57,14 +56,14 @@ export default function ArticlePage(props: {
         <div className='mb-10 flex justify-center'>
           <Image
             className='h-auto w-full max-w-4xl rounded-lg'
-            src={`/${article.photoUrl}`}
-            alt={article.title}
+            src={`/${data.photoUrl}`}
+            alt={data.title}
             width={1600}
             height={900}
             priority
           />
         </div>
-        <h2 className='my-4'>{article.title}</h2>
+        <h2 className='my-4'>{data.title}</h2>
       </header>
       <section className='mb-6 space-y-4'>
         <div className='flex items-center gap-4'>
@@ -78,13 +77,13 @@ export default function ArticlePage(props: {
             <small className='text-foreground/60'>
               {t('readTime', { count: Math.ceil(minutes) })}
               &nbsp;&nbsp;•&nbsp;&nbsp;
-              {article.date}
+              {data.date}
             </small>
           </div>
         </div>
-        <Badge variant='secondary'>{`${article.views} ${t('views')}`}</Badge>
+        <Badge variant='secondary'>{`${data.views} ${t('views')}`}</Badge>
       </section>
-      <section>{article.content}</section>
+      <section>{data.content}</section>
     </article>
   );
 }

src/app/[locale]/(default)/page.tsx

@@ -2,11 +2,13 @@ import { HelloWorld } from '@/components/home/HelloWorld';
 import { api } from '@/lib/api/server';
 import { setRequestLocale } from 'next-intl/server';
 
-export default async function HomePage(props: {
+export default async function HomePage({
+  params,
+}: {
   params: Promise<{ locale: string }>;
 }) {
-  const params = await props.params;
-  setRequestLocale(params.locale);
+  const { locale } = await params;
+  setRequestLocale(locale);
   const hello = await api.test.helloWorld();
   return (
     <div className='min-h-screen'>

src/app/[locale]/(default)/storage/(main)/layout.tsx

@@ -5,19 +5,18 @@ import { SelectorsSkeleton } from '@/components/storage/SelectorsSkeleton';
 import { ShoppingCartLink } from '@/components/storage/ShoppingCartLink';
 import { useTranslations } from 'next-intl';
 import { setRequestLocale } from 'next-intl/server';
-import { Suspense, use } from 'react';
+import { Suspense } from 'react';
 
 type StorageLayoutProps = {
   children: React.ReactNode;
   params: Promise<{ locale: string }>;
 };
 
-export default function StorageLayout(props: StorageLayoutProps) {
-  const params = use(props.params);
-
-  const { locale } = params;
-
-  const { children } = props;
+export default async function StorageLayout({
+  params,
+  children,
+}: StorageLayoutProps) {
+  const { locale } = await params;
 
   setRequestLocale(locale);
   const t = useTranslations('storage');

src/app/[locale]/(default)/storage/(main)/loading.tsx

@@ -2,7 +2,7 @@ import { PaginationCarouselSkeleton } from '@/components/composites/PaginationCa
 import { ItemCardSkeleton } from '@/components/storage/ItemCardSkeleton';
 import { useId } from 'react';
 
-export default function StorageSkeleton() {
+export default function StorageLoading() {
   return (
     <>
       <div className='grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>

src/app/[locale]/(default)/storage/(main)/page.tsx

@@ -1,18 +1,21 @@
 import { items } from '@/mock-data/items';
 import { useTranslations } from 'next-intl';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
-import { createSearchParamsCache, parseAsInteger } from 'nuqs/server';
-import { use } from 'react';
+import {
+  type SearchParams,
+  createSearchParamsCache,
+  parseAsInteger,
+} from 'nuqs/server';
 
 import { PaginationCarousel } from '@/components/composites/PaginationCarousel';
 import { ItemCard } from '@/components/storage/ItemCard';
 
-export async function generateMetadata(props: {
+export async function generateMetadata({
+  params,
+}: {
   params: Promise<{ locale: string }>;
 }) {
-  const params = await props.params;
-
-  const { locale } = params;
+  const { locale } = await params;
 
   const t = await getTranslations({ locale, namespace: 'layout' });
 
@@ -21,14 +24,14 @@ export async function generateMetadata(props: {
   };
 }
 
-export default function StoragePage(props: {
+export default async function StoragePage({
+  params,
+  searchParams,
+}: {
   params: Promise<{ locale: string }>;
-  searchParams: Promise<Record<string, string | string[] | undefined>>;
+  searchParams: Promise<SearchParams>;
 }) {
-  const searchParams = use(props.searchParams);
-  const params = use(props.params);
-
-  const { locale } = params;
+  const { locale } = await params;
 
   setRequestLocale(locale);
   const t = useTranslations('ui');
@@ -39,7 +42,7 @@ export default function StoragePage(props: {
     [t('page')]: parseAsInteger.withDefault(1),
   });
 
-  const { [t('page')]: page = 1 } = searchParamsCache.parse(searchParams);
+  const { [t('page')]: page = 1 } = searchParamsCache.parse(await searchParams);
 
   return (
     <>

src/app/[locale]/(default)/storage/shopping-cart/layout.tsx

@@ -3,19 +3,17 @@ import { Link } from '@/lib/locale/navigation';
 import { ArrowLeftIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { setRequestLocale } from 'next-intl/server';
-import { use } from 'react';
 
 type ShoppingCartLayoutProps = {
   children: React.ReactNode;
   params: Promise<{ locale: string }>;
 };
 
-export default function StorageLayout(props: ShoppingCartLayoutProps) {
-  const params = use(props.params);
-
-  const { locale } = params;
-
-  const { children } = props;
+export default async function StorageLayout({
+  params,
+  children,
+}: ShoppingCartLayoutProps) {
+  const { locale } = await params;
 
   setRequestLocale(locale);
   const t = useTranslations('storage.shoppingCart');

src/app/[locale]/(default)/storage/shopping-cart/loading.tsx

@@ -2,7 +2,7 @@ import { ShoppingCartTableSkeleton } from '@/components/storage/ShoppingCartTabl
 import { Skeleton } from '@/components/ui/Skeleton';
 import { useTranslations } from 'next-intl';
 
-export default function ShoppingCartSkeleton() {
+export default function ShoppingCartLoading() {
   const t = useTranslations('storage.shoppingCart');
   const tableMessages = {
     productId: t('productId'),