Merge pull request #390 from duyet/renovate/major-nextjs-monorepo

chore(deps): update nextjs monorepo to v15 (major)

Author: duyet

.github/workflows/test.yml

@@ -139,14 +139,12 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
 
-      - name: Install dependencies
-        run: yarn install
-
       - name: Test components
         uses: cypress-io/github-action@v6
         with:
           component: true
-          command: yarn component:headless
+          install-command: npm install --legacy-peer-deps
+          command: npm run component:headless
           browser: ${{ matrix.browser }}
           parallel: true
           record: true

app/[host]/[query]/page.tsx

@@ -9,19 +9,18 @@ import { Suspense } from 'react'
 import { getQueryConfigByName } from './clickhouse-queries'
 
 interface PageProps {
-  params: {
+  params: Promise<{
     query: string
-  }
-  searchParams: { [key: string]: string | string[] | undefined }
+  }>
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
 }
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 300
 
-export default async function Page({
-  params: { query },
-  searchParams,
-}: PageProps) {
+export default async function Page({ params, searchParams }: PageProps) {
+  const { query } = await params
+
   noStore()
 
   // Retrieves the query configuration by name.
@@ -40,7 +39,7 @@ export default async function Page({
         <Table
           title={query.replaceAll('-', ' ')}
           queryConfig={queryConfig}
-          searchParams={searchParams}
+          searchParams={await searchParams}
         />
       </Suspense>
     </div>

app/[host]/charts/[charts]/page.tsx

@@ -3,15 +3,16 @@ import { notFound } from 'next/navigation'
 import { Suspense } from 'react'
 
 interface PageProps {
-  params: {
+  params: Promise<{
     charts: string
-  }
+  }>
 }
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 30
 
-export default async function Page({ params: { charts } }: PageProps) {
+export default async function Page({ params }: PageProps) {
+  const { charts } = await params
   let chartComponents = []
   let props = {}
 

app/[host]/clusters/[cluster]/breadcrumb.tsx

@@ -1,5 +1,6 @@
 import { ChevronDownIcon, SlashIcon } from '@radix-ui/react-icons'
 import Link from 'next/link'
+import { use } from 'react'
 
 import { ErrorAlert } from '@/components/error-alert'
 import {
@@ -76,7 +77,7 @@ function Internal({ cluster, clusters }: Props & { clusters: Row[] }) {
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink href={getScopedLink('/clusters')}>
+          <BreadcrumbLink href={use(getScopedLink('/clusters'))}>
             Clusters
           </BreadcrumbLink>
         </BreadcrumbItem>
@@ -94,7 +95,7 @@ function Internal({ cluster, clusters }: Props & { clusters: Row[] }) {
             {clusters.map(({ cluster: name, replica_count }) => (
               <DropdownMenuItem key={name}>
                 <Link
-                  href={getScopedLink(`/clusters/${name}/replicas-status`)}
+                  href={use(getScopedLink(`/clusters/${name}/replicas-status`))}
                   className={name == cluster ? 'font-bold' : ''}
                 >
                   {name} ({replica_count}{' '}

app/[host]/clusters/[cluster]/count-across-replicas/page.tsx

@@ -5,12 +5,14 @@ import { ColumnFormat } from '@/types/column-format'
 import type { QueryConfig } from '@/types/query-config'
 
 interface PageProps {
-  params: {
+  params: Promise<{
     cluster: string
-  }
+  }>
 }
 
-export default async function Page({ params: { cluster } }: PageProps) {
+export default async function Page({ params }: PageProps) {
+  const { cluster } = await params
+
   const { data: replicas } = await fetchData<{ replica: string }[]>({
     query: `SELECT hostName() as replica FROM clusterAllReplicas({cluster: String}) ORDER BY 1`,
     query_params: { cluster },

app/[host]/clusters/[cluster]/layout.tsx

@@ -5,18 +5,20 @@ import {
 } from './breadcrumb'
 
 interface ClusterListProps {
-  params: {
+  params: Promise<{
     cluster: string
-  }
+  }>
   children: React.ReactNode
 }
 
 export const revalidate = 600
 
 export default async function ClusterTabListLayout({
-  params: { cluster },
+  params,
   children,
 }: ClusterListProps) {
+  const { cluster } = await params
+
   return (
     <div className="flex flex-col gap-5">
       <Suspense fallback={<ClusterListBreadcrumbSkeleton cluster={cluster} />}>

app/[host]/clusters/[cluster]/page.tsx

@@ -1,12 +1,14 @@
 import { redirect } from 'next/navigation'
 
 interface PageProps {
-  params: {
+  params: Promise<{
     cluster: string
-  }
+  }>
 }
 
 // Redirects to the replicas status page.
-export default async function ClusterPage({ params: { cluster } }: PageProps) {
+export default async function ClusterPage({ params }: PageProps) {
+  const { cluster } = await params
+
   redirect(`/clusters/${cluster}/replicas-status`)
 }

app/[host]/clusters/[cluster]/parts-across-replicas/page.tsx

@@ -5,12 +5,13 @@ import { ColumnFormat } from '@/types/column-format'
 import type { QueryConfig } from '@/types/query-config'
 
 interface PageProps {
-  params: {
+  params: Promise<{
     cluster: string
-  }
+  }>
 }
 
-export default async function Page({ params: { cluster } }: PageProps) {
+export default async function Page({ params }: PageProps) {
+  const { cluster } = await params
   const { data: replicas } = await fetchData<{ replica: string }[]>({
     query: `SELECT hostName() as replica FROM clusterAllReplicas({cluster: String}) ORDER BY 1`,
     query_params: { cluster },

app/[host]/clusters/[cluster]/replicas-status/page.tsx

@@ -7,12 +7,14 @@ import Link from 'next/link'
 import { queryConfig, type Row } from './config'
 
 interface PageProps {
-  params: {
+  params: Promise<{
     cluster: string
-  }
+  }>
 }
 
-export default async function Page({ params: { cluster } }: PageProps) {
+export default async function Page({ params }: PageProps) {
+  const { cluster } = await params
+
   const { data } = await fetchData<Row[]>({
     query: queryConfig.sql,
     query_params: { cluster },
@@ -28,17 +30,23 @@ export default async function Page({ params: { cluster } }: PageProps) {
   )
 }
 
-const TopRightToolbarExtras = ({ cluster }: PageProps['params']) => (
+const TopRightToolbarExtras = async ({
+  cluster,
+}: Awaited<PageProps['params']>) => (
   <div className="flex flex-row gap-2">
-    <Link href={getScopedLink(`/clusters/${cluster}/parts-across-replicas`)}>
+    <Link
+      href={await getScopedLink(`/clusters/${cluster}/parts-across-replicas`)}
+    >
       <Button
         variant="outline"
         className="flex flex-row gap-2 text-muted-foreground"
       >
         Parts on each table
       </Button>
     </Link>
-    <Link href={getScopedLink(`/clusters/${cluster}/count-across-replicas`)}>
+    <Link
+      href={await getScopedLink(`/clusters/${cluster}/count-across-replicas`)}
+    >
       <Button
         variant="outline"
         className="flex flex-row gap-2 text-muted-foreground"

app/[host]/dashboard/seeding.ts

@@ -44,7 +44,8 @@ const migrateSettings = async () => {
     })
 
     if (exists.length == 0) {
-      const resp = await getClient({ web: false }).insert({
+      const client = await getClient({ web: false })
+      const resp = await client.insert({
         table: TABLE_SETTINGS,
         values: [seed],
         format: 'JSONEachRow',
@@ -104,7 +105,8 @@ const migrateDashboard = async () => {
     })
 
     if (exists.length == 0) {
-      const resp = await getClient({ web: false }).insert({
+      const client = await getClient({ web: false })
+      const resp = await client.insert({
         table: TABLE_CHARTS,
         values: [seed],
         format: 'JSONEachRow',