ใช้งาน 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

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