mediumFrontend

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?

**TL;DR.** next.config.js (or .ts / .mjs ) configures the build and runtime: redirects() , rewrites() , headers() , images (remote patterns/loaders), output mode, experimental flags, env , transpilePackages , and webpack/turbopack tweaks. It's evaluated at **build/start**, not per request. next.config <rect class='d-b

596 views

Understand the problem

The framework configuration file.

nextjsnext-configconfigurationbuild

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A typical next.config

// next.config.ts
import type { NextConfig } from 'next';
const config: NextConfig = {
  output: 'standalone',
  images: { remotePatterns: [{ protocol: 'https', hostname: 'cdn.example.com' }] },
  async redirects() { return [{ source: '/old', destination: '/new', permanent: true }]; },
  async headers() { return [{ source: '/(.*)', headers: [{ key: 'X-Frame-Options', value: 'DENY' }] }]; },
  experimental: { optimizePackageImports: ['lodash'] },
};
export default config;

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is request memoization in Next.js?

What is on-demand revalidation in Next.js (revalidatePath / revalidateTag)?