🚀

【Next.js和訳】API Ref/next.config.js/Runtime Configuration

2021/10/03に公開約1,800字

この記事について

この記事は、next.config.js/Runtime Configurationの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Runtime Configuration

ランタイム構成をアプリに追加するには、next.config.jsを開き、publicRuntimeConfigserverRuntimeConfigの設定を追加します。

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

関連

https://nextjs.org/docs/api-reference/next.config.js/introduction

https://nextjs.org/docs/api-reference/next.config.js/environment-variables

Discussion

ログインするとコメントできます