@nextsparkjs/core 0.1.0-beta.136 → 0.1.0-beta.138

package/dist/templates/next.config.mjs

@@ -17,6 +17,9 @@ const nextConfig = {
   },
   transpilePackages: ['@nextsparkjs/core'],
   serverExternalPackages: ['handlebars'],
+  turbopack: {
+    root: __dirname,
+  },
   experimental: {
     externalDir: true,
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextsparkjs/core",
-  "version": "0.1.0-beta.136",
+  "version": "0.1.0-beta.138",
   "description": "NextSpark - The complete SaaS framework for Next.js",
   "license": "MIT",
   "author": "NextSpark <hello@nextspark.dev>",
@@ -462,7 +462,7 @@
     "tailwind-merge": "^3.3.1",
     "uuid": "^13.0.0",
     "zod": "^4.1.5",
-    "@nextsparkjs/testing": "0.1.0-beta.136"
+    "@nextsparkjs/testing": "0.1.0-beta.138"
   },
   "scripts": {
     "postinstall": "node scripts/postinstall.mjs || true",

package/scripts/build/registry/__tests__/translation-registry-ppr.test.mjs

@@ -0,0 +1,118 @@
+/**
+ * Tests for PPR-related functions in translation-registry generator
+ *
+ * Tests: getDefaultLocale, getDefaultThemeMode, detectPPREnabled
+ */
+
+import { existsSync, mkdirSync, writeFileSync, rmSync } from 'fs'
+import { join } from 'path'
+import { tmpdir } from 'os'
+import { detectPPREnabled } from '../generators/translation-registry.mjs'
+
+// Create a temp directory for each test run
+const TEST_DIR = join(tmpdir(), `nextspark-ppr-test-${Date.now()}`)
+
+function setup() {
+  if (existsSync(TEST_DIR)) rmSync(TEST_DIR, { recursive: true })
+  mkdirSync(TEST_DIR, { recursive: true })
+}
+
+function teardown() {
+  if (existsSync(TEST_DIR)) rmSync(TEST_DIR, { recursive: true })
+}
+
+// --- detectPPREnabled ---
+
+function testDetectPPR_withCacheComponentsTrue() {
+  setup()
+  writeFileSync(join(TEST_DIR, 'next.config.mjs'), `
+const nextConfig = {
+  cacheComponents: true,
+  experimental: {},
+}
+export default nextConfig
+`)
+  const result = detectPPREnabled(TEST_DIR)
+  console.assert(result === true, 'detectPPREnabled should return true when cacheComponents: true')
+  teardown()
+  console.log('  PASS: cacheComponents: true detected')
+}
+
+function testDetectPPR_withCacheComponentsFalse() {
+  setup()
+  writeFileSync(join(TEST_DIR, 'next.config.mjs'), `
+const nextConfig = {
+  cacheComponents: false,
+}
+export default nextConfig
+`)
+  const result = detectPPREnabled(TEST_DIR)
+  console.assert(result === false, 'detectPPREnabled should return false when cacheComponents: false')
+  teardown()
+  console.log('  PASS: cacheComponents: false returns false')
+}
+
+function testDetectPPR_withoutConfig() {
+  setup()
+  // No next.config file at all
+  const result = detectPPREnabled(TEST_DIR)
+  console.assert(result === false, 'detectPPREnabled should return false when no config exists')
+  teardown()
+  console.log('  PASS: no next.config returns false')
+}
+
+function testDetectPPR_withNextConfigTs() {
+  setup()
+  writeFileSync(join(TEST_DIR, 'next.config.ts'), `
+import type { NextConfig } from 'next'
+const config: NextConfig = {
+  cacheComponents: true,
+}
+export default config
+`)
+  const result = detectPPREnabled(TEST_DIR)
+  console.assert(result === true, 'detectPPREnabled should detect in .ts files')
+  teardown()
+  console.log('  PASS: next.config.ts supported')
+}
+
+function testDetectPPR_withCacheComponentsInComment() {
+  setup()
+  writeFileSync(join(TEST_DIR, 'next.config.mjs'), `
+const nextConfig = {
+  // cacheComponents: true,
+  reactStrictMode: true,
+}
+export default nextConfig
+`)
+  // This will match the regex even in comments. Acceptable behavior —
+  // if you commented it out, you probably want to disable it.
+  // The regex is simple and this edge case is documented.
+  teardown()
+  console.log('  SKIP: comment detection (acceptable limitation)')
+}
+
+function testDetectPPR_withSpacingVariations() {
+  setup()
+  writeFileSync(join(TEST_DIR, 'next.config.mjs'), `
+const nextConfig = {
+  cacheComponents :  true ,
+}
+export default nextConfig
+`)
+  const result = detectPPREnabled(TEST_DIR)
+  console.assert(result === true, 'detectPPREnabled should handle spacing variations')
+  teardown()
+  console.log('  PASS: spacing variations handled')
+}
+
+// --- Run all tests ---
+console.log('\n=== Translation Registry PPR Tests ===\n')
+console.log('detectPPREnabled:')
+testDetectPPR_withCacheComponentsTrue()
+testDetectPPR_withCacheComponentsFalse()
+testDetectPPR_withoutConfig()
+testDetectPPR_withNextConfigTs()
+testDetectPPR_withCacheComponentsInComment()
+testDetectPPR_withSpacingVariations()
+console.log('\nAll tests passed!\n')

package/scripts/build/registry/generators/translation-registry.mjs

@@ -10,7 +10,7 @@
  */
 
 import { existsSync, readdirSync, readFileSync, statSync } from 'fs'
-import { join } from 'path'
+import { join, dirname } from 'path'
 
 /**
  * Extract supportedLocales from a theme's app.config.ts file
@@ -20,6 +20,72 @@ import { join } from 'path'
  * @param {string} activeTheme - Name of the active theme
  * @returns {string[]} Array of supported locale codes, or empty array if not found
  */
+/**
+ * Extract defaultLocale from a theme's app.config.ts file
+ * @param {string} themesDir
+ * @param {string} activeTheme
+ * @returns {string} Default locale code, or 'en' if not found
+ */
+function getDefaultLocale(themesDir, activeTheme) {
+  if (!activeTheme) return 'en'
+  const appConfigPath = join(themesDir, activeTheme, 'config', 'app.config.ts')
+  if (!existsSync(appConfigPath)) return 'en'
+  try {
+    const content = readFileSync(appConfigPath, 'utf8')
+    const match = content.match(/defaultLocale\s*:\s*['"]([a-zA-Z-]+)['"]/)
+    return match ? match[1] : 'en'
+  } catch {
+    return 'en'
+  }
+}
+
+/**
+ * Extract defaultMode from a theme's theme.config.ts file
+ * @param {string} themesDir
+ * @param {string} activeTheme
+ * @returns {'light' | 'dark' | 'system'} Default theme mode
+ */
+function getDefaultThemeMode(themesDir, activeTheme) {
+  if (!activeTheme) return 'system'
+  const themeConfigPath = join(themesDir, activeTheme, 'config', 'theme.config.ts')
+  if (!existsSync(themeConfigPath)) return 'system'
+  try {
+    const content = readFileSync(themeConfigPath, 'utf8')
+    const match = content.match(/defaultMode\s*:\s*['"]([a-z]+)['"]/)
+    return match ? match[1] : 'system'
+  } catch {
+    return 'system'
+  }
+}
+
+/**
+ * Detect if the project has PPR (Partial Prerendering) enabled
+ * by checking for cacheComponents: true in next.config.{mjs,js,ts}
+ *
+ * When PPR is enabled, the generator produces static exports
+ * (DEFAULT_LOCALE, DEFAULT_THEME_MODE, STATIC_MESSAGES) that
+ * allow the root layout to render a fully static shell.
+ *
+ * @param {string} projectRoot - Path to the project root
+ * @returns {boolean} true if cacheComponents: true is found
+ */
+export function detectPPREnabled(projectRoot) {
+  const configPaths = ['next.config.mjs', 'next.config.js', 'next.config.ts']
+  for (const name of configPaths) {
+    const p = join(projectRoot, name)
+    if (!existsSync(p)) continue
+    try {
+      const content = readFileSync(p, 'utf8')
+      if (content.match(/cacheComponents\s*:\s*true/)) {
+        return true
+      }
+    } catch {
+      // ignore read errors
+    }
+  }
+  return false
+}
+
 function getSupportedLocales(themesDir, activeTheme) {
   if (!activeTheme) {
     return []
@@ -155,8 +221,10 @@ function detectLocales(messagesDir) {
  * @returns {string} Generated TypeScript content
  */
 export function generateTranslationRegistry(themes, config) {
-  // Get supported locales from active theme's app.config.ts
+  // Get supported locales and default locale from active theme's app.config.ts
   const supportedLocales = getSupportedLocales(config.themesDir, config.activeTheme)
+  const defaultLocale = getDefaultLocale(config.themesDir, config.activeTheme)
+  const defaultThemeMode = getDefaultThemeMode(config.themesDir, config.activeTheme)
 
   // Discover all translation files from themes
   const themeTranslations = []
@@ -402,5 +470,48 @@ export const TRANSLATION_METADATA = {
   totalPluginEntitiesWithTranslations: ${uniquePluginEntities.size},
   pluginEntities: [${Array.from(uniquePluginEntities).map(e => `'${e}'`).join(', ')}]
 }
+
+${(() => {
+  // PPR: Generate static imports for the default locale — only when cacheComponents is enabled.
+  // These are used by the root layout's StaticIntlProvider (layout.ppr.tsx) to render
+  // content in the PPR static shell without accessing cookies/headers.
+  //
+  // Projects on Next.js 15 (without cacheComponents) skip this entirely.
+  // To enable: add cacheComponents: true to next.config and use layout.ppr.tsx.
+  const projectRoot = config.projectRoot || (config.themesDir ? dirname(dirname(config.themesDir)) : process.cwd())
+  const pprEnabled = detectPPREnabled(projectRoot)
+
+  if (!pprEnabled) {
+    return `// PPR static exports disabled — cacheComponents: true not found in next.config.
+// To enable PPR, add cacheComponents: true to your next.config and copy
+// layout.ppr.tsx from @nextsparkjs/core/templates/app/ to your app/ directory.
+// See docs/migration-ppr.md for the full migration guide.`
+  }
+
+  const defaultThemeTranslation = themeTranslations.find(
+    t => t.themeName === config.activeTheme && t.locale === defaultLocale
+  )
+  if (!defaultThemeTranslation) return '// PPR: No static messages generated (no theme translation found for default locale)'
+
+  console.log(`[TranslationRegistry] PPR enabled — generating static exports for locale '${defaultLocale}'`)
+
+  return `/**
+ * PPR: Static messages for the default locale (pre-merged at build time)
+ *
+ * Used by the root layout's StaticIntlProvider to render content
+ * in the PPR static shell without accessing cookies/headers.
+ * Core messages are deep-merged with theme messages.
+ */
+import { deepMergeMessages as _deepMerge } from '@nextsparkjs/core/lib/translations/registry'
+import _coreMessages from '@nextsparkjs/core/messages/${defaultLocale}/index.js'
+import _themeMessages from '${defaultThemeTranslation.filePath}'
+
+export const DEFAULT_LOCALE = '${defaultLocale}' as const
+export const DEFAULT_THEME_MODE = '${defaultThemeMode}' as const
+export const STATIC_MESSAGES: Record<string, unknown> = _deepMerge(
+  _coreMessages as unknown as Record<string, unknown>,
+  (_themeMessages as { default?: Record<string, unknown> }).default ?? _themeMessages as unknown as Record<string, unknown>
+)`
+})()}
 `
 }

package/templates/app/(auth)/auth-error/page.tsx

@@ -21,6 +21,5 @@ function AuthErrorPageWrapper() {
   )
 }
 
-export const dynamic = 'force-dynamic'
 
 export default getTemplateOrDefault('app/(auth)/auth-error/page.tsx', AuthErrorPageWrapper)

package/templates/app/(auth)/forgot-password/page.tsx

@@ -211,6 +211,5 @@ function ForgotPasswordPage() {
 }
 
 // Opt out of static generation due to client-side state
-export const dynamic = 'force-dynamic';
 
 export default getTemplateOrDefaultClient('app/(auth)/forgot-password/page.tsx', ForgotPasswordPage)

package/templates/app/(auth)/layout.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import type { Metadata } from 'next'
 import { AuthWrapper } from '@nextsparkjs/core/components/auth/layouts/AuthWrapper'
 import { getTemplateOrDefault, getMetadataOrDefault } from '@nextsparkjs/core/lib/template-resolver'
@@ -34,7 +35,9 @@ function AuthLayout({ children }: { children: React.ReactNode }) {
           </div>
 
           <AuthWrapper>
-            {children}
+            <Suspense fallback={null}>
+              {children}
+            </Suspense>
           </AuthWrapper>
         </div>
 

package/templates/app/(auth)/login/page.tsx

@@ -16,6 +16,5 @@ function LoginPage() {
   return <LoginForm />
 }
 
-export const dynamic = 'force-dynamic'
 
 export default getTemplateOrDefault('app/(auth)/login/page.tsx', LoginPage)

package/templates/app/(auth)/reset-password/page.tsx

@@ -207,6 +207,5 @@ function ResetPasswordPage() {
 }
 
 // Opt out of static generation due to client-side state
-export const dynamic = 'force-dynamic';
 
 export default getTemplateOrDefaultClient('app/(auth)/reset-password/page.tsx', ResetPasswordPage)

package/templates/app/(auth)/signup/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import type { Metadata } from 'next'
 import { redirect } from 'next/navigation'
 import { SignupForm } from '@nextsparkjs/core/components/auth/forms/SignupForm'
@@ -15,7 +16,7 @@ export const metadata: Metadata = getMetadataOrDefault(
   defaultMetadata
 )
 
-async function SignupPage() {
+async function SignupPageContent() {
   const registrationMode = AUTH_CONFIG?.registration?.mode ?? 'open'
 
   // In invitation-only mode, allow the first user to register
@@ -38,6 +39,13 @@ async function SignupPage() {
   return <SignupForm />
 }
 
-export const dynamic = 'force-dynamic'
+function SignupPage() {
+  return (
+    <Suspense fallback={null}>
+      <SignupPageContent />
+    </Suspense>
+  )
+}
+
 
 export default getTemplateOrDefault('app/(auth)/signup/page.tsx', SignupPage)

package/templates/app/(auth)/verify-email/page.tsx

@@ -185,6 +185,5 @@ function VerifyEmailPage() {
   );
 }
 
-export const dynamic = 'force-dynamic';
 
 export default getTemplateOrDefaultClient('app/(auth)/verify-email/page.tsx', VerifyEmailPage)

package/templates/app/(public)/[...slug]/page.tsx

@@ -13,6 +13,7 @@
  * 2. Falls back to default PageRenderer if no template
  */
 
+import { Suspense } from 'react'
 import { notFound } from 'next/navigation'
 import { query } from '@nextsparkjs/core/lib/db'
 import { PageRenderer } from '@nextsparkjs/core/components/public/pageBuilder'
@@ -51,6 +52,7 @@ function getEntityConfigs(): Record<string, EntityConfig> {
 }
 
 // Enable ISR with 1 hour revalidation
+// On Next.js 16 with cacheComponents, this is superseded by 'use cache' + cacheLife()
 export const revalidate = 3600
 
 interface PageProps {
@@ -247,9 +249,9 @@ export async function generateMetadata({
 }
 
 /**
- * Main catch-all page component
+ * Main catch-all page content (async, wrapped in Suspense by parent)
  */
-export default async function DynamicPublicPage({
+async function DynamicPublicPageContent({
   params,
   searchParams,
 }: PageProps) {
@@ -376,3 +378,14 @@ export default async function DynamicPublicPage({
   // No match found
   notFound()
 }
+
+/**
+ * Main catch-all page component — wraps async content in Suspense for PPR compatibility
+ */
+export default function DynamicPublicPage(props: PageProps) {
+  return (
+    <Suspense fallback={null}>
+      <DynamicPublicPageContent {...props} />
+    </Suspense>
+  )
+}

package/templates/app/(public)/layout.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react"
 import type { Metadata } from "next"
 import { PublicNavbar } from '@nextsparkjs/core/components/app/layouts/PublicNavbar'
 import { PublicFooter } from '@nextsparkjs/core/components/app/layouts/PublicFooter'
@@ -29,7 +30,9 @@ function PublicLayout({
 
       {/* Main Content */}
       <main className="flex-1">
-        {children}
+        <Suspense fallback={null}>
+          {children}
+        </Suspense>
       </main>
 
       {/* Public Footer */}

package/templates/app/api/csp-report/route.ts

@@ -5,15 +5,18 @@ import { NextRequest, NextResponse } from 'next/server';
 let checkDistributedRateLimit: ((id: string, tier: string) => Promise<{ allowed: boolean; limit: number; remaining: number; resetTime: number; retryAfter?: number }>) | null = null;
 let createRateLimitErrorResponse: ((result: { allowed: boolean; limit: number; remaining: number; resetTime: number; retryAfter?: number }) => NextResponse) | null = null;
 
-// Try to load rate limiting functions
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const rateLimitModule = require('@nextsparkjs/core/lib/api');
-  checkDistributedRateLimit = rateLimitModule.checkDistributedRateLimit;
-  createRateLimitErrorResponse = rateLimitModule.createRateLimitErrorResponse;
-} catch {
-  // Rate limiting not available - will skip rate limit checks
-  console.warn('[CSP Report] Rate limiting not available - running without rate limits');
+// Lazy-load rate limiting functions on first request
+let rateLimitLoaded = false;
+async function ensureRateLimitLoaded() {
+  if (rateLimitLoaded) return;
+  rateLimitLoaded = true;
+  try {
+    const rateLimitModule = await import('@nextsparkjs/core/lib/api');
+    checkDistributedRateLimit = rateLimitModule.checkDistributedRateLimit;
+    createRateLimitErrorResponse = rateLimitModule.createRateLimitErrorResponse;
+  } catch {
+    console.warn('[CSP Report] Rate limiting not available - running without rate limits');
+  }
 }
 
 /**
@@ -73,6 +76,7 @@ function getClientIp(request: NextRequest): string {
 }
 
 export async function POST(request: NextRequest) {
+  await ensureRateLimitLoaded();
   const requestId = randomUUID().slice(0, 8);
   let rateLimitHeaders: Record<string, string> = {};
 

package/templates/app/dashboard/(main)/[entity]/[id]/page.tsx

@@ -77,27 +77,9 @@ async function EntityDetailPage({ params }: PageProps) {
   )
 }
 
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
-  const resolvedParams = await params
-  const entitySlug = resolvedParams.entity
-
-  if (!(entitySlug in getEntityRegistry())) {
-    return {
-      title: 'Not Found - Dashboard'
-    }
-  }
-
-  const entityConfig = getEntity(entitySlug as string)
-  if (!entityConfig || !isEntityConfig(entityConfig)) {
-    return {
-      title: 'Not Found - Dashboard'
-    }
-  }
-
-  return {
-    title: `${entityConfig.names.plural} #${resolvedParams.id} - Dashboard`,
-    description: `View details for ${entityConfig.names.singular}`
-  }
+export const metadata: Metadata = {
+  title: 'Dashboard',
+  description: 'View entity details'
 }
 
 export default EntityDetailPage

package/templates/app/dashboard/(main)/[entity]/page.tsx

@@ -63,28 +63,9 @@ async function EntityListPage({ params }: PageProps) {
   )
 }
 
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
-  const resolvedParams = await params
-  const entitySlug = resolvedParams.entity
-
-  const registry = getEntityRegistry()
-  if (!(entitySlug in registry)) {
-    return {
-      title: 'Not Found - Dashboard'
-    }
-  }
-
-  const entityConfig = getEntity(entitySlug)
-  if (!entityConfig || !isEntityConfig(entityConfig)) {
-    return {
-      title: 'Not Found - Dashboard'
-    }
-  }
-
-  return {
-    title: `${entityConfig.names.plural} - Dashboard`,
-    description: `Manage ${entityConfig.names.plural.toLowerCase()} in your dashboard`
-  }
+export const metadata: Metadata = {
+  title: 'Dashboard',
+  description: 'Manage entities in your dashboard'
 }
 
 export default getTemplateOrDefault('app/dashboard/(main)/[entity]/page.tsx', EntityListPage)

package/templates/app/dashboard/settings/password/page.tsx

@@ -301,6 +301,5 @@ function UpdatePasswordPage() {
 }
 
 // Opt out of static generation due to client-side state
-export const dynamic = 'force-dynamic';
 
 export default getTemplateOrDefaultClient('app/dashboard/settings/password/page.tsx', UpdatePasswordPage)

package/templates/app/devtools/blocks/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { BlocksViewer } from "@nextsparkjs/core/components/devtools/BlocksViewer";
 import { LayoutGrid } from "lucide-react";
 import { getTranslations } from "next-intl/server";
@@ -8,7 +9,7 @@ import { getTranslations } from "next-intl/server";
  * Displays all page builder blocks with field definitions and coverage info.
  * Provides filtering and search capabilities.
  */
-export default async function DevBlocksPage() {
+async function DevBlocksPageContent() {
   const t = await getTranslations("devtools.blocks");
 
   return (
@@ -29,3 +30,11 @@ export default async function DevBlocksPage() {
     </div>
   );
 }
+
+export default function DevBlocksPage() {
+  return (
+    <Suspense fallback={null}>
+      <DevBlocksPageContent />
+    </Suspense>
+  );
+}

package/templates/app/devtools/config/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { ConfigViewer } from "@nextsparkjs/core/components/devtools";
 import { Settings } from "lucide-react";
 import { getTranslations } from "next-intl/server";
@@ -8,7 +9,7 @@ import { getTranslations } from "next-intl/server";
  * Displays theme configuration and entity registry information.
  * Provides read-only view with JSON formatting and copy functionality.
  */
-export default async function DevConfigPage() {
+async function DevConfigPageContent() {
   const t = await getTranslations('dev.config');
 
   return (
@@ -29,3 +30,11 @@ export default async function DevConfigPage() {
     </div>
   );
 }
+
+export default function DevConfigPage() {
+  return (
+    <Suspense fallback={null}>
+      <DevConfigPageContent />
+    </Suspense>
+  );
+}

package/templates/app/devtools/features/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { FeaturesViewer } from "@nextsparkjs/core/components/devtools/FeaturesViewer";
 import { Layers } from "lucide-react";
 import { getTranslations } from "next-intl/server";
@@ -8,7 +9,7 @@ import { getTranslations } from "next-intl/server";
  * Displays all features from the testing registry with coverage information.
  * Provides filtering and search capabilities.
  */
-export default async function DevFeaturesPage() {
+async function DevFeaturesPageContent() {
   const t = await getTranslations("devtools.features");
 
   return (
@@ -29,3 +30,11 @@ export default async function DevFeaturesPage() {
     </div>
   );
 }
+
+export default function DevFeaturesPage() {
+  return (
+    <Suspense fallback={null}>
+      <DevFeaturesPageContent />
+    </Suspense>
+  );
+}

package/templates/app/devtools/flows/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { FlowsViewer } from "@nextsparkjs/core/components/devtools/FlowsViewer";
 import { GitBranch } from "lucide-react";
 import { getTranslations } from "next-intl/server";
@@ -8,7 +9,7 @@ import { getTranslations } from "next-intl/server";
  * Displays all user journey flows from the testing registry with coverage information.
  * Provides filtering and search capabilities.
  */
-export default async function DevFlowsPage() {
+async function DevFlowsPageContent() {
   const t = await getTranslations("devtools.flows");
 
   return (
@@ -29,3 +30,11 @@ export default async function DevFlowsPage() {
     </div>
   );
 }
+
+export default function DevFlowsPage() {
+  return (
+    <Suspense fallback={null}>
+      <DevFlowsPageContent />
+    </Suspense>
+  );
+}

package/templates/app/devtools/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { Code, Palette, FileText, Settings } from "lucide-react";
 import Link from "next/link";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@nextsparkjs/core/components/ui/card";
@@ -9,7 +10,7 @@ import { getTranslations } from "next-intl/server";
  * Dashboard with quick links to development tools and documentation.
  * Shows overview of available sections in the dev area.
  */
-export default async function DevHomePage() {
+async function DevHomePageContent() {
   const t = await getTranslations('dev');
   const tCommon = await getTranslations('common');
 
@@ -119,3 +120,11 @@ export default async function DevHomePage() {
     </div>
   );
 }
+
+export default function DevHomePage() {
+  return (
+    <Suspense fallback={null}>
+      <DevHomePageContent />
+    </Suspense>
+  );
+}