next.config
Customize the framework with the next.config file — image domains, redirects, and more.
Syntax
const nextConfig: NextConfig = { /* options */ };The next.config.ts file at your project root configures the framework. It exports a config object with options for images, redirects, rewrites, experimental features, and the build output mode.
Frequently used options
images.remotePatterns— allow optimizing images from external domains.redirects()— permanent or temporary URL redirects.output: 'standalone'— a self-contained build for Docker.
Example
// next.config.ts
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
images: {
remotePatterns: [
{ protocol: 'https', hostname: 'images.example.com' },
],
},
async redirects() {
return [{ source: '/old', destination: '/new', permanent: true }];
},
};
export default nextConfig;When to use it
- A developer adds a redirect rule in next.config.ts to send legacy /old-path URLs to the new /new-path without touching route files.
- An image optimisation policy is set in next.config.ts to allow images from an external CDN domain.
- A team adds custom webpack configuration in next.config.ts to support an SVG import plugin across the whole project.
More examples
Redirects in next.config.ts
The redirects function returns an array of redirect rules that Next.js handles before any route renders.
// next.config.ts
import type { NextConfig } from 'next';
export default {
async redirects() {
return [
{ source: '/blog/:slug', destination: '/posts/:slug', permanent: true },
];
},
} satisfies NextConfig;Remote image domains
remotePatterns whitelists external hostnames so next/image can optimise and proxy their images securely.
// next.config.ts
export default {
images: {
remotePatterns: [
{ protocol: 'https', hostname: 'cdn.example.com', pathname: '/images/**' },
],
},
};Custom webpack plugin
The webpack function receives the resolved config object and lets you add loaders or plugins for special file types.
// next.config.ts
export default {
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack'],
});
return config;
},
};
Discussion