ใช้งาน Environment variables ใน Next.js
โดยปกติในการสร้างเว็บไซต์เรามักจะมีการกำหนดข้อมูลส่วนกลางที่ต้องใช้ซ้ำ อาทิเช่น ชื่อเว็บไซต์, Url เริ่มต้น หรือข้อมูลพวก เบอร์โทร อีเมล์ ชื่อลิงค์ไปยังแฟนเพจ ทีนี้ถ้ามีหลายหน้าเกิดต้องเปลี่ยนข้อมูล เราก็ต้องไปเปลี่ยนทุกหน้า ซึ่งอาจจะแก้ไขไม่ครบได้ มาดูวิธีการกันครับ
แบบที่ 1 กำหนด Environment variables ไฟล์ next.config.js
เพื่อความสะดวกเราจะใช้ Environment variables ร่วมกับ next.config.js เพื่อไว้เก็บค่าข้อมูลดังกล่าว เวลาแก้ไขจะได้มาแก้ที่ next.config.js นี้ไฟล์เดียว ซึ่งค่าที่เก็บจะเปิดเผยและสามารถไปแสดงบน Browser ได้
* ห้ามนำค่าที่สำคัญ อย่างเช่น Secret Key ของ API หรือ Password ของฐานข้อมูล มากำหนดในนี้เด็ดขาด ! ให้ไปกำหนดโดยตรง Environment variables (.env.local)
วิธีกำหนดคือเราจะเพิ่ม env เข้าไป ตามตัวอย่างด้านล่างนี้
// next.config.js
module.exports = {
env: {
appName: 'MyApp',
appUrl: 'https://myapp.com',
email: '[email protected]'
},
}เมื่อต้องการเรียกใช้เราสามารถเรียกค่าด้วยการใช้ process.env ยกตัวอย่าง แสดงชื่อ appName ดังนี้
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
แบบที่ 2 กำหนด Environment variables โดยตรง
เพื่อให้แยก Environment variables ได้ง่ายขึ้นใน development กับ production แล้วค่อยให้ไฟล์ next.config.js ไปเรียกค่าใน Environment variables มาอีกที เริ่มต้นกำหนดค่าดังนี้
// .env.local
APP_NAME = MyApp
APP_URL = https://myapp.com
MAIN_EMAIL = [email protected]
DB_HOST = localhost
DB_USER = myuser
DB_PASS = mypasswordให้ทำการติดตั้ง dotenv เพื่อให้ดึงค่า Environment variables
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,
appUrl: process.env.APP_URL,
email: process.env.MAIN_EMAIL
},
}จากด้านบนจะมีการเรียก process.env.APP_NAME อีกทีจากไฟล์ .env ทีนี้ให้เราสร้างไฟล์ .env ไว้ root บนสุดของโปรเจ็ค แล้วเพิ่มค่า Environment variables เข้าไป ดังนี้
* สำหรับ Next.js 9.4 ขึ้นไป!
ระหว่างที่เขียนบล็อกนี้เสร็จไปไม่นานทาง Next.js ก็ออกเวอร์ชั่น 9.4 ซึ่งจะสามารถเข้าถึง Environment variables ได้โดยตรงไม่ต้องผ่านไฟล์ next.config.js แล้ว แต่จะต้องใช้ NEXT_PUBLIC_ นำหน้าตัวแปร ในไฟล์ .env ตัวอย่างเช่น
// .env.local
NEXT_PUBLIC_APP_NAME = MyApp
NEXT_PUBLIC_APP_URL = https://myapp.com
NEXT_PUBLIC_MAIN_EMAIL = [email protected]
DB_HOST = localhost
DB_USER = myuser
DB_PASS = mypasswordทีนี้เวลาเรียกก็ใช้ process.env.NEXT_PUBLIC_APP_NAME
ก็ขอจบบล็อกไวเพียงเท่านี้ หวังว่าคงทีประโยชน์ครับ
ขอบคุณมากครับเป็นประโยชน์มากๆ คับ