Next.js · Lesson 12 of 15

Config, Env and Route Segment Options

next.config, public vs secret env, and per-route runtime settings.

Intermediate
14 min read
3 objectives

Before this lessonLesson 11: Authentication with Auth.js

What you will learn

Split public and secret env
Set headers and redirects
Pick a runtime

Your Progress

0 of 15 lessons 0%

Lessons0 / 15
Completed0
Est. time left~ 4 hours

Create a free account to keep your progress on every device.

Configuration belongs in next.config.ts and environment files, not scattered through components.

Public vs secret

NEXT_PUBLIC_* is inlined into the browser bundle. Use it for a public API URL or an analytics id.
Everything else (DATABASE_URL, AUTH_SECRET) is server-only. Read it in Server Components, actions and route handlers.

const api = process.env.NEXT_PUBLIC_API_URL;
const db = process.env.DATABASE_URL;   // never in a "use client" file

next.config.ts

import type { NextConfig } from "next";

const config: NextConfig = {
  images: { remotePatterns: [{ hostname: "images.example.com" }] },
  async redirects() {
    return [{ source: "/old", destination: "/new", permanent: true }];
  },
  async headers() {
    return [{
      source: "/(.*)",
      headers: [{ key: "X-Frame-Options", value: "DENY" }],
    }];
  },
};
export default config;

Segment config

export const dynamic = "force-static";     // or force-dynamic
export const revalidate = 60;
export const runtime = "nodejs";           // or "edge" for middleware-like routes
export const maxDuration = 30;             // seconds, on hosts that allow it

Up next · Lesson 13Testing Next.js AppsUnit-test server actions and cover critical flows with Playwright.