Next.js在浏览器中访问env环境变量报错解决方案

最新推荐文章于 2024-06-01 09:59:13 发布

zhuyua

最新推荐文章于 2024-06-01 09:59:13 发布

阅读量384

点赞数 3

文章标签： javascript 前端 next.js js react

本文链接：https://blog.csdn.net/zhuyuyaya/article/details/137936669

版权

报错的代码

.env.local

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

env.js

export default function Env() {
    const dbHost = process.env.DB_HOST
    const dbUser = process.env.DB_USER
    const dbPass = process.env.DB_PASS
    return (
      <div>
        <p>DB Host: {dbHost}</p>
        <p>DB User: {dbUser}</p>
        <p>DB Password: {dbPass}</p>
      </div>
    );
  }

解决办法

在给环境变量名添加,在浏览器使用的时候必须添加NEXT_PUBLIC_前缀,在js中不用

修改后的代码

.env.local

NEXT_PUBLIC_DB_HOST=localhost
NEXT_PUBLIC_DB_USER=myuser
NEXT_PUBLIC_DB_PASS=mypassword

env.js

export default function Env() {
    const dbHost = process.env.NEXT_PUBLIC_DB_HOST
    const dbUser = process.env.NEXT_PUBLIC_DB_USER
    const dbPass = process.env.NEXT_PUBLIC_DB_PASS
    return (
      <div>
        <p>DB Host: {dbHost}</p>
        <p>DB User: {dbUser}</p>
        <p>DB Password: {dbPass}</p>
      </div>
    );
  }