chore: Bump the rest of the apps to Nextjs 15 (#35475)

* Bump nextjs in the ui-library.

* Bump the nextjs in design-system.

* Bump nextjs to v15 in www.

* Bump the next version in the pnpm catalog.

* Switch all apps to using the catalog version of next.

* Fix ui-lib and design-system to build with next 15.

* Fix some prettier errors.

* Bump the next-eslint package.

* Fix a lint issue about a component starting with underscore.

* Use the catalog version of next in cms app.

* Disable turbo for dev command in www. Remove obsolete experimental flags.

* Return some of the experimental flags.

apps/cms/package.json

@@ -32,7 +32,7 @@
     "cross-env": "^7.0.3",
     "eslint-config-supabase": "workspace:*",
     "graphql": "^16.8.1",
-    "next": "~15.3.0",
+    "next": "catalog:",
     "payload": "3.33.0",
     "react": "catalog:",
     "react-dom": "catalog:",

apps/design-system/app/(app)/docs/[[...slug]]/page.tsx

@@ -15,12 +15,12 @@ import Balancer from 'react-wrap-balancer'
 import { ScrollArea, Separator } from 'ui'
 
 interface DocPageProps {
-  params: {
+  params: Promise<{
     slug: string[]
-  }
+  }>
 }
 
-async function getDocFromParams({ params }: DocPageProps) {
+async function getDocFromParams({ params }: { params: { slug: string[] } }) {
   const slug = params.slug?.join('/') || ''
   const doc = allDocs.find((doc) => doc.slugAsParams === slug)
 
@@ -31,7 +31,8 @@ async function getDocFromParams({ params }: DocPageProps) {
   return doc
 }
 
-export async function generateMetadata({ params }: DocPageProps): Promise<Metadata> {
+export async function generateMetadata(props: DocPageProps): Promise<Metadata> {
+  const params = await props.params
   const doc = await getDocFromParams({ params })
 
   if (!doc) {
@@ -65,13 +66,14 @@ export async function generateMetadata({ params }: DocPageProps): Promise<Metada
   }
 }
 
-export async function generateStaticParams(): Promise<DocPageProps['params'][]> {
+export async function generateStaticParams(): Promise<{ slug: string[] }[]> {
   return allDocs.map((doc) => ({
     slug: doc.slugAsParams.split('/'),
   }))
 }
 
-export default async function DocPage({ params }: DocPageProps) {
+export default async function DocPage(props: DocPageProps) {
+  const params = await props.params
   const doc = await getDocFromParams({ params })
 
   if (!doc) {

apps/design-system/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev --port 3003",
+    "dev": "next dev --turbopack --port 3003",
     "build": "pnpm run content:build && pnpm run build:registry && pnpm run build:llms && next build",
     "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --log-level silent --write \"registry/**/*.{ts,tsx,mdx}\" --cache",
     "build:llms": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-llms-txt.ts",

apps/docs/package.json

@@ -83,7 +83,7 @@
     "mdast-util-to-string": "^3.1.1",
     "micromark-extension-gfm": "^2.0.3",
     "micromark-extension-mdxjs": "^1.0.0",
-    "next": "15.3.1",
+    "next": "catalog:",
     "next-mdx-remote": "^4.4.1",
     "next-plugin-yaml": "^1.0.1",
     "next-themes": "^0.3.0",

apps/studio/components/ui/DatePicker/DatePicker.tsx

@@ -1,8 +1,8 @@
 import { format } from 'date-fns'
 import dayjs from 'dayjs'
-import { ArrowRight, ChevronLeft, ChevronRight, Calendar } from 'lucide-react'
+import { ArrowRight, Calendar, ChevronLeft, ChevronRight } from 'lucide-react'
 import React, { useEffect, useState } from 'react'
-import DatePicker from 'react-datepicker'
+import ReactDatePicker from 'react-datepicker'
 
 import type { DatePickerToFrom } from 'components/interfaces/Settings/Logs/Logs.types'
 import {
@@ -37,7 +37,7 @@ const END_DATE_DEFAULT = new Date()
 const START_TIME_DEFAULT = { HH: '00', mm: '00', ss: '00' }
 const END_TIME_DEFAULT = { HH: '23', mm: '59', ss: '59' }
 
-function _DatePicker({
+function DatePicker({
   to,
   from,
   onChange,
@@ -221,7 +221,7 @@ function _DatePicker({
             </>
           )}
           <div className="p-2">
-            <DatePicker
+            <ReactDatePicker
               inline
               selectsRange={selectsRange}
               selected={startDate}
@@ -292,4 +292,4 @@ function _DatePicker({
   )
 }
 
-export default _DatePicker
+export default DatePicker

apps/studio/package.json

@@ -82,7 +82,7 @@
     "memoize-one": "^5.0.1",
     "mime-db": "^1.53.0",
     "monaco-editor": "0.52.2",
-    "next": "~15.3.0",
+    "next": "catalog:",
     "next-themes": "^0.3.0",
     "nuqs": "^2.4.1",
     "openai": "^4.20.1",

apps/ui-library/app/(app)/docs/[[...slug]]/page.tsx

@@ -15,12 +15,12 @@ import Balancer from 'react-wrap-balancer'
 import { ScrollArea, Separator } from 'ui'
 
 interface DocPageProps {
-  params: {
+  params: Promise<{
     slug: string[]
-  }
+  }>
 }
 
-async function getDocFromParams({ params }: DocPageProps) {
+async function getDocFromParams({ params }: { params: { slug: string[] } }) {
   const slug = params.slug?.join('/') || ''
   const doc = allDocs.find((doc) => doc.slugAsParams === slug)
 
@@ -31,7 +31,8 @@ async function getDocFromParams({ params }: DocPageProps) {
   return doc
 }
 
-export async function generateMetadata({ params }: DocPageProps): Promise<Metadata> {
+export async function generateMetadata(props: DocPageProps): Promise<Metadata> {
+  const params = await props.params
   const doc = await getDocFromParams({ params })
 
   if (!doc) {
@@ -65,13 +66,14 @@ export async function generateMetadata({ params }: DocPageProps): Promise<Metada
   }
 }
 
-export async function generateStaticParams(): Promise<DocPageProps['params'][]> {
+export async function generateStaticParams(): Promise<{ slug: string[] }[]> {
   return allDocs.map((doc) => ({
     slug: doc.slugAsParams.split('/'),
   }))
 }
 
-export default async function DocPage({ params }: DocPageProps) {
+export default async function DocPage(props: DocPageProps) {
+  const params = await props.params
   const doc = await getDocFromParams({ params })
 
   if (!doc) {

apps/ui-library/app/example/realtime-chat-demo/page.tsx

@@ -1,6 +1,7 @@
 import Demo from '@/registry/default/examples/realtime-chat-demo'
 
-const RealtimeChatDemoPage = ({ searchParams }: { searchParams: { roomName: string } }) => {
+const RealtimeChatDemoPage = async (props: { searchParams: Promise<{ roomName: string }> }) => {
+  const searchParams = await props.searchParams
   const roomName = searchParams['roomName'] || `room-${Math.floor(Math.random() * 1000)}`
 
   return <Demo roomName={roomName} />

apps/ui-library/components/block-item.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { OpenInV0Button } from '@/components/open-in-v0-button'
 
 import dynamic from 'next/dynamic'

apps/ui-library/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev --port 3004",
+    "dev": "next dev --turbopack --port 3004",
     "build": "pnpm run content:build && pnpm run build:registry && pnpm run build:llms && next build",
     "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --write registry.json && rimraf -G public/r && shadcn build && tsx scripts/clean-registry.ts",
     "build:llms": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-llms-txt.ts",

apps/ui-library/public/llms.txt

@@ -1,5 +1,5 @@
 # Supabase UI Library
-Last updated: 2025-03-28T12:17:05.978Z
+Last updated: 2025-05-12T11:50:40.406Z
 
 ## Overview
 Library of components for your project. The components integrate with Supabase and are shadcn compatible.
@@ -10,34 +10,44 @@ Library of components for your project. The components integrate with Supabase a
 - [FAQ](https://supabase.com/ui/docs/getting-started/faq)
     - Frequently asked questions
 - [Introduction](https://supabase.com/ui/docs/getting-started/introduction)
-    - A flexible, open-source UI component library built on shadcn/ui, designed to simplify Supabase-powered projects with pre-built Auth, Storage, and Realtime features.
+    - A flexible, open-source, React-based UI component library built on shadcn/ui, designed to simplify Supabase-powered projects with pre-built Auth, Storage, and Realtime features.
 - [Quick Start](https://supabase.com/ui/docs/getting-started/quickstart)
-    - Components
-- [Next.js](https://supabase.com/ui/docs/nextjs/client)
+    - Install shadcn/ui and use the components in your project
+- [Infinite Query Hook](https://supabase.com/ui/docs/infinite-query-hook)
+    - React hook for infinite lists, fetching data from Supabase.
+- [Supabase Client Libraries](https://supabase.com/ui/docs/nextjs/client)
     - Supabase client for Next.js
 - [Current User Avatar](https://supabase.com/ui/docs/nextjs/current-user-avatar)
     - Supabase Auth-aware avatar
 - [Dropzone (File Upload)](https://supabase.com/ui/docs/nextjs/dropzone)
     - Displays a control for easier uploading of files directly to Supabase Storage
-- [Password-based Auth (Next.js)](https://supabase.com/ui/docs/nextjs/password-based-auth)
-    - Password-based Auth block for Next.js app
+- [Password-based Authentication](https://supabase.com/ui/docs/nextjs/password-based-auth)
+    - Password-based authentication block for Next.js
 - [Realtime Avatar Stack](https://supabase.com/ui/docs/nextjs/realtime-avatar-stack)
     - Avatar stack in realtime
+- [Realtime Chat](https://supabase.com/ui/docs/nextjs/realtime-chat)
+    - Real-time chat component for collaborative applications
 - [Realtime Cursor](https://supabase.com/ui/docs/nextjs/realtime-cursor)
     - Real-time cursor sharing for collaborative applications
-- [Supabase Client for React Router](https://supabase.com/ui/docs/react-router/client)
+- [Social Authentication](https://supabase.com/ui/docs/nextjs/social-auth)
+    - Social authentication block for Next.js
+- [Supabase Client Libraries](https://supabase.com/ui/docs/react-router/client)
     - Supabase client for React Router
 - [Current User Avatar](https://supabase.com/ui/docs/react-router/current-user-avatar)
     - Supabase Auth-aware avatar
 - [Dropzone (File Upload)](https://supabase.com/ui/docs/react-router/dropzone)
     - Displays a control for easier uploading of files directly to Supabase Storage
-- [Password-based Auth (Next.js)](https://supabase.com/ui/docs/react-router/password-based-auth)
-    - Password-based Auth block for Next.js app
+- [Password-based Authentication](https://supabase.com/ui/docs/react-router/password-based-auth)
+    - Password-based authentication block for React Router
 - [Realtime Avatar Stack](https://supabase.com/ui/docs/react-router/realtime-avatar-stack)
     - Avatar stack in realtime
+- [Realtime Chat](https://supabase.com/ui/docs/react-router/realtime-chat)
+    - Real-time chat component for collaborative applications
 - [Realtime Cursor](https://supabase.com/ui/docs/react-router/realtime-cursor)
     - Real-time cursor sharing for collaborative applications
-- [React Single Page Applications](https://supabase.com/ui/docs/react/client)
+- [Social Authentication](https://supabase.com/ui/docs/react-router/social-auth)
+    - Social authentication block for React Router
+- [Supabase Client Libraries](https://supabase.com/ui/docs/react/client)
     - Supabase client for React Single Page Applications
 - [Current User Avatar](https://supabase.com/ui/docs/react/current-user-avatar)
     - Supabase Auth-aware avatar
@@ -47,17 +57,25 @@ Library of components for your project. The components integrate with Supabase a
     - Password-based authentication block for React Single Page Applications
 - [Realtime Avatar Stack](https://supabase.com/ui/docs/react/realtime-avatar-stack)
     - Avatar stack in realtime
+- [Realtime Chat](https://supabase.com/ui/docs/react/realtime-chat)
+    - Real-time chat component for collaborative applications
 - [Realtime Cursor](https://supabase.com/ui/docs/react/realtime-cursor)
     - Real-time cursor sharing for collaborative applications
-- [TanStack Start](https://supabase.com/ui/docs/tanstack/client)
+- [Social Authentication](https://supabase.com/ui/docs/react/social-auth)
+    - Social authentication block for React Single Page Applications
+- [Supabase Client Libraries](https://supabase.com/ui/docs/tanstack/client)
     - Supabase client for TanStack Start
 - [Current User Avatar](https://supabase.com/ui/docs/tanstack/current-user-avatar)
     - Supabase Auth-aware avatar
 - [Dropzone (File Upload)](https://supabase.com/ui/docs/tanstack/dropzone)
     - Displays a control for easier uploading of files directly to Supabase Storage
-- [TanStack Start](https://supabase.com/ui/docs/tanstack/password-based-auth)
-    - Supabase client for TanStack Start
+- [Password-based Authentication](https://supabase.com/ui/docs/tanstack/password-based-auth)
+    - Password-based authentication block for TanStack Start
 - [Realtime Avatar Stack](https://supabase.com/ui/docs/tanstack/realtime-avatar-stack)
     - Avatar stack in realtime
+- [Realtime Chat](https://supabase.com/ui/docs/tanstack/realtime-chat)
+    - Real-time chat component for collaborative applications
 - [Realtime Cursor](https://supabase.com/ui/docs/tanstack/realtime-cursor)
     - Real-time cursor sharing for collaborative applications
+- [Social Authentication](https://supabase.com/ui/docs/tanstack/social-auth)
+    - Social authentication block for Tanstack Start

apps/www/app/api-v2/opt-out/[ref]/route.ts

@@ -27,7 +27,8 @@ async function verifyCaptcha(token: string): Promise<boolean> {
   }
 }
 
-export async function POST(req: NextRequest, { params }: { params: { ref: string } }) {
+export async function POST(req: NextRequest, props: { params: Promise<{ ref: string }> }) {
+  const params = await props.params
   const ref = params.ref
   const { reason, email, captchaToken } = await req.json()
 

apps/www/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/www/next.config.mjs

@@ -60,7 +60,6 @@ const nextConfig = {
     esmExternals: 'loose',
   },
   reactStrictMode: true,
-  swcMinify: true,
   images: {
     dangerouslyAllowSVG: true,
     remotePatterns,

apps/www/package.json

@@ -22,8 +22,8 @@
     "@hcaptcha/react-hcaptcha": "^1.11.1",
     "@heroicons/react": "^1.0.6",
     "@mdx-js/react": "^2.3.0",
-    "@next/bundle-analyzer": "^14.2.3",
-    "@next/mdx": "^14.2.3",
+    "@next/bundle-analyzer": "15.3.1",
+    "@next/mdx": "15.3.1",
     "@octokit/auth-app": "^7.0.0",
     "@octokit/core": "^6.0.0",
     "@octokit/graphql": "^8.0.0",

packages/eslint-config-supabase/package.json

@@ -8,7 +8,7 @@
     "clean": "rimraf node_modules"
   },
   "dependencies": {
-    "eslint-config-next": "^14.2.3",
+    "eslint-config-next": "15.3.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-turbo": "^2.0.4"
   }

pnpm-workspace.yaml

@@ -8,7 +8,7 @@ catalog:
   '@supabase/auth-js': 2.71.0-rc.2
   '@supabase/supabase-js': ^2.47.14
   '@supabase/realtime-js': ^2.11.3
-  next: 14.2.26
+  next: 15.3.1
   'react': '^18.3.0'
   'react-dom': '^18.3.0'
   '@types/react': '^18.3.0'