Database Access and Internationalization

• Server Components are async functions
• await the DB call in the body: no API route, no useEffect
• DB code runs only on the server
• Credentials and queries never reach the client bundle

• Query in the component that needs the data
• Result is serialised into the RSC payload
• Client Components get only plain serialisable values

• Independent queries: start together with Promise.all
• Sequential awaits create a waterfall

const users = await prisma.user.findMany()

typed from the models in schema.prisma

export const users = pgTable('users', {
  id: serial('id').primaryKey(),
  name: text('name'),
})
const rows = await db.select().from(users)
  .where(eq(users.id, id))

schema is plain TS; the query reads like SQL

• Hot reload re-runs module code
• Each reload makes a new PrismaClient and a new connection pool
• Symptom: too many connections error during next dev

const globalForPrisma = globalThis as unknown as {
 prisma?: PrismaClient }
export const prisma =
  globalForPrisma.prisma ?? new PrismaClient()
if (process.env.NODE_ENV !== 'production')
  globalForPrisma.prisma = prisma

globalThis survives hot reloads

• Reuse the cached client if it exists
• Cache only when NODE_ENV is not production

• import 'server-only' fails the build if a Client Component imports it
• Keep queries in a data access layer: lib/data.ts
• Components import only that file

// lib/data.ts
import 'server-only'
export async function getUser(id) {
  const u = await db.user.findUnique({ where: { id } })
  return { id: u.id, name: u.name }
}

returns a DTO, not the whole row

• A DTO holds only the needed fields
• Leaving out passwordHash keeps it off the client

• Pages live in app/[lang]/: the locale is a dynamic segment
• Read it from the params prop: /en/about gives lang = 'en'
• Recent Next.js: params is a Promise, so await it
• generateStaticParams returns the locales, so each language pre-renders

• Path has no locale: redirect to the negotiated one (default /en/...)
• Matcher must exclude _next, static files and api: '/((?!_next|api|.*\..*).*)'

• One JSON file per locale, loaded with dynamic import
• Loader wrapped in server-only; call it in Server Components, pass strings down as props

const rows = await db.select().from(t)

Server Component body: no API layer needed

• import 'server-only' in DB modules
• No NEXT_PUBLIC_ on secrets