次の環境変数.JSとNetlify

ようこそブログBrevent、10日!
次の環境変数を使用したい場合.ジェイエス.env.local ルートのファイルとそこにすべてを使用することができます!次のように見えます.

// .env.local
SITE_URL=localhost
SITE_KEY=hahabusiness

それが言われると、これらの変数はノードにだけさらされる.このようなJS環境ではなく、ブラウザです.それらを使用する場合は、APIのルートでのみ使用する必要がありますgetStaticProps ページコンポーネントで.例えば、次のようになります.

// pages/index.js

export default function Home(props) {
  return (
    // ...
  )
}

// ...

export async function getStaticProps() {
  const siteData = await someService({
      url: process.env.SITE_URL,
    key: process.env.SITE_KEY
  })
  // ...
}

環境変数がブラウザに公開され、クライアントが直面しているコンポーネントで使用できるようにするには.env.local 変数をプレフィックスする必要がありますNEXT_PUBLIC_ .

// .env.local
SITE_URL=localhost
SITE_KEY=hahabusiness
NEXT_PUBLIC_PAYMENT_TOKEN=thisispublic // this one is exposed to the browser

NetLify UIにおける環境変数の設定

サイトを展開したときは、NetLifify UIで環境変数を設定できます.ビルドをビルドして設定を設定し、「環境変数」の下に値を設定します.

また、use the Netlify CLI UIで設定された環境変数を使用する(あるいはCLIから設定する)

もっとありますか。

常にもっと!NetLifyの環境変数でできることはたくさんあります.以下にいくつかの有用なドキュメントとガイドを示します.

Build environment variables

Build settings in netlify.toml

Example of environment variables in use in Next.js