Skip to content

Commit 06be3c6

Browse files
Docs: Remove runtime configuration from /app docs (#54336)
Remove runtime configuration from app docs as it's not available. Fixes: https://vercel.slack.com/archives/C03S9JCH2Q5/p1692029581031809
1 parent db72cb1 commit 06be3c6

File tree

3 files changed

+51
-61
lines changed

3 files changed

+51
-61
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ Additionally, a minimal `server.js` file is also output which can be used instea
3939

4040
> **Good to know**:
4141
>
42-
> - `next.config.js` is read during `next build` and serialized into the `server.js` output file. If the legacy [`serverRuntimeConfig` or `publicRuntimeConfig` options](/docs/app/api-reference/next-config-js/runtime-configuration) are being used, the values will be specific to values at build time.
4342
> - If your project uses [Image Optimization](/docs/app/building-your-application/optimizing/images) with the default `loader`, you must install `sharp` as a dependency:
4443
> - If your project needs alternative port or hostname for listening, you can define `PORT` and `HOSTNAME` environment variables, before running `server.js`. For example, `PORT=3000 HOSTNAME=localhost node server.js`.
4544

docs/02-app/02-api-reference/05-next-config-js/runtime-configuration.mdx

Lines changed: 0 additions & 58 deletions
This file was deleted.
Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,56 @@
11
---
22
title: Runtime Config
33
description: Add client and server runtime configuration to your Next.js app.
4-
source: app/api-reference/next-config-js/runtime-configuration
54
---
65

7-
{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
6+
> **Warning**: This feature is considered legacy and does not work with [Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization), [Output File Tracing](/docs/pages/api-reference/next-config-js/output#automatically-copying-traced-files), or [React Server Components](/docs/getting-started/react-essentials#server-components). Please use [environment variables](/docs/pages/building-your-application/configuring/environment-variables) instead to avoid initialization overhead.
7+
8+
To add runtime configuration to your app, open `next.config.js` and add the `publicRuntimeConfig` and `serverRuntimeConfig` configs:
9+
10+
```js filename="next.config.js"
11+
module.exports = {
12+
serverRuntimeConfig: {
13+
// Will only be available on the server side
14+
mySecret: 'secret',
15+
secondSecret: process.env.SECOND_SECRET, // Pass through env variables
16+
},
17+
publicRuntimeConfig: {
18+
// Will be available on both server and client
19+
staticFolder: '/static',
20+
},
21+
}
22+
```
23+
24+
Place any server-only runtime config under `serverRuntimeConfig`.
25+
26+
Anything accessible to both client and server-side code should be under `publicRuntimeConfig`.
27+
28+
> 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.
29+
30+
To get access to the runtime configs in your app use `next/config`, like so:
31+
32+
```jsx
33+
import getConfig from 'next/config'
34+
import Image from 'next/image'
35+
36+
// Only holds serverRuntimeConfig and publicRuntimeConfig
37+
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
38+
// Will only be available on the server-side
39+
console.log(serverRuntimeConfig.mySecret)
40+
// Will be available on both server-side and client-side
41+
console.log(publicRuntimeConfig.staticFolder)
42+
43+
function MyImage() {
44+
return (
45+
<div>
46+
<Image
47+
src={`${publicRuntimeConfig.staticFolder}/logo.png`}
48+
alt="logo"
49+
layout="fill"
50+
/>
51+
</div>
52+
)
53+
}
54+
55+
export default MyImage
56+
```

0 commit comments

Comments
 (0)