What is next.config.js in Next.js and what are common configurations?

Q: What is next.config.js in Next.js and what are common configurations?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block says which version it ran on. ## 1. Why This Even Matters — A Story First next.config is the settings panel of a car before a trip: which wheels to use (output), which roads are allowed (images.remotePatterns), which signs to put up (redirects and headers), and a few switches marked experimental. The car checks the panel before starting and complains about switches it does not recognise. ## 2. The Core Idea 📌 **Interview term: next.config.ts** — the configuration file at the project root

The problem

Question presented to candidate: "What goes into next.config.js, which options do you most often touch, and how do you catch mistakes in it?"

What a strong answer should cover:

next.config.ts (or .js / .mjs) exports an object or function that configures the build and the server; TypeScript config gets the NextConfig type.
Common options: images (remotePatterns, formats, qualities), redirects, rewrites, headers, output, serverExternalPackages, turbopack, cacheComponents and cacheLife, reactCompiler, experimental.
It is loaded by the Node.js server and build, not bundled for the browser; env values used there are read at build or start.
Next.js validates it: unknown or moved keys print warnings with the new name.
It can export a function that receives the phase (development, build, production server) to vary settings.

Clarifying questions expected:

"Which Next.js version?" — keys move between versions (for example serverComponentsExternalPackages).
"Is this for the build or runtime behaviour?" — some options only affect one of them.

Code / implementation expected: Yes — a typed config with the common options.

nextjs
next-config
configuration
build

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block says which version it ran on.

1. Why This Even Matters — A Story First

next.config is the settings panel of a car before a trip: which wheels to use (output), which roads are allowed (images.remotePatterns), which signs to put up (redirects and headers), and a few switches marked experimental. The car checks the panel before starting and complains about switches it does not recognise.

2

The solution is hidden so you can try first

6 min read · 8 sections

Read the code

A typed config with common options

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "standalone",
  images: { remotePatterns: [{ protocol: "https", hostname: "cdn.example.com" }] },
  serverExternalPackages: ["@acme/native-pdf"],
  cacheComponents: true,
  partialPrefetching: true, // 16.4 warns when cacheComponents is set without it
  async redirects() {
    return [{ source: "/old-blog/:slug", destination: "/blog/:slug", permanent: true }];
  },
  async headers() {
    return [{ source: "/(.*)", headers: [{ key: "X-Frame-Options", value: "DENY" }] }];
  },
};

export default nextConfig;

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.