create-nextjs-cms 0.9.30 → 0.9.31

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

@@ -1,3 +1,4 @@
+import dynamic from 'next/dynamic'
 import type { ComponentType } from 'react'
 
 export const pluginNamesMap: Record<string, string> = {
@@ -12,11 +13,14 @@ export const getPluginServerComponent = async (
     pluginName: string,
     componentName: string | undefined,
 ): Promise<ComponentType | null> => {
-    const modulePath = pluginNamesMap[pluginName] ?? pluginNamesMap.blank
+    const modulePath = pluginNamesMap[pluginName]
     if (!modulePath) return null
-
-    const mod = (await import(modulePath)) as Record<string, unknown>
-    const component = (componentName ? mod[componentName] : mod.default) as ComponentType | undefined
-
-    return component ?? null
+    const Component = dynamic(
+        () =>
+            import(modulePath ?? 'nextjs-cms/plugins/blank-component').then(
+                (mod) => (componentName ? mod[componentName] : mod.default) as ComponentType,
+            ),
+        { ssr: true },
+    )
+    return Component
 }

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

@@ -1,10 +1,10 @@
-import AdminsPage from '@/components/pages/admins-page'
-import { api, HydrateClient } from '@/app/_trpc/server'
-export default async function Page() {
-    await api.admins.list.prefetch()
-    return (
-        <HydrateClient>
-            <AdminsPage />
-        </HydrateClient>
-    )
-}
+import AdminsPage from '@/components/pages/admins-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
+export default async function Page() {
+    await api.admins.list.prefetch()
+    return (
+        <HydrateClient>
+            <AdminsPage />
+        </HydrateClient>
+    )
+}

package/templates/default/app/(rootLayout)/browse/[section]/[page]/page.tsx

@@ -1,22 +1,22 @@
-import BrowsePage from '@/components/pages/browse-page'
-import { api, HydrateClient } from '@/app/_trpc/server'
-type Params = Promise<{ section: string; page: string }>
-type SearchParams = Promise<{ q: string | undefined }>
-export default async function Page(props: { params: Params; searchParams: SearchParams }) {
-    const params = await props.params
-    const searchParams = await props.searchParams
-    const { q } = searchParams
-    const { section, page } = params
-
-    await api.hasItemsSections.listItems.prefetch({
-        sectionName: section,
-        page: parseInt(page) ?? 1,
-        q: q ?? '',
-    })
-
-    return (
-        <HydrateClient>
-            <BrowsePage page={params.page} section={params.section} />
-        </HydrateClient>
-    )
-}
+import BrowsePage from '@/components/pages/browse-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
+type Params = Promise<{ section: string; page: string }>
+type SearchParams = Promise<{ q: string | undefined }>
+export default async function Page(props: { params: Params; searchParams: SearchParams }) {
+    const params = await props.params
+    const searchParams = await props.searchParams
+    const { q } = searchParams
+    const { section, page } = params
+
+    await api.hasItemsSections.listItems.prefetch({
+        sectionName: section,
+        page: parseInt(page) ?? 1,
+        q: q ?? '',
+    })
+
+    return (
+        <HydrateClient>
+            <BrowsePage page={params.page} section={params.section} />
+        </HydrateClient>
+    )
+}

package/templates/default/app/(rootLayout)/categorized/[section]/page.tsx

@@ -1,15 +1,15 @@
-import CategorizedSectionPage from '@/components/pages/categorized-section-page'
-import { api, HydrateClient } from '@/app/_trpc/server'
-type Params = Promise<{ section: string }>
-
-export default async function Page(props: { params: Params }) {
-    const params = await props.params
-    await api.categorySections.get.prefetch({
-        sectionName: params.section,
-    })
-    return (
-        <HydrateClient>
-            <CategorizedSectionPage section={params.section} />
-        </HydrateClient>
-    )
-}
+import CategorizedSectionPage from '@/components/pages/categorized-section-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
+type Params = Promise<{ section: string }>
+
+export default async function Page(props: { params: Params }) {
+    const params = await props.params
+    await api.categorySections.get.prefetch({
+        sectionName: params.section,
+    })
+    return (
+        <HydrateClient>
+            <CategorizedSectionPage section={params.section} />
+        </HydrateClient>
+    )
+}

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

@@ -1,70 +1,70 @@
-import { getDashboardOverride, runRoutePrefetches } from 'nextjs-cms/plugins/server'
-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'>
-                <h1 className='text-3xl font-extrabold tracking-tight'>Welcome to Mission Control</h1>
-                <p className='mt-2 text-base text-muted-foreground'>
-                    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'>
-                    <h2 className='text-xl font-semibold'>Today&apos;s focus</h2>
-                    <p className='mt-2 text-sm text-muted-foreground'>
-                        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='text-sm font-semibold'>Ship with confidence</div>
-                        <div className='mt-2 text-sm text-muted-foreground'>
-                            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='text-sm font-semibold'>Stay organized</div>
-                        <div className='mt-2 text-sm text-muted-foreground'>
-                            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='text-sm font-semibold'>Delight users</div>
-                        <div className='mt-2 text-sm text-muted-foreground'>
-                            A clean headline and a single strong image can do the heavy lifting.
-                        </div>
-                    </div>
-                </section>
-            </div>
-        </div>
-    )
-}
-
-export default async function DashboardPage() {
-    // Check for dashboard override configuration
-    const override = await getDashboardOverride()
-    if (!override) {
-        return <DefaultDashboard />
-    }
-
-    // Render the override plugin component (no privilege check for dashboard override)
-    const PluginComponent = await getPluginServerComponent(override.pluginName, override.component)
-    if (!PluginComponent) {
-        return <DefaultDashboard />
-    }
-
-    await runRoutePrefetches(api, override)
-
-    return (
-        <HydrateClient>
-            <PluginComponent />
-        </HydrateClient>
-    )
-}
+import { getDashboardOverride, runRoutePrefetches } from 'nextjs-cms/plugins/server'
+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'>
+                <h1 className='text-3xl font-extrabold tracking-tight'>Welcome to Mission Control</h1>
+                <p className='mt-2 text-base text-muted-foreground'>
+                    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'>
+                    <h2 className='text-xl font-semibold'>Today&apos;s focus</h2>
+                    <p className='mt-2 text-sm text-muted-foreground'>
+                        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='text-sm font-semibold'>Ship with confidence</div>
+                        <div className='mt-2 text-sm text-muted-foreground'>
+                            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='text-sm font-semibold'>Stay organized</div>
+                        <div className='mt-2 text-sm text-muted-foreground'>
+                            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='text-sm font-semibold'>Delight users</div>
+                        <div className='mt-2 text-sm text-muted-foreground'>
+                            A clean headline and a single strong image can do the heavy lifting.
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </div>
+    )
+}
+
+export default async function DashboardPage() {
+    // Check for dashboard override configuration
+    const override = await getDashboardOverride()
+    if (!override) {
+        return <DefaultDashboard />
+    }
+
+    // Render the override plugin component (no privilege check for dashboard override)
+    const PluginComponent = await getPluginServerComponent(override.pluginName, override.component)
+    if (!PluginComponent) {
+        return <DefaultDashboard />
+    }
+
+    await runRoutePrefetches(api, override)
+
+    return (
+        <HydrateClient>
+            <PluginComponent />
+        </HydrateClient>
+    )
+}

