วันนี้มาว่าถึงการใช้ 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

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

Author:

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