chore: await dynamic APIs

package.json

@@ -74,7 +74,7 @@
     "gray-matter": "^4.0.3",
     "instantsearch.js": "^4.72.2",
     "lexical": "0.17.0",
-    "next": "15.0.0-canary.162",
+    "next": "15.0.0-canary.173",
     "next-mdx-remote": "^5.0.0",
     "next-sitemap": "^4.0.6",
     "node-cron": "^3.0.3",
@@ -84,10 +84,10 @@
     "payload-admin-bar": "^1.0.6",
     "prism-react-renderer": "^2.3.1",
     "qs-esm": "7.0.2",
-    "react": "19.0.0-rc-e4953922-20240919",
+    "react": "19.0.0-rc-3edc000d-20240926",
     "react-animate-height": "^3.0.4",
     "react-cookie": "^4.1.1",
-    "react-dom": "19.0.0-rc-e4953922-20240919",
+    "react-dom": "19.0.0-rc-3edc000d-20240926",
     "react-facebook-pixel": "^1.0.4",
     "react-fast-marquee": "^1.5.2",
     "react-instantsearch": "^7.11.4",

src/app/(frontend)/(cloud)/cloud/[team-slug]/(tabs)/page.tsx

@@ -6,7 +6,14 @@ import { Metadata } from 'next'
 import { mergeOpenGraph } from '@root/seo/mergeOpenGraph.js'
 import { TeamPage } from './page_client.js'
 
-export default async ({ params: { 'team-slug': teamSlug } }) => {
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug } = await params
   const team = await fetchTeamWithCustomer(teamSlug)
   const projectsRes = await fetchProjects([team?.id])
 
@@ -15,7 +22,14 @@ export default async ({ params: { 'team-slug': teamSlug } }) => {
   return <TeamPage team={team} initialState={projectsRes} templates={templates} />
 }
 