package/templates/default/app/(rootLayout)/edit/[section]/[itemId]/page.tsx

@@ -1,20 +1,20 @@
-import ItemEditPage from '@/components/pages/item-edit-page'
-import { api, HydrateClient } from '@/app/_trpc/server'
-type Params = Promise<{ section: string; itemId: string }>
-type SearchParams = Promise<{ locale?: string }>
-
-export default async function Page(props: { params: Params; searchParams: SearchParams }) {
-    const params = await props.params
-    const searchParams = await props.searchParams
-    await api.hasItemsSections.editItem.prefetch({
-        sectionName: params.section,
-        sectionItemId: params.itemId,
-        locale: searchParams.locale,
-    })
-
-    return (
-        <HydrateClient>
-            <ItemEditPage sectionType='has_items' section={params.section} itemId={params.itemId} />
-        </HydrateClient>
-    )
-}
+import ItemEditPage from '@/components/pages/item-edit-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
+type Params = Promise<{ section: string; itemId: string }>
+type SearchParams = Promise<{ locale?: string }>
+
+export default async function Page(props: { params: Params; searchParams: SearchParams }) {
+    const params = await props.params
+    const searchParams = await props.searchParams
+    await api.hasItemsSections.editItem.prefetch({
+        sectionName: params.section,
+        sectionItemId: params.itemId,
+        locale: searchParams.locale,
+    })
+
+    return (
+        <HydrateClient>
+            <ItemEditPage sectionType='has_items' section={params.section} itemId={params.itemId} />
+        </HydrateClient>
+    )
+}

package/templates/default/app/(rootLayout)/layout.tsx

