Revert "[Breaking] Remove deprecated publicRuntimeConfig and serverRuntimeConfig (#83944)" (#84167)

This PR reverts #83944 as it was missing a deprecation warning in the
app, which is easy to miss for the users.

Author: devjiwonchoi

crates/next-build-test/nextConfig.json

@@ -53,6 +53,8 @@
   "productionBrowserSourceMaps": false,
   "optimizeFonts": true,
   "excludeDefaultMomentLocales": true,
+  "serverRuntimeConfig": {},
+  "publicRuntimeConfig": {},
   "reactProductionProfiling": false,
   "reactStrictMode": true,
   "httpAgentOptions": {

docs/01-app/02-guides/environment-variables.mdx

@@ -228,6 +228,7 @@ This allows you to use a singular Docker image that can be promoted through mult
 **Good to know:**
 
 - You can run code on server startup using the [`register` function](/docs/app/guides/instrumentation).
+- We do not recommend using the [`runtimeConfig`](/docs/pages/api-reference/config/next-config-js/runtime-configuration) option, as this does not work with the standalone output mode. Instead, we recommend [incrementally adopting](/docs/app/guides/migrating/app-router-migration) the App Router if you need this feature.
 
 ## Test Environment Variables
 

docs/01-app/02-guides/self-hosting.mdx

@@ -79,6 +79,7 @@ This allows you to use a singular Docker image that can be promoted through mult
 > **Good to know:**
 >
 > - You can run code on server startup using the [`register` function](/docs/app/guides/instrumentation).
+> - We do not recommend using the [runtimeConfig](/docs/pages/api-reference/config/next-config-js/runtime-configuration) option, as this does not work with the standalone output mode. Instead, we recommend [incrementally adopting](/docs/app/guides/migrating/app-router-migration) the App Router.
 
 ## Caching and ISR
 

docs/01-app/03-api-reference/05-config/01-next-config-js/output.mdx

@@ -59,7 +59,7 @@ node .next/standalone/server.js
 
 > **Good to know**:
 >
-> - `next.config.js` is read during `next build` and serialized into the `server.js` output file.
+> - `next.config.js` is read during `next build` and serialized into the `server.js` output file. If the legacy [`serverRuntimeConfig` or `publicRuntimeConfig` options](/docs/pages/api-reference/config/next-config-js/runtime-configuration) are being used, the values will be specific to values at build time.
 > - If your project needs to listen to a specific port or hostname, you can define `PORT` or `HOSTNAME` environment variables before running `server.js`. For example, run `PORT=8080 HOSTNAME=0.0.0.0 node server.js` to start the server on `http://0.0.0.0:8080`.
 
 </PagesOnly>

docs/02-pages/04-api-reference/04-config/01-next-config-js/runtime-configuration.mdx

@@ -0,0 +1,60 @@
+---
+title: Runtime Config
+description: Add client and server runtime configuration to your Next.js app.
+---
+
+> **Warning:**
+>
+> - **This feature is deprecated.** We recommend using [environment variables](/docs/pages/guides/environment-variables) instead, which also can support reading runtime values.
+> - You can run code on server startup using the [`register` function](/docs/app/guides/instrumentation).
+> - This feature does not work with [Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization), [Output File Tracing](/docs/pages/api-reference/config/next-config-js/output#automatically-copying-traced-files), or [React Server Components](/docs/app/getting-started/server-and-client-components).
+
+To add runtime configuration to your app, open `next.config.js` and add the `publicRuntimeConfig` and `serverRuntimeConfig` configs:
+
+```js filename="next.config.js"
+module.exports = {
+  serverRuntimeConfig: {
+    // Will only be available on the server side
+    mySecret: 'secret',
+    secondSecret: process.env.SECOND_SECRET, // Pass through env variables
+  },
+  publicRuntimeConfig: {
+    // Will be available on both server and client
+    staticFolder: '/static',
+  },
+}
+```
+
+Place any server-only runtime config under `serverRuntimeConfig`.
+
+Anything accessible to both client and server-side code should be under `publicRuntimeConfig`.
+
+> A page that relies on `publicRuntimeConfig` **must** use `getInitialProps` or `getServerSideProps` or your application must have a [Custom App](/docs/pages/building-your-application/routing/custom-app) with `getInitialProps` to opt-out of [Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization). Runtime configuration won't be available to any page (or component in a page) without being server-side rendered.
+
+To get access to the runtime configs in your app use `next/config`, like so:
+
+```jsx
+import getConfig from 'next/config'
+import Image from 'next/image'
+
+// Only holds serverRuntimeConfig and publicRuntimeConfig
+const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
+// Will only be available on the server-side
+console.log(serverRuntimeConfig.mySecret)
+// Will be available on both server-side and client-side
+console.log(publicRuntimeConfig.staticFolder)
+
+function MyImage() {
+  return (
+    <div>
+      <Image
+        src={`${publicRuntimeConfig.staticFolder}/logo.png`}
+        alt="logo"
+        layout="fill"
+      />
+    </div>
+  )
+}
+
+export default MyImage
+```

packages/next/config.d.ts

@@ -0,0 +1,3 @@
+import getConfig from './dist/shared/lib/runtime-config.external'
+export * from './dist/shared/lib/runtime-config.external'
+export default getConfig

packages/next/config.js

@@ -0,0 +1 @@
+module.exports = require('./dist/shared/lib/runtime-config.external')

packages/next/index.d.ts

@@ -4,6 +4,7 @@
 /// <reference path="./amp.d.ts" />
 /// <reference path="./app.d.ts" />
 /// <reference path="./cache.d.ts" />
+/// <reference path="./config.d.ts" />
 /// <reference path="./document.d.ts" />
 /// <reference path="./dynamic.d.ts" />
 /// <reference path="./error.d.ts" />

packages/next/src/build/index.ts

@@ -1909,7 +1909,9 @@ export default async function build(
           }
         }
 
-        const { configFileName } = config
+        const { configFileName, publicRuntimeConfig, serverRuntimeConfig } =
+          config
+        const runtimeEnvConfig = { publicRuntimeConfig, serverRuntimeConfig }
         const sriEnabled = Boolean(config.experimental.sri?.algorithm)
 
         const nonStaticErrorPageSpan = staticCheckSpan.traceChild(
@@ -1922,6 +1924,7 @@ export default async function build(
               (await worker.hasCustomGetInitialProps({
                 page: '/_error',
                 distDir,
+                runtimeEnvConfig,
                 checkingApp: false,
                 sriEnabled,
               }))
@@ -1935,6 +1938,7 @@ export default async function build(
               page: '/_error',
               distDir,
               configFileName,
+              runtimeEnvConfig,
               cacheComponents: isAppCacheComponentsEnabled,
               authInterrupts: isAuthInterruptsEnabled,
               httpAgentOptions: config.httpAgentOptions,
@@ -1954,6 +1958,7 @@ export default async function build(
           ? worker.hasCustomGetInitialProps({
               page: appPageToCheck,
               distDir,
+              runtimeEnvConfig,
               checkingApp: true,
               sriEnabled,
             })
@@ -1963,6 +1968,7 @@ export default async function build(
           ? worker.getDefinedNamedExports({
               page: appPageToCheck,
               distDir,
+              runtimeEnvConfig,
               sriEnabled,
             })
           : Promise.resolve([])
@@ -2149,6 +2155,7 @@ export default async function build(
                             originalAppPath,
                             distDir,
                             configFileName,
+                            runtimeEnvConfig,
                             httpAgentOptions: config.httpAgentOptions,
                             locales: config.i18n?.locales,
                             defaultLocale: config.i18n?.defaultLocale,

packages/next/src/build/templates/edge-ssr.ts

@@ -155,6 +155,12 @@ async function requestHandler(
       distDir: '',
       crossOrigin: nextConfig.crossOrigin ? nextConfig.crossOrigin : undefined,
       largePageDataBytes: nextConfig.experimental.largePageDataBytes,
+      // Only the `publicRuntimeConfig` key is exposed to the client side
+      // It'll be rendered as part of __NEXT_DATA__ on the client side
+      runtimeConfig:
+        Object.keys(nextConfig.publicRuntimeConfig).length > 0
+          ? nextConfig.publicRuntimeConfig
+          : undefined,
 
       isExperimentalCompile: nextConfig.experimental.isExperimentalCompile,
       // `htmlLimitedBots` is passed to server as serialized config in string format