-export async function generateMetadata({ params: { 'team-slug': teamSlug } }): Promise<Metadata> {
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+  }>
+}): Promise<Metadata> {
+  const { 'team-slug': teamSlug } = await params
   return {
     title: `${teamSlug} - Team Projects`,
     openGraph: mergeOpenGraph({

src/app/(frontend)/(cloud)/cloud/[team-slug]/(tabs)/settings/(tabs)/billing/page.tsx

@@ -12,7 +12,14 @@ import { checkTeamRoles } from '@root/utilities/check-team-roles.js'
 
 import classes from './page.module.scss'
 
-export default async ({ params: { 'team-slug': teamSlug } }) => {
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug } = await params
   const { user } = await fetchMe()
   const team = await fetchTeamWithCustomer(teamSlug)
 
@@ -66,7 +73,14 @@ export default async ({ params: { 'team-slug': teamSlug } }) => {
   )
 }
 
-export async function generateMetadata({ params: { 'team-slug': teamSlug } }): Promise<Metadata> {
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+  }>
+}): Promise<Metadata> {
+  const { 'team-slug': teamSlug } = await params
   return {
     title: `${teamSlug} - Team Billing`,
     openGraph: {

src/app/(frontend)/(cloud)/cloud/[team-slug]/(tabs)/settings/(tabs)/invoices/page.tsx

@@ -8,7 +8,14 @@ import { Metadata } from 'next'
 import { Message } from '@components/Message/index.js'
 import { TeamInvoicesPage } from './page_client.js'
 
-export default async ({ params: { 'team-slug': teamSlug } }) => {
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug } = await params
   const { user } = await fetchMe()
   const team = await fetchTeamWithCustomer(teamSlug)
   const invoices = await fetchInvoices(team)
@@ -26,7 +33,14 @@ export default async ({ params: { 'team-slug': teamSlug } }) => {
   )
 }
 
-export async function generateMetadata({ params: { 'team-slug': teamSlug } }): Promise<Metadata> {
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+  }>
+}): Promise<Metadata> {
+  const { 'team-slug': teamSlug } = await params
   return {
     title: `${teamSlug} - Team Invoices`,
     openGraph: {

src/app/(frontend)/(cloud)/cloud/[team-slug]/(tabs)/settings/(tabs)/members/page.tsx

@@ -3,12 +3,26 @@ import { Metadata } from 'next'
 
 import { TeamMembersPage } from './page_client.js'
 
-export default async ({ params: { 'team-slug': teamSlug } }) => {
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug } = await params
   const team = await fetchTeamWithCustomer(teamSlug)
   return <TeamMembersPage team={team} />
 }
 
-export async function generateMetadata({ params: { 'team-slug': teamSlug } }): Promise<Metadata> {
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+  }>
+}): Promise<Metadata> {
+  const { 'team-slug': teamSlug } = await params
   return {
     title: `${teamSlug} - Team Members`,
     openGraph: {

src/app/(frontend)/(cloud)/cloud/[team-slug]/(tabs)/settings/(tabs)/subscriptions/page.tsx

@@ -9,7 +9,14 @@ import { Metadata } from 'next'
 import { Message } from '@components/Message/index.js'
 import { TeamSubscriptionsPage } from './page_client.js'
 
-export default async ({ params: { 'team-slug': teamSlug } }) => {
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug } = await params
   const { user } = await fetchMe()
   const team = await fetchTeamWithCustomer(teamSlug)
   const plans = await fetchPlans()
@@ -28,7 +35,14 @@ export default async ({ params: { 'team-slug': teamSlug } }) => {
   )
 }
 
-export async function generateMetadata({ params: { 'team-slug': teamSlug } }): Promise<Metadata> {
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+  }>
+}): Promise<Metadata> {
+  const { 'team-slug': teamSlug } = await params
   return {
     title: `${teamSlug} - Team Subscriptions`,
     openGraph: {

src/app/(frontend)/(cloud)/cloud/[team-slug]/(tabs)/settings/layout.tsx

@@ -1,14 +1,22 @@
-import * as React from 'react'
 import { fetchTeamWithCustomer } from '@cloud/_api/fetchTeam.js'
 import { Sidebar } from '@cloud/_components/Sidebar/index.js'
 import { cloudSlug } from '@cloud/slug.js'
-
 import { Gutter } from '@components/Gutter/index.js'
-import { TeamBillingMessages } from './TeamBillingMessages/index.js'
+import * as React from 'react'
 
+import { TeamBillingMessages } from './TeamBillingMessages/index.js'
 import classes from './layout.module.scss'
 
-export default async ({ params: { 'team-slug': teamSlug }, children }) => {
+export default async ({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: Promise<{
+    'team-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug } = await params
   // Note: this fetch will get deduped by the page
   // each page within this layout calls this same function
   // Next.js will only call it once

src/app/(frontend)/(cloud)/cloud/[team-slug]/(tabs)/settings/page.tsx

@@ -4,12 +4,26 @@ import { Metadata } from 'next'
 import { mergeOpenGraph } from '@root/seo/mergeOpenGraph.js'
 import { TeamSettingsPage } from './page_client.js'
 
-export default async ({ params: { 'team-slug': teamSlug } }) => {
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug } = await params
   const team = await fetchTeamWithCustomer(teamSlug)
   return <TeamSettingsPage team={team} />
 }
 
-export async function generateMetadata({ params: { 'team-slug': teamSlug } }): Promise<Metadata> {
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+  }>
+}): Promise<Metadata> {
+  const { 'team-slug': teamSlug } = await params
   return {
     title: `${teamSlug} - Team Settings`,
     openGraph: mergeOpenGraph({

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/(overview)/page.tsx

@@ -4,7 +4,15 @@ import { Metadata } from 'next'
 import { InfraOffline } from './InfraOffline/index.js'
 import { InfraOnline } from './InfraOnline/index.js'
 
-export default async ({ params: { 'team-slug': teamSlug, 'project-slug': projectSlug } }) => {
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+    'project-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug, 'project-slug': projectSlug } = await params
   const { team, project } = await fetchProjectAndRedirect({ teamSlug, projectSlug })
 
   if (project?.infraStatus === 'done') {

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/database/page.tsx

@@ -3,7 +3,15 @@ import { Metadata } from 'next'
 
 import { ProjectDatabasePage } from './page_client.js'
 
-export default async ({ params: { 'team-slug': teamSlug, 'project-slug': projectSlug } }) => {
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+    'project-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug, 'project-slug': projectSlug } = await params
   const { team, project } = await fetchProjectAndRedirect({ teamSlug, projectSlug })
 
   return <ProjectDatabasePage project={project} team={team} />

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/file-storage/page.tsx

@@ -3,7 +3,15 @@ import { Metadata } from 'next'
 
 import { ProjectFileStoragePage } from './page_client.js'
 
-export default async ({ params: { 'team-slug': teamSlug, 'project-slug': projectSlug } }) => {
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+    'project-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug, 'project-slug': projectSlug } = await params
   const { team, project } = await fetchProjectAndRedirect({ teamSlug, projectSlug })
   return <ProjectFileStoragePage project={project} team={team} />
 }

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/layout.tsx

@@ -78,8 +78,14 @@ export default async props => {
 }
 
 export async function generateMetadata({
-  params: { 'team-slug': teamSlug, 'project-slug': projectSlug },
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+    'project-slug': string
+  }>
 }): Promise<Metadata> {
+  const { 'team-slug': teamSlug, 'project-slug': projectSlug } = await params
   return {
     title: {
       template: `${teamSlug} / ${projectSlug} | %s`,

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/logs/page.tsx

@@ -3,7 +3,15 @@ import { Metadata } from 'next'
 
 import { ProjectLogsPage } from './page_client.js'
 
-export default async ({ params: { 'team-slug': teamSlug, 'project-slug': projectSlug } }) => {
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+    'project-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug, 'project-slug': projectSlug } = await params
   const { team, project } = await fetchProjectAndRedirect({ teamSlug, projectSlug })
   return <ProjectLogsPage project={project} team={team} />
 }

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/settings/(build-settings)/page.tsx

@@ -4,14 +4,28 @@ import { Metadata } from 'next'
 import { mergeOpenGraph } from '@root/seo/mergeOpenGraph.js'
 import { ProjectBuildSettingsPage } from './page_client.js'
 
-export default async ({ params: { 'team-slug': teamSlug, 'project-slug': projectSlug } }) => {
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+    'project-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug, 'project-slug': projectSlug } = await params
   const { team, project } = await fetchProjectAndRedirect({ teamSlug, projectSlug })
   return <ProjectBuildSettingsPage project={project} team={team} />
 }
 
 export async function generateMetadata({
-  params: { 'team-slug': teamSlug, 'project-slug': projectSlug },
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+    'project-slug': string
+  }>
 }): Promise<Metadata> {
+  const { 'team-slug': teamSlug, 'project-slug': projectSlug } = await params
   return {
     title: 'Build Settings',
     openGraph: mergeOpenGraph({

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/settings/billing/page.tsx

@@ -29,7 +29,15 @@ const statusLabels = {
   unknown: 'Unknown',
 }
 
-export default async ({ params: { 'team-slug': teamSlug, 'project-slug': projectSlug } }) => {
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+    'project-slug': string
+  }>
+}) => {
+  const { 'team-slug': teamSlug, 'project-slug': projectSlug } = await params
   const { user } = await fetchMe()
 
   const { team, project } = await fetchProjectAndRedirect({ teamSlug, projectSlug })
@@ -115,8 +123,14 @@ export default async ({ params: { 'team-slug': teamSlug, 'project-slug': project
 }
 
 export async function generateMetadata({
-  params: { 'team-slug': teamSlug, 'project-slug': projectSlug },
+  params,
+}: {
+  params: Promise<{
+    'team-slug': string
+    'project-slug': string
+  }>
 }): Promise<Metadata> {
+  const { 'team-slug': teamSlug, 'project-slug': projectSlug } = await params
   return {
     title: 'Billing',
     openGraph: mergeOpenGraph({