การจัดการ Environment Variables(Env) ใน Next.js

Environment Variables(Env) คือตัวแปรหรือค่าคงที่ ที่จะเปลี่ยนไปตาม Environment ต่างๆ ซึ่งเราต้องการให้แอปพลิเคชันของเราเปลี่ยนแปลงการทำงานไปตามแต่ละ Environment โดยที่เราไม่ต้องแก้ไขโค้ด เช่น การกำหนด HOST ของ Database ซึ่งบน Dev Environment เราจะทดสอบบน Database ของปลอมที่สร้างขึ้นเพื่อใช้สำหรับการทดสอบ แต่ถ้าบน Production เราจะสร้าง Connection ไปยัง Database ของจริง

ซึ่งใน Next.js เราจะใช้ Environment Variables เพื่อจัดการกับค่าคงที่ต่างๆ เช่น API Keys, Database Credentials, หรือ Configuration Settings ต่างๆ ซึ่งควรแยกออกจากโค้ดหลักเพื่อความปลอดภัยและรองรับการเปลี่ยนแปลงในอนาคต

Next.js มีระบบจัดการ Environment Variables ในตัวที่ช่วยให้สามารถใช้ค่าต่างๆ ได้ง่ายและปลอดภัย โดยสามารถกำหนดค่าผ่านไฟล์ .env และสามารถเรียกใช้งานผ่านทาง process.env ในโค้ดของเราได้เลย ลองดูวิธีการใช้งาน (Environment Variables)Env ได้ในตัวอย่างต่อไปนี้

การใช้ Environment Variables ใน Next.js

1. สร้างไฟล์ .env.local

Next.js รองรับไฟล์ .env เพื่อใช้กำหนดค่าตัวแปร โดยมีรูปแบบดังนี้

NEXT_PUBLIC_API_URL=https://api.example.com
DB_HOST=localhost
DB_USER=myuser
DB_PASS=supersecret

ในตัวอย่างนี้เราใช้ env.local ซึ่งจะมีผลเฉพาะในเครื่องนี้(local) เท่านั้น ไฟล์นี้ไม่ควรนำเข้าไปไว้ใน Git repository เพราะจะใช้แค่เฉพาะในเครื่องนี้เท่านั้น

2. เข้าถึงค่าจากไฟล์ .env

ในโค้ดของ Next.js เราสามารถใช้ process.env เพื่อเข้าถึงตัวแปรที่กำหนดไว้

export async function GET() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  })
  // ...
}

3. การใช้ตัวแปรสำหรับ Client-Side

หากต้องการให้ตัวแปรใช้งานได้บน Browser(Client-side) เราต้องใช้ตำนำหน้าว่า NEXT_PUBLIC_ ยกตัวอย่างเช่น

NEXT_PUBLIC_GOOGLE_MAPS_KEY=your-google-maps-key

จากนั้นในโค้ด React Component ให้เราเรียกใช้งานแบบนี้

const googleMapsKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_KEY;

ข้อควรระวัง: ตัวแปรที่ไม่มี NEXT_PUBLIC_ จะไม่สามารถเข้าถึงจากฝั่ง Client ได้

ตัวอย่างการใช้งาน Environment Variables

• ตัวแปรที่ใช้ได้เฉพาะฝั่ง Server

DATABASE_PASSWORD=supersecret

เข้าถึงในโค้ด:

// ใช้ได้เฉพาะใน API routes หรือ server-side code
console.log(process.env.DATABASE_PASSWORD); 

• ตัวแปรที่ใช้ได้ทั้ง Server และ Client

NEXT_PUBLIC_API_URL=https://api.example.com

เข้าถึงในโค้ด:

// ใช้ได้ใน Client-side
console.log(process.env.NEXT_PUBLIC_API_URL); 

ประเภทของไฟล์ .env ใน Next.js

Next.js รองรับไฟล์ .env ที่แยกตาม Environment ต่างๆ เช่น

• .env.local – ใช้สำหรับค่าที่เป็น local settings (ไม่ควร commit เข้าไปใน Git Repository)
• .env.development – ใช้ระหว่างการพัฒนา (โหมด next dev)
• .env.production – ใช้ใน production environment (โหมด next start)
• .env.test – ใช้สำหรับโหมดทดสอบ (test)

ตัวอย่างไฟล์ .env แยกตาม Environment

.env.local

DATABASE_URL=mysql://localhost:3306/dev_db

.env.production

DATABASE_URL=mysql://production-db-url

วิธีโหลด Environment Variables ใน Next.js

Next.js จะโหลดค่า .env โดยอัตโนมัติเมื่อรันแอปพลิเคชัน แต่จะไม่โหลดใหม่เมื่อมีการเปลี่ยนแปลง หลังจากที่ได้รันแอปพลิเคชันไปแล้ว ดังนั้น หากแก้ไขไฟล์ .env ต้อง Restart เซิร์ฟเวอร์ใหม่

สรุป

• ตัวแปรที่ต้องใช้ใน Client ต้องมีคำนำหน้า NEXT_PUBLIC_
• ค่าที่ไม่มี NEXT_PUBLIC_ จะถูกเก็บไว้เฉพาะฝั่ง Server-side
• ใช้ไฟล์ .env.local,.env.development,.env.production และ.env.test สำหรับกำหนด Environment Variables ตามแต่ละ Environment
• เมื่อแก้ไข .env ต้องรีสตาร์ทเซิร์ฟเวอร์เพื่อให้ค่าของตัวแปรนั้นถูกโหลดเข้าไปใช้งาน

จะเห็นว่าการใช้งาน Environment Variables จะช่วยให้เราสามารถปรับการทำงานของแอปพลิเคชันให้เหมาะสมกับ Environment ต่างๆได้ง่าย ลองนำ Environment Variables ไปใช้งานกันดูครับ