首页 > 其他分享 >Next.js Environment Variables All In One

Next.js Environment Variables All In One

时间:2022-11-04 12:34:32浏览次数:67  
标签:process Variables DB js Environment env NEXT PUBLIC

Next.js Environment Variables All In One

.env

.env.local

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

// getStaticProps:
// pages/index.js
export async function getStaticProps() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  })
  // ...
}

NEXT_PUBLIC_

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

// pages/index.js
import setupAnalyticsService from '../lib/my-analytics-service'

// 'NEXT_PUBLIC_ANALYTICS_ID' can be used here as it's prefixed by 'NEXT_PUBLIC_'.
// It will be transformed at build time to `setupAnalyticsService('abcdefghijk')`.
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)

function HomePage() {
  return <h1>Hello World</h1>
}

export default HomePage

https://nextjs.org/docs/basic-features/environment-variables

demo

//  process.env



image

refs



©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载

标签:process,Variables,DB,js,Environment,env,NEXT,PUBLIC
From: https://www.cnblogs.com/xgqfrms/p/16857358.html

相关文章

  • leetcode 160. 相交链表 js 实现
    给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点,返回 null 。图示两个链表在节点 c1 开始相交: ......
  • JS 探索 this 指向问题
    1.扑朔迷离的this从表面来看,this总能通过各种变通的方式得到意想不到的结果既然是“意想不到”,就说明对“各种变通的方式”不太了解2.那么我们来看看“各种变......
  • js 密码强度检测工具
    效果:  新建一个密码强度检测工具文件 password-strength.js://hasnumberconsthasNumber=(number)=>newRegExp(/[0-9]/).test(number);//hasmixofs......
  • download.js (实例3)下载
     downloadFile(url,"电子作业票APP.jpg");//fileRealPath文件全路径//fileName文件名带格式的exportfunctiondownloadFile(fileRealPath,fileName){l......
  • JS书写规范
    JS变量命名命名方法小驼峰式命名命名规范前缀应当是名词。(函数的名字前缀为动词,以此区分变量和函数)命名建议尽量在变量名字中体现所属类型,如:length、count等表示......
  • download.js (实例2)下载
    调用this.$download.url('/api/v1/org/question/exportData',datVal,`${this.questMess.name}.xlsx`);js文件import{saveAs}from'file-saver'importaxi......
  • el-dialog 或dialog 封装 通过js控制
    1.通用组件封装dialogImg.vue<template><div><el-dialogv-show="isShow":visible.sync="isShow"width="50%"@close="seePicUrl='......
  • ArcGIS JS API 添加要素图层 点击时获取图层属性
    //需要引入:"esri/layers/FeatureLayer"模块//要素图层被点击时弹出图层属性的模板定义{为字段}varTuCeng03TC={"title":"ID:{objectid}",......
  • Vue、Three.js实现全景图
    一、首先我们需要创建一个Vue工程本文主要详细记录搭建全景图的过程,故搭建Vue工程不在过多描述。二、安装Three.jsnpminstallthree--savenpminstallthree-trackba......
  • JSON
    数据交换格式1、什么是数据交换格式数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式。前段领域,经常提及的两种数据交换格式分别是XML和JSON。其中......