🚀
【Next.js和訳】API Ref/next.config.js/Runtime Configuration
この記事について
この記事は、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
の下に置く必要があります。
アプリ内のランタイム設定にアクセスするには、次のように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