ใช้งาน Environment variables ใน Next.js
วันนี้มาว่าถึงการใช้ Environment variables ร่วมกับ Next.js เพื่อไว้เก็บค่า Config ต่างๆ ภายใน App โดยวิธีการมีดังนี้
เพิ่ม env ในไฟล์ next.config.js
โดยเราจะเพิ่ม environment variables ไปยัง JavaScript bundle เริ่มโดยการเปิดไฟล์ next.config.js
จากนั้นเพิ่ม env
เข้าไป ดังด้านล่างนี้
// next.config.js
module.exports = {
env: {
appName: 'MyApp',
},
}
เข้าถึงด้วย process.env
ทีนี้เราสามารถเรียกค่าด้วยการใช้ process.env
ดังด้านล่างนี้
function Page() {
return <h1>The value of appName is: {process.env.appName}</h1>
}
export default Page
ซึ่ง Next.js จะแทนค่าจาก process.env.appName
แสดงผล 'MyApp'
ในตอน build time ซึ่งถ้าดูผ่าน Browsers ผลลัพธ์ควรจะแสดงข้อความว่า
The value of appName is: MyApp
ใช้ไฟล์ .env เพื่อแยก Environment variables
แต่เพื่อให้แยก Environment variables ได้ง่ายขึ้นใน development กับ production จะขอเพิ่มไฟล์ .env เพื่อเก็บค่า config แยกให้ชัดเจน อธิบายคือเราจะให้ไฟล์ next.config.js
ไปเรียกค่าใน .env อีกที
เริ่มต้นเราจะใช้โมดูล dotenv ช่วยในการใช้งาน ให้ทำการติดตั้งก่อน
npm install dotenv
// หรือ
yarn add dotenv
จากนั้นให้เพิ่ม require(‘dotenv’).config() ในเพื่อเรียกใช้งานด้านบนสุดของโค้ด ในไฟล์ next.config.js
และเปลี่ยนการใส่ค่าตรงๆ ไปเป็นใช้ค่าด้วย process.env
ดังโค้ดด้านล่างนี้
// next.config.js
require("dotenv").config();
module.exports = {
env: {
appName: process.env.APP_NAME,
},
}
จากด้านบนจะมีการเรียก process.env.APP_NAME
อีกทีจากไฟล์ .env ทีนี้ให้เราสร้างไฟล์ .env ไว้ root บนสุดของโปรเจ็ค แล้วเพิ่มค่า Environment variables เข้าไป ดังนี้
// .env
APP_NAME = MyApp
* สำหรับ Next.js 9.4 ขึ้นไป !
ระหว่างที่เขียนบล็อกนี้เสร็จไปไม่นานทาง Next.js ก็ออกเวอร์ชั่น 9.4 ซึ่งจะสามารถเข้าถึง Environment variables หรือว่าไฟล์ .env ได้โดยตรงไม่ต้องไป Config ในไฟล์ next.config.js
แล้ว แต่จะต้องใช้ NEXT_PUBLIC_
นำหน้าตัวแปร ในไฟล์ .env ตัวอย่างเช่น
// .env
NEXT_PUBLIC_NAME = MyApp
ทีนี้เวลาเรียกก็ใช้ process.env.NEXT_PUBLIC_NAME
ก็ขอจบบล็อกไวเพียงเท่านี้ หวังว่าคงทีประโยชน์ครับ