chore(website): update to next 15

cschroeter · Nov 3, 2024 · 7345c80 · 7345c80
1 parent 11f6330
commit 7345c80
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 40 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/website/next.config.mjs b/website/next.config.mjs
@@ -1,11 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  experimental: {
-    outputFileTracingIncludes: {
-      '/*': ['../components/**/*', '../packages/panda/src/theme/recipes/**/*'],
-    },
-  },
   transpilePackages: ['shiki'],
+  outputFileTracingIncludes: {
+    '/*': ['../components/**/*', '../packages/panda/src/theme/recipes/**/*'],
+  },
 }
 
 const isDev = process.argv.indexOf('dev') !== -1

diff --git a/website/package.json b/website/package.json
@@ -35,7 +35,7 @@
     "effect": "3.10.8",
     "globby": "14.0.2",
     "lucide-react": "0.454.0",
-    "next": "14.2.15",
+    "next": "15.0.2",
     "next-auth": "5.0.0-beta.19",
     "next-themes": "0.3.0",
     "pandacss-preset-typography": "0.1.6",

diff --git a/website/src/app/@auth/(.)login/page.tsx b/website/src/app/@auth/(.)login/page.tsx
@@ -1,13 +1,12 @@
 import { AuthenticationDialog } from '~/components/auth/authentication-dialog'
 
 interface Props {
-  searchParams: {
-    callbackUrl?: string
-  }
+  searchParams: Promise<{ callbackUrl?: string }>
 }
 
-export default function Page(props: Props) {
-  const redirectTo = props.searchParams.callbackUrl ?? '/'
+export default async function Page(props: Props) {
+  const { callbackUrl } = await props.searchParams
+  const redirectTo = callbackUrl ?? '/'
 
   return <AuthenticationDialog redirectTo={redirectTo} />
 }
diff --git a/website/src/app/[framework]/blocks/[id]/page.tsx b/website/src/app/[framework]/blocks/[id]/page.tsx
@@ -6,13 +6,13 @@ import { PageHeader } from '~/components/page-header'
 import { blocks } from '.velite'
 
 interface Props {
-  params: {
+  params: Promise<{
     id: string
-  }
+  }>
 }
 
 export default async function Page(props: Props) {
-  const { params } = props
+  const params = await props.params
   const block = blocks.find((block) => block.id === params.id)
 
   if (!block) {
@@ -32,7 +32,7 @@ export default async function Page(props: Props) {
 }
 
 export async function generateMetadata(props: Props): Promise<Metadata> {
-  const { params } = props
+  const params = await props.params
   const block = blocks.find((block) => block.id === params.id)
 
   return block

diff --git a/website/src/app/[framework]/docs/[...slug]/page.tsx b/website/src/app/[framework]/docs/[...slug]/page.tsx
@@ -13,19 +13,20 @@ import { getServerContext } from '~/lib/server-context'
 import { capitalize } from '~/lib/string-utils'
 
 interface Props {
-  params: { framework: string; slug: string[] }
+  params: Promise<{ framework: string; slug: string[] }>
 }
 
-export default function Page(props: Props) {
-  const currentPage = getPageBySlug(props.params.slug, props.params.framework)
-  const nextPage = getNextPage(props.params.slug)
-  const prevPage = getPrevPage(props.params.slug)
+export default async function Page(props: Props) {
+  const params = await props.params
+  const currentPage = getPageBySlug(params.slug, params.framework)
+  const nextPage = getNextPage(params.slug)
+  const prevPage = getPrevPage(params.slug)
 
   const serverContext = getServerContext()
-  serverContext.framework = props.params.framework
-  serverContext.component = props.params.slug[1]
+  serverContext.framework = params.framework
+  serverContext.component = params.slug[1]
 
-  const framework = capitalize(props.params.framework)
+  const framework = capitalize(params.framework)
 
   if (currentPage) {
     return (
@@ -40,7 +41,7 @@ export default function Page(props: Props) {
                 ? `A ${framework} Component Library built on Ark UI and Panda CSS.`
                 : currentPage.description}
             </Text>
-            <DocumentationBadges framework={props.params.framework} href={currentPage.docs} />
+            <DocumentationBadges framework={params.framework} href={currentPage.docs} />
             <MDXContent code={currentPage.code} />
           </Prose>
           <DocsFooter nextPage={nextPage} prevPage={prevPage} />
@@ -56,9 +57,10 @@ export default function Page(props: Props) {
   return notFound()
 }
 
-export const generateMetadata = (props: Props): Metadata => {
-  const page = getPageBySlug(props.params.slug)
-  const framework = capitalize(props.params.framework)
+export const generateMetadata = async (props: Props): Promise<Metadata> => {
+  const params = await props.params
+  const page = getPageBySlug(params.slug)
+  const framework = capitalize(params.framework)
 
   if (page) {
     const description =
@@ -69,7 +71,7 @@ export const generateMetadata = (props: Props): Metadata => {
       title: page.title,
       description,
       alternates: {
-        canonical: `https://park-ui.com/${props.params.framework}/docs/${props.params.slug.join('/')}`,
+        canonical: `https://park-ui.com/${params.framework}/docs/${params.slug.join('/')}`,
       },
     }
   }

diff --git a/website/src/app/[framework]/layout.tsx b/website/src/app/[framework]/layout.tsx
@@ -2,12 +2,13 @@ import type { PropsWithChildren } from 'react'
 import { getServerContext } from '~/lib/server-context'
 
 interface Props {
-  params: { framework: string }
+  params: Promise<{ framework: string }>
 }
 
-export default function Layout(props: PropsWithChildren<Props>) {
+export default async function Layout(props: PropsWithChildren<Props>) {
+  const params = await props.params
   const serverContext = getServerContext()
-  serverContext.framework = props.params.framework
+  serverContext.framework = params.framework
 
   return props.children
 }
diff --git a/website/src/app/login/page.tsx b/website/src/app/login/page.tsx
@@ -2,13 +2,12 @@ import { Container } from 'styled-system/jsx'
 import { AuthenticationCard } from '~/components/auth/authentication-card'
 
 interface Props {
-  searchParams: {
-    callbackUrl?: string
-  }
+  searchParams: Promise<{ callbackUrl?: string }>
 }
 
 export default async function Page(props: Props) {
-  const redirectTo = props.searchParams.callbackUrl ?? '/'
+  const { callbackUrl } = await props.searchParams
+  const redirectTo = callbackUrl ?? '/'
 
   return (
     <Container px="4" maxW="md" display="flex" flex="1" alignItems="center">

diff --git a/website/src/app/thank-you/page.tsx b/website/src/app/thank-you/page.tsx
@@ -3,17 +3,15 @@ import { Box, Container, Stack } from 'styled-system/jsx'
 import { findLicenseKeysByOrderId } from '~/app/actions'
 import { ActivationForm } from '~/components/activation-form'
 import { PageHeader } from '~/components/page-header'
-
 import { auth } from '~/lib/auth'
 
 interface Props {
-  searchParams: {
-    orderId: string
-  }
+  searchParams: Promise<{ orderId: string }>
 }
 
 export default async function Page(props: Props) {
-  const licenseKeys = await findLicenseKeysByOrderId(props.searchParams.orderId)
+  const { orderId } = await props.searchParams
+  const licenseKeys = await findLicenseKeysByOrderId(orderId)
   const session = await auth()
   const authenticated = session !== null