LilMikey-CN/nextjs-patterns

Server vs Client components

Default to Server Components. Only add "use client" when you need:

• Event handlers (onClick, onChange)
• React hooks (useState, useEffect)
• Browser-only APIs (localStorage, window)
• tRPC client hooks (useQuery, useMutation from @trpc/react-query)

Layout pattern

// src/app/[locale]/layout.tsx — root layout with i18n
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';

export default async function LocaleLayout({
  children,
  params: { locale }
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const messages = await getMessages();
  return (
    <NextIntlClientProvider messages={messages}>
      <div className="min-h-screen bg-background">
        <Navbar />
        <main className="container mx-auto px-4 py-8">
          {children}
        </main>
      </div>
    </NextIntlClientProvider>
  );
}

Route groups

Use route groups (groupName) for layout segmentation without affecting URL:

• (auth) — login, register (no sidebar, centered layout)
• (main) — dashboard, resources, matches (with sidebar navigation)

Loading and error boundaries

Every route group should have:

• loading.tsx — skeleton UI (use shadcn Skeleton)
• error.tsx — error boundary with retry button
• not-found.tsx — 404 page

Data fetching

• Server Components: fetch data directly in the component using Prisma or tRPC server caller
• Client Components: use tRPC React Query hooks
• Never use fetch() to call your own API routes — use tRPC's server-side caller instead

Metadata

Every page should export metadata for SEO:

export async function generateMetadata({ params }: Props) {
  const t = await getTranslations('page-name');
  return { title: t('title'), description: t('description') };
}