create-nextjs-cms 0.9.31 → 0.9.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.9.31",
+  "version": "0.9.33",
   "private": false,
   "type": "module",
   "bin": {

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/error.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { AlertTriangle, Bug, RefreshCw } from 'lucide-react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { Badge } from '@/components/ui/badge'
+
+export default function PluginError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+    const t = useI18n()
+    const errorMessage = error.message || t('unexpectedPluginError')
+
+    useEffect(() => {
+        // Surface plugin failures in the console; error.digest correlates with server logs.
+        console.error('[plugin]', error)
+    }, [error])
+
+    return (
+        <div className='flex min-h-[360px] items-center justify-center p-4 sm:p-6'>
+            <section className='bg-card text-card-foreground w-full max-w-3xl overflow-hidden rounded-lg border shadow-sm'>
+                <div className='from-destructive/10 via-background to-background border-b bg-linear-to-r px-5 py-5 sm:px-6'>
+                    <div className='flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between'>
+                        <div className='flex items-start gap-4'>
+                            <div className='bg-destructive/10 dark:bg-destructive/30 text-destructive ring-destructive/20 flex size-12 shrink-0 items-center justify-center rounded-lg ring-1'>
+                                <AlertTriangle className='size-6' aria-hidden='true' />
+                            </div>
+                            <div>
+                                <Badge variant='destructive' className='mb-2'>
+                                    {t('pluginError')}
+                                </Badge>
+                                <h2 className='text-xl font-semibold tracking-tight'>{t('pluginFailedToLoad')}</h2>
+                                <p className='text-muted-foreground mt-2 max-w-2xl text-sm'>
+                                    {t('pluginFailedToLoadDescription')}
+                                </p>
+                            </div>
+                        </div>
+
+                        <Button type='button' size='sm' onClick={() => reset()} className='self-start'>
+                            <RefreshCw className='size-4' aria-hidden='true' />
+                            {t('retry')}
+                        </Button>
+                    </div>
+                </div>
+
+                <dl className='divide-y text-sm'>
+                    <div className='grid gap-2 px-5 py-4 sm:grid-cols-[10rem_1fr] sm:px-6'>
+                        <dt className='text-foreground flex items-center gap-2 font-medium'>
+                            <Bug className='text-muted-foreground size-4' aria-hidden='true' />
+                            {t('details')}
+                        </dt>
+                        <dd className='text-muted-foreground wrap-break-word'>{errorMessage}</dd>
+                    </div>
+
+                    {error.digest && (
+                        <div className='grid gap-2 px-5 py-4 sm:grid-cols-[10rem_1fr] sm:px-6'>
+                            <dt className='text-foreground font-medium'>{t('errorDigest')}</dt>
+                            <dd className='text-muted-foreground font-mono text-xs break-all'>{error.digest}</dd>
+                        </div>
+                    )}
+                </dl>
+            </section>
+        </div>
+    )
+}

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/page.tsx

