打开next.js.js并添加publicRuntimeConfig配置和常量：

module.exports = {
  publicRuntimeConfig: {
// Will be available on both server and client
yourKey: 'your-value'
},
}

字符串
你可以像这样从另一个.js文件调用它

import getConfig from 'next/config'
const { publicRuntimeConfig } = getConfig()
console.log(publicRuntimeConfig.yourKey)

型
甚至可以这样从视角来称呼它

${publicRuntimeConfig.yourKey}

型

您可以使用next-runtime-dotenv配置您的next应用程序，它允许您使用next的运行时配置指定serverOnly/clientOnly值。
然后在某个组件中，

import getConfig from 'next/config'

const {
  publicRuntimeConfig: {MY_API_URL},  // Available both client and server side
  serverRuntimeConfig: {GITHUB_TOKEN} // Only available server side
} = getConfig()

function HomePage() {
  // Will display the variable on the server’s console
  // Will display undefined into the browser’s console
  console.log(GITHUB_TOKEN)

  return (
    <div>
      My API URL is {MY_API_URL}
    </div>
  )
}

export default HomePage

字符串
如果不需要这种分隔，可以使用dotenv库加载.env文件，并使用它配置Next的env属性。

// next.config.js

require('dotenv').config()
module.exports = {
  env: {
    // Reference a variable that was defined in the .env file and make it available at Build Time
    TEST_VAR: process.env.TEST_VAR,
  },
}

型
看看这个with-dotenv的例子。

根据您是否要检查版本控制系统中的常量，有多个选项。
1.通过next.config.js（env属性）入住：
你可以像这样在这个文件中添加任何键/值对：

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

字符串
现在你可以在代码中访问process.env.customKey。例如：

function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>
}

export default Page

型
1.将常量保存在单独的.env.local文件中，以区分本地和生产环境：
你可以像这样在这个文件中添加任何键/值对：

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

型
这些变量也可以通过环境变量访问。例如：

myDB.connect({
  host: process.env.DB_HOST,
  username: process.env.DB_USER,
  password: process.env.DB_PASS,
})

型