@@ -1,81 +1,81 @@
-import { Inter, Cairo } from 'next/font/google'
-import '../globals.css'
-import type { Metadata } from 'next'
-import { cn } from '@/lib/utils'
-import { ThemeProvider } from '@/components/layout/theme-provider'
-import Providers from '@/app/providers'
-import auth from 'nextjs-cms/auth'
-import { getCMSConfig } from 'nextjs-cms/core'
-import { I18nProviderClient } from 'nextjs-cms/translations/client'
-import { resolveLanguage, RTL_LANGUAGES } from 'nextjs-cms/translations'
-import { getClientDictionaries } from 'nextjs-cms/translations/server'
-import { api, HydrateClient } from '@/app/_trpc/server'
-import Layout from '@/components/layout/layout'
-import { redirect } from 'next/navigation'
-import { DirectionProvider } from "@/components/ui/direction"
-
-const inter = Inter({
-    subsets: ['latin'],
-    variable: '--font-sans',
-})
-
-const cairo = Cairo({
-    subsets: ['arabic', 'latin'],
-    variable: '--font-cairo',
-})
-
-export async function generateMetadata(): Promise<Metadata> {
-    const cmsConfig = await getCMSConfig()
-    return {
-        title: cmsConfig.ui.title,
-        description: 'nextjs-cms',
-    }
-}
-
-export default async function CMSLayout({ children }: { children: React.ReactNode }) {
-    const [session, cmsConfig, _] = await Promise.all([
-        auth(),
-        getCMSConfig(),
-        api.navigation.getSidebar.prefetch(),
-    ])
-    
-    if (!session) {
-        redirect('/auth/login')
-    }
-
-    const { supportedLanguages, fallbackLanguage } = cmsConfig.i18n
-    const language = resolveLanguage(session.user.language, supportedLanguages, fallbackLanguage)
-    const isRTL = RTL_LANGUAGES.has(language)
-    const dictionaries = getClientDictionaries(supportedLanguages)
-
-    return (
-        <html lang={language} dir={isRTL ? 'rtl' : 'ltr'} suppressHydrationWarning>
-            <body
-                className={cn(
-                    'bg-background min-h-screen font-sans antialiased',
-                    isRTL ? cairo.variable : inter.variable,
-                )}
-            >
-                <DirectionProvider dir={isRTL ? 'rtl' : 'ltr'} direction={isRTL ? 'rtl' : 'ltr'}>
-                <I18nProviderClient locale={language} dictionaries={dictionaries}>
-                    <ThemeProvider
-                        attribute='class'
-                        defaultTheme={cmsConfig.ui.defaultTheme}
-                        enableSystem
-                        disableTransitionOnChange
-                    >
-                        <Providers session={session ?? undefined}>
-                        <HydrateClient>
-                            <Layout logoUrlPath={cmsConfig.ui.logo} logoText={cmsConfig.ui.logoText} isRTL={isRTL}>
-                                {children}
-                            </Layout>
-                        </HydrateClient>
-                        </Providers>
-                        </ThemeProvider>
-                    </I18nProviderClient>
-                </DirectionProvider>
-            </body>
-        </html>
-        
-    )
-}
+import { Inter, Cairo } from 'next/font/google'
+import '../globals.css'
+import type { Metadata } from 'next'
+import { cn } from '@/lib/utils'
+import { ThemeProvider } from '@/components/layout/theme-provider'
+import Providers from '@/app/providers'
+import auth from 'nextjs-cms/auth'
+import { getCMSConfig } from 'nextjs-cms/core'
+import { I18nProviderClient } from 'nextjs-cms/translations/client'
+import { resolveLanguage, RTL_LANGUAGES } from 'nextjs-cms/translations'
+import { getClientDictionaries } from 'nextjs-cms/translations/server'
+import { api, HydrateClient } from '@/app/_trpc/server'
+import Layout from '@/components/layout/layout'
+import { redirect } from 'next/navigation'
+import { DirectionProvider } from "@/components/ui/direction"
+
+const inter = Inter({
+    subsets: ['latin'],
+    variable: '--font-sans',
+})
+
+const cairo = Cairo({
+    subsets: ['arabic', 'latin'],
+    variable: '--font-cairo',
+})
+
+export async function generateMetadata(): Promise<Metadata> {
+    const cmsConfig = await getCMSConfig()
+    return {
+        title: cmsConfig.ui.title,
+        description: 'nextjs-cms',
+    }
+}
+
+export default async function CMSLayout({ children }: { children: React.ReactNode }) {
+    const [session, cmsConfig, _] = await Promise.all([
+        auth(),
+        getCMSConfig(),
+        api.navigation.getSidebar.prefetch(),
+    ])
+    
+    if (!session) {
+        redirect('/auth/login')
+    }
+
+    const { supportedLanguages, fallbackLanguage } = cmsConfig.i18n
+    const language = resolveLanguage(session.user.language, supportedLanguages, fallbackLanguage)
+    const isRTL = RTL_LANGUAGES.has(language)
+    const dictionaries = getClientDictionaries(supportedLanguages)
+
+    return (
+        <html lang={language} dir={isRTL ? 'rtl' : 'ltr'} suppressHydrationWarning>
+            <body
+                className={cn(
+                    'bg-background min-h-screen font-sans antialiased',
+                    isRTL ? cairo.variable : inter.variable,
+                )}
+            >
+                <DirectionProvider dir={isRTL ? 'rtl' : 'ltr'} direction={isRTL ? 'rtl' : 'ltr'}>
+                <I18nProviderClient locale={language} dictionaries={dictionaries}>
+                    <ThemeProvider
+                        attribute='class'
+                        defaultTheme={cmsConfig.ui.defaultTheme}
+                        enableSystem
+                        disableTransitionOnChange
+                    >
+                        <Providers session={session ?? undefined}>
+                        <HydrateClient>
+                            <Layout logoUrlPath={cmsConfig.ui.logo} logoText={cmsConfig.ui.logoText} isRTL={isRTL}>
+                                {children}
+                            </Layout>
+                        </HydrateClient>
+                        </Providers>
+                        </ThemeProvider>
+                    </I18nProviderClient>
+                </DirectionProvider>
+            </body>
+        </html>
+        
+    )
+}