@@ -1,47 +1,59 @@
-import { notFound } from 'next/navigation'
-import auth from 'nextjs-cms/auth'
-import { getAdminPrivileges } from 'nextjs-cms/api/server/actions'
-import { findPluginRouteByPath, isDashboardOverridePlugin, runRoutePrefetches } from 'nextjs-cms/plugins/server'
-import { api, HydrateClient } from '@/app/_trpc/server'
-import { getPluginServerComponent } from './plugin-server-registry'
-
-export const dynamic = 'force-dynamic'
-type Params = Promise<{ slug?: string[] }>
-
-export default async function Page(props: { params: Params }) {
-    const params = await props.params
-    const slug = params.slug ?? []
-
-    const path = `/${slug.join('/')}`
-    const session = await auth()
-    if (!session?.user) {
-        notFound()
-    }
-
-    const plugin = await findPluginRouteByPath(path)
-    if (!plugin) {
-        notFound()
-    }
-
-    // Bypass privilege check for dashboard override plugin
-    const isDashboardPlugin = await isDashboardOverridePlugin(plugin.pluginName)
-    if (!isDashboardPlugin) {
-        const privilegeSet = await getAdminPrivileges(session.user.id)
-        if (!privilegeSet.has(plugin.pluginName)) {
-            notFound()
-        }
-    }
-
-    const PluginComponent = await getPluginServerComponent(plugin.pluginName, plugin.component)
-    if (!PluginComponent) {
-        notFound()
-    }
-
-    await runRoutePrefetches(api, plugin)
-
-    return (
-        <HydrateClient>
-            <PluginComponent />
-        </HydrateClient>
-    )
-}
+import { notFound } from 'next/navigation'
+import auth from 'nextjs-cms/auth'
+import { Suspense } from 'react'
+import { getAdminPrivileges } from 'nextjs-cms/api/server/actions'
+import { findPluginRouteByPath, isDashboardOverridePlugin, runRoutePrefetches } from 'nextjs-cms/plugins/server'
+import { api, HydrateClient } from '@/app/_trpc/server'
+import { getPluginServerComponent } from './plugin-server-registry'
+import LoadingSpinners from '@/components/feedback/loading-spinners'
+
+type Params = Promise<{ slug?: string[] }>
+
+export default async function Page(props: { params: Params }) {
+    const params = await props.params
+    const slug = params.slug ?? []
+
+    const path = `/${slug.join('/')}`
+    const session = await auth()
+    if (!session?.user) {
+        notFound()
+    }
+
+    const plugin = await findPluginRouteByPath(path)
+    if (!plugin) {
+        notFound()
+    }
+
+    // Bypass privilege check for dashboard override plugin
+    const isDashboardPlugin = await isDashboardOverridePlugin(plugin.pluginName)
+    if (!isDashboardPlugin) {
+        const privilegeSet = await getAdminPrivileges(session.user.id)
+        if (!privilegeSet.has(plugin.pluginName)) {
+            notFound()
+        }
+    }
+
+    // Fire-and-forget: HydrateClient streams resolved query data as it becomes available,
+    // so awaiting here would block the shell on slow upstream APIs (cPanel, GA, etc.)
+    void runRoutePrefetches(api, plugin)
+
+    const PluginComponent = await getPluginServerComponent(plugin.pluginName, plugin.component)
+    if (!PluginComponent) {
+        notFound()
+    }
+    return (
+        <HydrateClient>
+            {/* This way, or use useSuspenseQuery 
+            in each plugin client component and remove the <Suspense /> here */}
+            <Suspense
+                fallback={
+                    <div className='p-20'>
+                        <LoadingSpinners />
+                    </div>
+                }
+            >
+                <PluginComponent />
+            </Suspense>
+        </HydrateClient>
+    )
+}

package/templates/default/app/(rootLayout)/(plugins)/[...slug]/plugin-server-registry.ts

@@ -1,26 +1,20 @@
-import dynamic from 'next/dynamic'
-import type { ComponentType } from 'react'
-
+import type { ComponentType } from 'react'
+
 export const pluginNamesMap: Record<string, string> = {
     'cpanel-dashboard': '@nextjscms/plugin-cpanel-dashboard/server',
     'cpanel-emails': '@nextjscms/plugin-cpanel-emails/server',
     'google-analytics': '@nextjscms/plugin-google-analytics/server',
     // A workaround to avoid importing error if no plugins are installed
     blank: 'nextjs-cms/plugins/blank-component',
-}
-
-export const getPluginServerComponent = async (
-    pluginName: string,
-    componentName: string | undefined,
-): Promise<ComponentType | null> => {
-    const modulePath = pluginNamesMap[pluginName]
-    if (!modulePath) return null
-    const Component = dynamic(
-        () =>
-            import(modulePath ?? 'nextjs-cms/plugins/blank-component').then(
-                (mod) => (componentName ? mod[componentName] : mod.default) as ComponentType,
-            ),
-        { ssr: true },
-    )
-    return Component
-}
+}
+
+export const getPluginServerComponent = async (
+    pluginName: string,
+    componentName: string | undefined,
+): Promise<ComponentType | null> => {
+    const modulePath = pluginNamesMap[pluginName]
+    if (!modulePath) return null
+    const mod = await import(modulePath)
+    const Component = componentName ? mod[componentName] : mod.default
+    return (Component as ComponentType) ?? null
+}

package/templates/default/app/(rootLayout)/dashboard/page.tsx

@@ -2,42 +2,40 @@ import { getDashboardOverride, runRoutePrefetches } from 'nextjs-cms/plugins/ser
 import { api, HydrateClient } from '@/app/_trpc/server'
 import { getPluginServerComponent } from '../(plugins)/[...slug]/plugin-server-registry'
 
