Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
db72cb1
commit 06be3c6
Showing
3 changed files
with
51 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 0 additions & 58 deletions
58
docs/02-app/02-api-reference/05-next-config-js/runtime-configuration.mdx
This file was deleted.
Oops, something went wrong.
53 changes: 51 additions & 2 deletions
53
docs/03-pages/02-api-reference/03-next-config-js/runtime-configuration.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,56 @@ | ||
--- | ||
title: Runtime Config | ||
description: Add client and server runtime configuration to your Next.js app. | ||
source: app/api-reference/next-config-js/runtime-configuration | ||
--- | ||
|
||
{/* 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. */} | ||
> **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. | ||
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 | ||
``` |