package/templates/default/app/(rootLayout)/loading.tsx

@@ -1,10 +1,10 @@
-import LoadingSpinners from '@/components/feedback/loading-spinners'
-
-export default function Loading() {
-    // You can add any UI inside Loading, including a Skeleton.
-    return (
-        <div className='p-20'>
-            <LoadingSpinners />
-        </div>
-    )
-}
+import LoadingSpinners from '@/components/feedback/loading-spinners'
+
+export default function Loading() {
+    // You can add any UI inside Loading, including a Skeleton.
+    return (
+        <div className='p-20'>
+            <LoadingSpinners />
+        </div>
+    )
+}

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

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

package/templates/default/app/(rootLayout)/new/[section]/page.tsx

@@ -1,15 +1,15 @@
-import NewPage from '@/components/pages/new-page'
-import { api, HydrateClient } from '@/app/_trpc/server'
-type Params = Promise<{ section: string }>
-
-export default async function Page(props: { params: Params }) {
-    const params = await props.params
-    await api.hasItemsSections.newItem.prefetch({
-        sectionName: params.section,
-    })
-    return (
-        <HydrateClient>
-            <NewPage sectionType='has_items' section={params.section} />
-        </HydrateClient>
-    )
-}
+import NewPage from '@/components/pages/new-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
+type Params = Promise<{ section: string }>
+
+export default async function Page(props: { params: Params }) {
+    const params = await props.params
+    await api.hasItemsSections.newItem.prefetch({
+        sectionName: params.section,
+    })
+    return (
+        <HydrateClient>
+            <NewPage sectionType='has_items' section={params.section} />
+        </HydrateClient>
+    )
+}

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

@@ -1,19 +1,19 @@
-import SectionPage from '@/components/pages/section-page'
-import { api, HydrateClient } from '@/app/_trpc/server'
-type Params = Promise<{ section: string }>
-type SearchParams = Promise<{ locale?: string }>
-
-export default async function Page(props: { params: Params; searchParams: SearchParams }) {
-    const params = await props.params
-    const searchParams = await props.searchParams
-    await api.simpleSections.create.prefetch({
-        sectionName: params.section,
-        locale: searchParams.locale,
-    })
-
-    return (
-        <HydrateClient>
-            <SectionPage section={params.section} />
-        </HydrateClient>
-    )
-}
+import SectionPage from '@/components/pages/section-page'
+import { api, HydrateClient } from '@/app/_trpc/server'
+type Params = Promise<{ section: string }>
+type SearchParams = Promise<{ locale?: string }>
+
+export default async function Page(props: { params: Params; searchParams: SearchParams }) {
+    const params = await props.params
+    const searchParams = await props.searchParams
+    await api.simpleSections.create.prefetch({
+        sectionName: params.section,
+        locale: searchParams.locale,
+    })
+
+    return (
+        <HydrateClient>
+            <SectionPage section={params.section} />
+        </HydrateClient>
+    )
+}

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

@@ -1,13 +1,13 @@
-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 (
-        <HydrateClient>
-            <SettingsPage />
-        </HydrateClient>
-    )
-}
+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 (
+        <HydrateClient>
+            <SettingsPage />
+        </HydrateClient>
+    )
+}