-export const dynamic = 'force-dynamic'
-
 function DefaultDashboard() {
     return (
         <div className='w-full'>
-            <div className='bg-linear-to-r from-amber-200 via-orange-200 to-rose-200 p-8 text-foreground dark:from-amber-900 dark:via-orange-900 dark:to-rose-900'>
+            <div className='text-foreground bg-linear-to-r from-amber-200 via-orange-200 to-rose-200 p-8 dark:from-amber-900 dark:via-orange-900 dark:to-rose-900'>
                 <h1 className='text-3xl font-extrabold tracking-tight'>Welcome to Mission Control</h1>
-                <p className='mt-2 text-base text-muted-foreground'>
+                <p className='text-muted-foreground mt-2 text-base'>
                     Your CMS is ready. Chart a course, publish boldly, and keep the lights green.
                 </p>
             </div>
 
             <div className='space-y-6 p-6'>
-                <section className='rounded-lg border bg-card p-6 text-card-foreground shadow-sm'>
+                <section className='bg-card text-card-foreground rounded-lg border p-6 shadow-sm'>
                     <h2 className='text-xl font-semibold'>Today&apos;s focus</h2>
-                    <p className='mt-2 text-sm text-muted-foreground'>
+                    <p className='text-muted-foreground mt-2 text-sm'>
                         Start with one small win: verify a section, ship a quick update, or polish a headline.
                     </p>
                 </section>
 
                 <section className='grid gap-4 md:grid-cols-3'>
-                    <div className='rounded-lg border bg-card p-4 text-card-foreground shadow-sm'>
+                    <div className='bg-card text-card-foreground rounded-lg border p-4 shadow-sm'>
                         <div className='text-sm font-semibold'>Ship with confidence</div>
-                        <div className='mt-2 text-sm text-muted-foreground'>
+                        <div className='text-muted-foreground mt-2 text-sm'>
                             Keep changes tight and reversible. Small releases, fast feedback.
                         </div>
                     </div>
-                    <div className='rounded-lg border bg-card p-4 text-card-foreground shadow-sm'>
+                    <div className='bg-card text-card-foreground rounded-lg border p-4 shadow-sm'>
                         <div className='text-sm font-semibold'>Stay organized</div>
-                        <div className='mt-2 text-sm text-muted-foreground'>
+                        <div className='text-muted-foreground mt-2 text-sm'>
                             Group your content by intent, not just by type.
                         </div>
                     </div>
-                    <div className='rounded-lg border bg-card p-4 text-card-foreground shadow-sm'>
+                    <div className='bg-card text-card-foreground rounded-lg border p-4 shadow-sm'>
                         <div className='text-sm font-semibold'>Delight users</div>
-                        <div className='mt-2 text-sm text-muted-foreground'>
+                        <div className='text-muted-foreground mt-2 text-sm'>
                             A clean headline and a single strong image can do the heavy lifting.
                         </div>
                     </div>

package/templates/default/app/(rootLayout)/log/page.tsx

@@ -1,7 +1,5 @@
 import LogPage from '@/components/pages/log-page'
 
-export const dynamic = 'force-dynamic'
-
 export default async function Page() {
     return <LogPage />
 }

package/templates/default/app/(rootLayout)/settings/page.tsx

@@ -1,8 +1,6 @@
 import SettingsPage from '@/components/pages/settings-page'
 import { api, HydrateClient } from '@/app/_trpc/server'
 
-export const dynamic = 'force-dynamic'
-
 export default async function Page() {
     await api.accountSettings.get.prefetch()
     return (

package/templates/default/app/api/document/route.ts

@@ -19,6 +19,17 @@ import { getCMSConfig } from 'nextjs-cms/core/config'
 
 export async function GET(request: NextRequest) {
     const session = await auth()
+
+    // Check if the session is valid
+    if (!session || !session.user) {
+        return NextResponse.json(
+            {
+                error: 'Invalid token',
+            },
+            { status: 401 },
+        )
+    }
+
     const searchParams = request.nextUrl.searchParams
 
     const name = searchParams.get('name')
@@ -34,16 +45,6 @@ export async function GET(request: NextRequest) {
         )
     }
 
-    // Check if the session is valid
-    if (!session || !session.user) {
-        return NextResponse.json(
-            {
-                error: 'Invalid token',
-            },
-            { status: 401 },
-        )
-    }
-
     const uploadsFolder: string = (await getCMSConfig()).media.upload.path
 
     // Sanitize the inputs
@@ -152,13 +153,21 @@ export async function GET(request: NextRequest) {
     const fileSize = fileStats.size
     const fileMimeType = fileType.mime
 
-    const data: ReadableStream<Uint8Array> = await streamFile(pathToFile)
+    let data: ReadableStream<Uint8Array>
+    try {
+        data = await streamFile(pathToFile)
+    } catch {
+        return NextResponse.json({ error: 'File not found' }, { status: 404 })
+    }
 
     return new NextResponse(data, {
         headers: {
             'Content-Length': fileSize.toString(),
             'Content-Type': fileMimeType,
             'Content-Disposition': 'inline',
+            'X-Content-Type-Options': 'nosniff',
+            'Content-Security-Policy': "default-src 'none'",
+            'Referrer-Policy': 'no-referrer',
         },
         status: 200,
     })

package/templates/default/app/api/photo/route.ts

@@ -1,7 +1,20 @@
 import { NextRequest, NextResponse } from 'next/server'
 import { getPhoto } from 'nextjs-cms/api/server/actions'
+import auth from 'nextjs-cms/auth'
 
 export async function GET(request: NextRequest) {
+    const session = await auth()
+
+    // Check if the session is valid
+    if (!session || !session.user) {
+        return NextResponse.json(
+            {
+                error: 'Invalid token',
+            },
+            { status: 401 },
+        )
+    }
+
     const searchParams = request.nextUrl.searchParams
 
     const name = searchParams.get('name')
@@ -17,7 +30,7 @@ export async function GET(request: NextRequest) {
         )
     }
 
-    const base64String =  await getPhoto({
+    const base64String = await getPhoto({
         name,
         folder,
         isThumb: isThumb === 'true',

package/templates/default/app/api/video/route.ts

@@ -20,6 +20,17 @@ import { getCMSConfig } from 'nextjs-cms/core/config'
 
 export async function GET(request: NextRequest) {
     const session = await auth()
+
+    // Check if the session is valid
+    if (!session || !session.user) {
+        return NextResponse.json(
+            {
+                error: 'Invalid token',
+            },
+            { status: 401 },
+        )
+    }
+
     const searchParams = request.nextUrl.searchParams
 
     const name = searchParams.get('name')
@@ -35,16 +46,6 @@ export async function GET(request: NextRequest) {
         )
     }
 
-    // Check if the session is valid
-    if (!session || !session.user) {
-        return NextResponse.json(
-            {
-                error: 'Invalid token',
-            },
-            { status: 401 },
-        )
-    }
-
     const uploadsFolder: string = (await getCMSConfig()).media.upload.path
 
     // Sanitize the inputs
@@ -142,32 +143,42 @@ export async function GET(request: NextRequest) {
     const videoMimeType = fileType.mime
 
     let res = null
-    if (range) {
-        const parts = range.replace(/bytes=/, '').split('-')
-        const start = parseInt(parts[0] ?? '0', 10)
-        const end = parts[1] ? parseInt(parts[1], 10) : videoSize - 1
-        const chunkSize = end - start + 1
-
-        const data: ReadableStream<Uint8Array> = await streamFile(pathToFile, { start, end })
-
-        res = new NextResponse(data, {
-            headers: {
-                'Content-Range': `bytes ${start}-${end}/${videoSize}`,
-                'Accept-Ranges': 'bytes',
-                'Content-Length': chunkSize.toString(),
-                'Content-Type': videoMimeType,
-            },
-            status: 206,
-        })
-    } else {
-        const data: ReadableStream<Uint8Array> = await streamFile(pathToFile)
-        res = new NextResponse(data, {
-            headers: {
-                'Content-Length': videoSize.toString(),
-                'Content-Type': videoMimeType,
-            },
-            status: 200,
-        })
+    try {
+        if (range) {
+            const parts = range.replace(/bytes=/, '').split('-')
+            const start = parseInt(parts[0] ?? '0', 10)
+            const end = parts[1] ? parseInt(parts[1], 10) : videoSize - 1
+            const chunkSize = end - start + 1
+
+            const data: ReadableStream<Uint8Array> = await streamFile(pathToFile, { start, end })
+
+            res = new NextResponse(data, {
+                headers: {
+                    'Content-Range': `bytes ${start}-${end}/${videoSize}`,
+                    'Accept-Ranges': 'bytes',
+                    'Content-Length': chunkSize.toString(),
+                    'Content-Type': videoMimeType,
+                    'X-Content-Type-Options': 'nosniff',
+                    'Content-Security-Policy': "sandbox; default-src 'none'",
+                    'Referrer-Policy': 'no-referrer',
+                },
+                status: 206,
+            })
+        } else {
+            const data: ReadableStream<Uint8Array> = await streamFile(pathToFile)
+            res = new NextResponse(data, {
+                headers: {
+                    'Content-Length': videoSize.toString(),
+                    'Content-Type': videoMimeType,
+                    'X-Content-Type-Options': 'nosniff',
+                    'Content-Security-Policy': "sandbox; default-src 'none'",
+                    'Referrer-Policy': 'no-referrer',
+                },
+                status: 200,
+            })
+        }
+    } catch {
+        return NextResponse.json({ error: 'File not found' }, { status: 404 })
     }
 
     return res

package/templates/default/components/media/protected-document.tsx

@@ -26,10 +26,8 @@ const ProtectedDocument = ({
 
     return (
         <div className={className}>
-            {loading && (
-                <div className='animate-pulse bg-gray-500' style={{ width, height }} />
-            )}
-            <embed
+            {loading && <div className='animate-pulse bg-gray-500' style={{ width, height }} />}
+            <iframe
                 src={url}
                 className='max-w-full'
                 width={width}

package/templates/default/package.json

@@ -70,7 +70,7 @@
     "nanoid": "^5.1.2",
     "next": "16.2.5",
     "next-themes": "^0.4.6",
-    "nextjs-cms": "0.9.31",
+    "nextjs-cms": "0.9.33",
     "plaiceholder": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "qrcode": "^1.5.4",