Database Integration with Next.js

Q: How do you connect a database to a Next.js application?

You typically install a database client or an ORM library like Prisma, set up a connection string in your environment variables, and then call database queries directly inside server components, route handlers, or server actions, since these all run on the server where database credentials are safe.

Q: Why should database queries always happen on the server rather than in the browser?

Database credentials and connection strings must remain secret, and browsers cannot be trusted to keep secrets safe since anyone can view the JavaScript running on their machine. Running queries only on the server, inside server components, route handlers, or server actions, keeps these credentials completely hidden from users.

Q: How do you manage a database connection efficiently across many requests in a serverless Next.js deployment?

In serverless environments, creating a new database connection on every single request can quickly exhaust the database's connection limit, so you typically use a connection pooler or reuse a single client instance across requests by attaching it to a global variable during development.

Q: How would you handle a database write inside a server action while keeping the user interface responsive?

You perform the database update inside the server action itself, and after it completes, call revalidatePath or revalidateTag to refresh any cached pages that display that data, while also considering optimistic updates on the client so the interface feels instant even while the write is happening.

Q: What are common performance issues when integrating a database with Next.js, and how do you fix them?

Common issues include running the same query multiple times unnecessarily due to missing request deduplication, fetching more data than a page actually needs, and not adding proper database indexes for frequently queried fields, all of which can be fixed by combining efficient queries with Next.js caching features.

5 questions found

How do you connect a database to a Next.js application?

Beginner

You typically install a database client or an ORM library like Prisma, set up a connection string in your environment variables, and then call database queries directly inside server components, route handlers, or server actions, since these all run on the server where database credentials are safe.

// lib/db.js
import { PrismaClient } from '@prisma/client';

export const db = new PrismaClient();

// app/page.js
import { db } from '@/lib/db';

export default async function Page() {
  const posts = await db.post.findMany();
  return <div>{posts.length} posts found</div>;
}

Real-world example A recipe sharing app connects to a PostgreSQL database using Prisma, letting server components query recipes directly without needing a separate API layer in between.

Common follow-ups: Why is it unsafe to connect directly to a database from a client component?;What is an ORM and why do many teams prefer using one?

Server Components;Environment Variables & Configuration Management

Why should database queries always happen on the server rather than in the browser?

Intermediate

Database credentials and connection strings must remain secret, and browsers cannot be trusted to keep secrets safe since anyone can view the JavaScript running on their machine. Running queries only on the server, inside server components, route handlers, or server actions, keeps these credentials completely hidden from users.

// Safe: runs only on the server
export default async function Page() {
  const users = await db.user.findMany();
  return <UserList users={users} />;
}

Real-world example A company discovers that exposing a database connection string in client side code would let anyone inspect their browser and steal database access, reinforcing why all queries must stay server side.

Common follow-ups: What happens if a database credential accidentally gets exposed in client code?;How do environment variables help keep credentials secure?

Environment Variables & Configuration Management;Security Best Practices in Next.js

How do you manage a database connection efficiently across many requests in a serverless Next.js deployment?

Intermediate

In serverless environments, creating a new database connection on every single request can quickly exhaust the database's connection limit, so you typically use a connection pooler or reuse a single client instance across requests by attaching it to a global variable during development.

// lib/db.js
let db;
if (process.env.NODE_ENV === 'production') {
  db = new PrismaClient();
} else {
  if (!global.db) global.db = new PrismaClient();
  db = global.db;
}

export { db };

Real-world example A high traffic application uses a connection pooling service alongside Prisma to prevent running out of available database connections during traffic spikes.

Common follow-ups: What is connection pooling and why is it especially important in serverless environments?;How does this pattern differ between development and production?

Deployment;Edge Runtime vs Node.js Runtime

How would you handle a database write inside a server action while keeping the user interface responsive?

Advanced

You perform the database update inside the server action itself, and after it completes, call revalidatePath or revalidateTag to refresh any cached pages that display that data, while also considering optimistic updates on the client so the interface feels instant even while the write is happening.

'use server';
import { db } from '@/lib/db';
import { revalidatePath } from 'next/cache';

export async function addComment(postId, text) {
  await db.comment.create({ data: { postId, text } });
  revalidatePath(`/posts/${postId}`);
}

Real-world example A comment form on a blog calls a server action to save a new comment to the database, then automatically refreshes the post page so the new comment appears without a manual page reload.

Common follow-ups: What is an optimistic update and how does it improve perceived performance?;How do you handle errors that occur during a database write inside a server action?

Server Actions & Mutations;On-Demand Revalidation Strategies

What are common performance issues when integrating a database with Next.js, and how do you fix them?

Advanced

Common issues include running the same query multiple times unnecessarily due to missing request deduplication, fetching more data than a page actually needs, and not adding proper database indexes for frequently queried fields, all of which can be fixed by combining efficient queries with Next.js caching features.

// Only select the fields actually needed
const posts = await db.post.findMany({
  select: { id: true, title: true },
  take: 10
});

Real-world example A team notices their blog listing page is slow because it fetches every field of every post, then fixes it by selecting only the title and id fields actually shown on the listing page.

Common follow-ups: How do database indexes improve query performance?;What tools can help identify slow database queries in a Next.js app?

Bundle Analysis & Code Splitting;Caching