วันนี้มาว่าถึงการใช้ Environment variables ร่วมกับ Next.js เพื่อไว้เก็บค่า Config ต่างๆ ภายใน App โดยวิธีการมีดังนี้

เพิ่ม env ในไฟล์ next.config.js

โดยเราจะเพิ่ม environment variables ไปยัง JavaScript bundle เริ่มโดยการเปิดไฟล์ next.config.js จากนั้นเพิ่ม env เข้าไป ดังด้านล่างนี้

เข้าถึงด้วย process.env

ทีนี้เราสามารถเรียกค่าด้วยการใช้ process.env ดังด้านล่างนี้

ซึ่ง 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 ช่วยในการใช้งาน ให้ทำการติดตั้งก่อน

จากนั้นให้เพิ่ม require(‘dotenv’).config() ในเพื่อเรียกใช้งานด้านบนสุดของโค้ด ในไฟล์ next.config.js และเปลี่ยนการใส่ค่าตรงๆ ไปเป็นใช้ค่าด้วย  process.env ดังโค้ดด้านล่างนี้

จากด้านบนจะมีการเรียก  process.env.APP_NAME อีกทีจากไฟล์ .env ทีนี้ให้เราสร้างไฟล์ .env ไว้ root บนสุดของโปรเจ็ค แล้วเพิ่มค่า Environment variables เข้าไป ดังนี้

* สำหรับ Next.js 9.4 ขึ้นไป !

ระหว่างที่เขียนบล็อกนี้เสร็จไปไม่นานทาง Next.js ก็ออกเวอร์ชั่น 9.4 ซึ่งจะสามารถเข้าถึง Environment variables หรือว่าไฟล์ .env ได้โดยตรงไม่ต้องไป Config ในไฟล์ next.config.js แล้ว แต่จะต้องใช้  NEXT_PUBLIC_ นำหน้าตัวแปร ในไฟล์ .env ตัวอย่างเช่น

ทีนี้เวลาเรียกก็ใช้  process.env.NEXT_PUBLIC_NAME

ก็ขอจบบล็อกไวเพียงเท่านี้ หวังว่าคงทีประโยชน์ครับ

Author:

ชื่อ ศิริชัย ธีรภัทรสกุล ชื่อเล่น “ตั้ม” ทำงานด้านพัฒนาเว็บไซต์ สนใจเรื่องการพัฒนาตัวเอง หลงใหลการถ่ายรูป เวลาว่างมักชอบอ่านหนังสือ และเขียนบล็อก