Next.js - ตัวแปรสภาพแวดล้อม
Next.js มีการสนับสนุนสำหรับการเผยแพร่ตัวแปรสภาพแวดล้อมในโหนดซึ่งเราสามารถใช้ในการเชื่อมต่อกับเซิร์ฟเวอร์ฐานข้อมูล ฯลฯ สำหรับสิ่งนี้เราต้องสร้างไฟล์. env.local ในไดเรกทอรีราก เรายังสามารถสร้าง. env.production
สร้าง. env.local
สร้าง. env.local ในไดเร็กทอรีรูทด้วยเนื้อหาต่อไปนี้
DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjsสร้าง env.js
สร้างเพจชื่อ env.js โดยมีเนื้อหาต่อไปนี้ในไดเร็กทอรีเพจ / โพสต์ซึ่งเราจะใช้ตัวแปรสภาพแวดล้อมโดยใช้ process.env
import Head from 'next/head'
import Container from '../../components/container'
export default function FirstPost(props) {
return (
<>
<Container>
<Head>
<title>Environment Variables</title>
</Head>
<h1>Database Credentials</h1>
<p>Host: {props.host}</p>
<p>Username: {props.username}</p>
<p>Password: {props.password}</p>
</Container>
</>
)
}
export async function getStaticProps() {
// Connect to Database using DB properties
return {
props: {
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS
}
}
}ตอนนี้เริ่มเซิร์ฟเวอร์
ถัดไป JS จะตรวจจับ. env.local และแสดงข้อความต่อท้ายบนคอนโซล
npm run dev
> [email protected] dev D:\Node\nextjs
> next
ready - started server on http://localhost:3000
info - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
wait - compiling...
event - compiled successfully
event - build page: /posts/env
wait - compiling...
event - compiled successfullyตรวจสอบผลลัพธ์
เปิด localhost: 3000 / posts / env ในเบราว์เซอร์และคุณจะเห็นผลลัพธ์ต่อไปนี้
