Next.js 16 removed serverRuntimeConfig / publicRuntimeConfig and getConfig() from next/config — use env vars

Before:

// next.config.js
module.exports = {
  serverRuntimeConfig: { dbUrl: process.env.DATABASE_URL },
  publicRuntimeConfig: { apiUrl: '/api' },
}
// pages/index.tsx
import getConfig from 'next/config'
const { publicRuntimeConfig } = getConfig()

After:

# .env.local
NEXT_PUBLIC_API_URL="/api"

// Server Component / route handler: read server-only values directly
const dbUrl = process.env.DATABASE_URL

// Client Component: only NEXT_PUBLIC_* values (inlined at build time)
'use client'
const apiUrl = process.env.NEXT_PUBLIC_API_URL

To read a value at request time instead of baking it in at build (for example one image deployed to several environments), call connection() first in a server component:

import { connection } from 'next/server'
export default async function Page() {
  await connection()
  return <p>{process.env.RUNTIME_CONFIG}</p>
}

Use the taint API so server secrets don't leak into Client Components.