next.config.ts

The Config File

Next.js reads next.config.ts at the project root. It is typed with NextConfig, so your editor autocompletes every option.

next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [{ protocol: 'https', hostname: 'cdn.shopease.in' }],
  },
  async redirects() {
    return [{ source: '/offers', destination: '/deals', permanent: true }];
  },
};

export default nextConfig;

Common Options

Option	Purpose
`images.remotePatterns`	Allow `next/image` to load images from other domains
`redirects()` / `rewrites()`	Permanent URL changes / proxying a path to another URL
`output: 'standalone'`	Smaller build for Docker (Advance level)
`basePath`	Serve the app under a sub-path like `/shop`
`env`	Inline build-time values (prefer `.env` files)

Note: Changes to next.config.ts need a dev server restart.

Environment Variables

.env.local

Put secrets in .env.local (git-ignored). Only variables starting with NEXT_PUBLIC_ are sent to the browser.

.env.local

DATABASE_URL=postgresql://shop:secret@localhost:5432/shopease
NEXT_PUBLIC_SITE_NAME=ShopEase

// server code: both work
const db = process.env.DATABASE_URL;
// client code: only NEXT_PUBLIC_ variables exist, the rest are undefined
const site = process.env.NEXT_PUBLIC_SITE_NAME;