🚀
【Next.js和訳】API Ref/next.config.js/Runtime Configuration
この記事について
株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。
この記事は、next.config.js/Runtime Configurationの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Runtime Configuration
ランタイム構成をアプリに追加するには、next.config.jsを開き、publicRuntimeConfigとserverRuntimeConfigの設定を追加します。
module.exports = {
serverRuntimeConfig: {
// サーバーサイドでのみ利用可能
mySecret: 'secret',
secondSecret: process.env.SECOND_SECRET, // 環境変数のパス
},
publicRuntimeConfig: {
// サーバーとクライアントの両方で利用可能になる
staticFolder: '/static',
},
}
サーバーのみのランタイム設定は、serverRuntimeConfigの下に置きます。
クライアント側とサーバー側のコードの両方からアクセスできるものは、publicRuntimeConfigの下に置く必要があります。
publicRuntimeConfigに依存するページは、getInitialPropsを使用して自動静的最適化をオプトアウトする必要があります。getInitialPropsを使用しないページ（またはページ内のコンポーネント）では、ランタイム設定は利用できません。
アプリ内のランタイム設定にアクセスするには、次のようにnext/configを使用します。
import getConfig from 'next/config'
import Image from 'next/image'
// serverRuntimeConfigとpublicRuntimeConfigのみを保持します。
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
// サーバーサイドでのみ利用可能になる
console.log(serverRuntimeConfig.mySecret)
// サーバーサイドとクライアントサイドの両方で利用できるようになります。
console.log(publicRuntimeConfig.staticFolder)
function MyImage() {
return (
<div>
<Image
src={`${publicRuntimeConfig.staticFolder}/logo.png`}
alt="logo"
layout="fill"
/>
</div>
)
}
export default MyImage
Discussion