Refactor: Upgrade Next.js to 16.0.1 and Remove PPR (#153)

<!-- CURSOR_SUMMARY -->
> [!NOTE]
> Upgrades Next.js/React and build to Turbopack, removes docs
(fumadocs), refactors sandboxes to a single tabbed page, renames
middleware to proxy with route fixes, and updates tests/config.
> 
> - **Core/Build**
>   - Upgrade `next` to `^16.0.1` and `react`/`react-dom` to `^19.2.0`.
>   - Use Turbopack for `build` and `preview` scripts.
> - Enable `reactCompiler`; adjust `experimental`
(`clientSegmentCache`), remove `ppr` and custom `webpack` `node-loader`
rule.
>   - Trim `serverExternalPackages` to `['pino']`.
>   - TS: switch `jsx` to `react-jsx`; include `.next/dev/types`.
> - **Routing/Middleware**
> - Rename exported middleware to `proxy` in `src/proxy.ts`; update all
usages/tests.
>   - Add `src/app/(rewrites)/[[...slug]]/not-found.tsx`.
> - `route.ts`: normalize `/index` to `/` and adjust
`generateStaticParams` slug mapping.
> - **Dashboard – Sandboxes**
> - Replace parallel routes/layout with single `page.tsx` using
`DashboardTabs` and `Suspense`.
> - Update `components`: `list-content` and `monitoring-content`
props/types; charts/header imports/types aligned.
> - **Docs Removal**
> - Remove fumadocs packages and related UI/components
(`src/features/docs/**`, `src/app/layout.config.tsx`).
> - **Tests**
>   - Integration tests updated to call `proxy` instead of `middleware`.
> - **UI/Misc**
>   - `AnimatedNumber`: `AnimatePresence` set `initial={false}`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
6b52beb. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: ben-fornefeld

.gitignore

@@ -37,9 +37,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# fuma-docs
-/.source
-
 CLAUDE.md
 
 # tooling

bun.lock

@@ -3,36 +3,25 @@ export const DOCUMENTATION_DOMAIN = 'e2b.mintlify.app'
 
 /** @type {import('next').NextConfig} */
 const config = {
-  eslint: {
-    dirs: ['src', 'scripts'], // Only run ESLint on these directories during production builds
-  },
   reactStrictMode: true,
+  reactCompiler: true,
   experimental: {
-    reactCompiler: true,
-    ppr: true,
     staleTimes: {
       dynamic: 180,
       static: 180,
     },
     serverActions: {
       bodySizeLimit: '5mb',
     },
+    clientSegmentCache: true,
   },
   logging: {
     fetches: {
       fullUrl: true,
     },
   },
-  serverExternalPackages: ['pino', 'pino-loki'],
+  serverExternalPackages: ['pino'],
   trailingSlash: false,
-  webpack: (config) => {
-    config.module.rules.push({
-      test: /\.node$/,
-      use: 'node-loader',
-    })
-
-    return config
-  },
   headers: async () => [
     {
       source: '/(.*)',

next.config.mjs

@@ -5,9 +5,9 @@
   "scripts": {
     "<<<<<<< Next.js": "",
     "dev": "bun scripts:check-app-env && next dev --turbopack | pino-pretty --colorize",
-    "build": "next build",
+    "build": "next build --turbopack",
     "start": "next start",
-    "preview": "next build && next start | pino-pretty --colorize",
+    "preview": "next build --turbopack && next start | pino-pretty --colorize",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "format": "prettier --write .",
@@ -39,7 +39,6 @@
     "test:ui:integration": "bun scripts:check-app-env && vitest --ui src/__test__/integration/"
   },
   "dependencies": {
-    "@fumadocs/mdx-remote": "^1.2.0",
     "@google-cloud/storage": "^7.15.2",
     "@hookform/resolvers": "^5.2.2",
     "@next-safe-action/adapter-react-hook-form": "^2.0.0",
@@ -101,16 +100,13 @@
     "echarts": "^6.0.0",
     "echarts-for-react": "^3.0.2",
     "fast-xml-parser": "^4.5.1",
-    "fumadocs-core": "^15.0.6",
-    "fumadocs-mdx": "^11.5.3",
-    "fumadocs-ui": "^15.0.6",
     "geist": "^1.3.1",
     "immer": "^10.1.1",
     "lucide-react": "^0.525.0",
     "micromatch": "^4.0.8",
     "motion": "^12.18.1",
     "nanoid": "^5.0.9",
-    "next": "15.3.0-canary.23",
+    "next": "^16.0.1",
     "next-safe-action": "^8.0.11",
     "next-themes": "^0.4.6",
     "nuqs": "^2.7.0",
@@ -119,9 +115,9 @@
     "pino": "^9.7.0",
     "postgres": "^3.4.5",
     "posthog-js": "^1.268.1",
-    "react": "^19.1.0",
+    "react": "^19.2.0",
     "react-day-picker": "^9.9.0",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.2.0",
     "react-error-boundary": "^5.0.0",
     "react-hook-form": "^7.66.0",
     "react-icons": "^5.4.0",
@@ -156,11 +152,10 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/bun": "^1.2.5",
-    "pino-pretty": "^13.1.1",
     "@types/node": "22.10.10",
     "@types/pg": "^8.11.11",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "19.0.3",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "@types/semver": "^7.7.0",
     "@vitest/coverage-v8": "^3.0.7",
     "@vitest/ui": "3.0.7",
@@ -173,6 +168,7 @@
     "eslint-plugin-prettier": "^5.2.3",
     "node-loader": "^2.1.0",
     "openapi-typescript": "^7.8.0",
+    "pino-pretty": "^13.1.1",
     "postcss": "8.5.1",
     "postcss-import": "^16.1.0",
     "prettier": "^3.4.2",

package.json

@@ -3,7 +3,7 @@ import { AUTH_URLS, PROTECTED_URLS } from '@/configs/urls'
 import { kv } from '@/lib/clients/kv'
 import { supabaseAdmin } from '@/lib/clients/supabase/admin'
 import { checkUserTeamAuthorization } from '@/lib/utils/server'
-import { middleware } from '@/middleware'
+import { proxy } from '@/proxy'
 import { createServerClient } from '@supabase/ssr'
 import { NextRequest, NextResponse } from 'next/server'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -166,7 +166,7 @@ describe('Middleware Integration Tests', () => {
       })
 
       // Execute: Run the middleware with the unauthenticated request
-      await middleware(request)
+      await proxy(request)
 
       // Verify: Check that a redirect to sign-in page occurred
       const redirectCalls = vi.mocked(NextResponse.redirect).mock.calls
@@ -208,8 +208,8 @@ describe('Middleware Integration Tests', () => {
           }) as unknown as ReturnType<typeof supabaseAdmin.from>
       )
 
-      // Execute: Run the middleware with the authenticated request
-      await middleware(request)
+      // Execute: Run the proxy with the authenticated request
+      await proxy(request)
 
       // Verify: Check that user is redirected to their default team
       const redirectCalls = vi.mocked(NextResponse.redirect).mock.calls
@@ -237,8 +237,8 @@ describe('Middleware Integration Tests', () => {
       // Setup: User has no access to the tampered team
       vi.mocked(checkUserTeamAuthorization).mockResolvedValue(false)
 
-      // Execute: Run the middleware with the tampered request
-      await middleware(request)
+      // Execute: Run the proxy with the tampered request
+      await proxy(request)
 
       // Verify: User is redirected away from the tampered team
       const redirectCalls = vi.mocked(NextResponse.redirect).mock.calls
@@ -268,8 +268,8 @@ describe('Middleware Integration Tests', () => {
         return Promise.resolve(null)
       })
 
-      // Execute: Run the middleware with the request
-      await middleware(request)
+      // Execute: Run the proxy with the request
+      await proxy(request)
 
       // Verify: Database check was skipped due to cache hit
       expect(checkUserTeamAuthorization).not.toHaveBeenCalled()
@@ -312,8 +312,8 @@ describe('Middleware Integration Tests', () => {
           }) as unknown as ReturnType<typeof supabaseAdmin.from>
       )
 
-      // Execute: Run the middleware with the request
-      await middleware(request)
+      // Execute: Run the proxy with the request
+      await proxy(request)
 
       // Verify: User is redirected to their default team
       const redirectCalls = vi.mocked(NextResponse.redirect).mock.calls
@@ -348,8 +348,8 @@ describe('Middleware Integration Tests', () => {
           }) as unknown as ReturnType<typeof supabaseAdmin.from>
       )
 
-      // Execute: Run the middleware with the request
-      await middleware(request)
+      // Execute: Run the proxy with the request
+      await proxy(request)
 
       // Verify: User is redirected to the new team page
       const redirectCalls = vi.mocked(NextResponse.redirect).mock.calls
@@ -388,8 +388,8 @@ describe('Middleware Integration Tests', () => {
           }) as unknown as ReturnType<typeof supabaseAdmin.from>
       )
 
-      // Execute: Run the middleware with the request
-      await middleware(request)
+      // Execute: Run the proxy with the request
+      await proxy(request)
 
       // Verify: User is redirected to home on error
       const redirectCalls = vi.mocked(NextResponse.redirect).mock.calls

src/__test__/integration/middleware.test.ts

@@ -0,0 +1,13 @@
+import NotFound from '@/ui/not-found'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: '404 - Page Not Found',
+  description:
+    'The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.',
+  robots: 'noindex, nofollow',
+}
+
+export default function RootNotFound() {
+  return <NotFound />
+}

src/app/(rewrites)/[[...slug]]/not-found.tsx

@@ -18,6 +18,20 @@ const REVALIDATE_TIME = 900 // 15 minutes ttl
 export async function GET(request: NextRequest): Promise<Response> {
   const url = new URL(request.url)
 
+  // Next.js (versions > 15.3.0) can alias the root path ("/") in `request.url` to
+  // the corresponding file path (e.g., "/index") during internal processing.
+  // This is a hotfix to normalize the pathname back to "/". We previously tried
+  // using `request.nextUrl.pathname` to preserve the original client-requested URL,
+  // but that approach did not work as well in practice.
+  // This issue does only seem to occur in Vercel Production builds, not in local development or preview deployments.
+
+  // NOTE - Not sure if this is a bug or intended from the Next.js team, but it is what it is.
+  // We need to handle this case because @rewrites.ts has a config for rewriting "/" (index),
+  // and without this normalization, we would get a 404 in production when Next.js aliases "/" to "/index".
+  if (url.pathname === '/index') {
+    url.pathname = '/'
+  }
+
   const requestHostname = url.hostname
 
   const updateUrlHostname = (newHostname: string) => {
@@ -110,7 +124,7 @@ export async function generateStaticParams() {
       const url = new URL(entry.url)
       const pathname = url.pathname
 
-      // Check if this path matches any rule in ROUTE_REWRITE_CONFIG
+      // check if this path matches any rule in ROUTE_REWRITE_CONFIG
       for (const domainConfig of ROUTE_REWRITE_CONFIG) {
         const isIndex = pathname === '/' || pathname === ''
         const matchingRule = domainConfig.rules.find((rule) => {
@@ -130,13 +144,14 @@ export async function generateStaticParams() {
       return false
     })
     .map((entry) => {
-      // Map the filtered entries to slug format
+      // map the filtered entries to slug format
       const url = new URL(entry.url)
       const pathname = url.pathname
       const pathSegments = pathname
         .split('/')
         .filter((segment) => segment !== '')
-      return { slug: pathSegments.length > 0 ? pathSegments : undefined }
+
+      return { slug: pathSegments }
     })
 
   return slugs

src/app/(rewrites)/[[...slug]]/route.ts

@@ -4,23 +4,13 @@ import { getTeamSandboxes } from '@/server/sandboxes/get-team-sandboxes'
 import { getTeamSandboxesMetrics } from '@/server/sandboxes/get-team-sandboxes-metrics'
 import ErrorBoundary from '@/ui/error'
 
-interface PageProps {
-  params: Promise<{
-    teamIdOrSlug: string
-  }>
-}
-
-export default async function Page({ params }: PageProps) {
-  const { teamIdOrSlug } = await params
-
-  return <PageContent teamIdOrSlug={teamIdOrSlug} />
-}
-
-interface PageContentProps {
+interface ListContentProps {
   teamIdOrSlug: string
 }
 
-async function PageContent({ teamIdOrSlug }: PageContentProps) {
+export default async function ListContent({
+  teamIdOrSlug,
+}: ListContentProps) {
   const teamId = await resolveTeamIdInServerComponent(teamIdOrSlug)
 
   const sandboxesRes = await getTeamSandboxes({ teamId })
@@ -59,3 +49,4 @@ async function PageContent({ teamIdOrSlug }: PageContentProps) {
     </div>
   )
 }
+

src/app/dashboard/[teamIdOrSlug]/sandboxes/@list/loading.tsx

@@ -1,24 +1,24 @@
 import { TeamMetricsCharts } from '@/features/dashboard/sandboxes/monitoring/charts/charts'
 import SandboxesMonitoringHeader from '@/features/dashboard/sandboxes/monitoring/header'
 
-export interface SandboxesMonitoringPageParams {
+export interface MonitoringContentParams {
   teamIdOrSlug: string
 }
 
-export interface SandboxesMonitoringPageSearchParams {
+export interface MonitoringContentSearchParams {
   start?: string
   end?: string
 }
 
-interface SandboxesMonitoringPageProps {
-  params: Promise<SandboxesMonitoringPageParams>
-  searchParams: Promise<SandboxesMonitoringPageSearchParams>
+interface MonitoringContentProps {
+  params: Promise<MonitoringContentParams>
+  searchParams: Promise<MonitoringContentSearchParams>
 }
 
-export default function SandboxesMonitoringPage({
+export default function MonitoringContent({
   params,
   searchParams,
-}: SandboxesMonitoringPageProps) {
+}: MonitoringContentProps) {
   return (
     <div className="flex flex-col h-full relative min-h-0 max-md:overflow-y-auto">
       <SandboxesMonitoringHeader params={params} />
@@ -28,3 +28,4 @@ export default function SandboxesMonitoringPage({
     </div>
   )
 }
+