ใช้งาน Environment variables ใน Next.js

ในการพัฒนาเว็บแอปพลิเคชัน มักจะมีค่าที่ต้องเปลี่ยนแปลงตาม Environment เช่น Development, Staging, Production เช่น URL ของ API, Database connection string หรือ API Key ต่างๆ ซึ่งเราจะใช้ Environment variables ในการจัดการค่าเหล่านี้

มาดูวิธีการใช้งาน Environment variables ใน Next.js กันครับ

แบบที่ 1: กำหนดใน next.config.js

วิธีนี้เหมาะสำหรับค่าที่ไม่ใช่ข้อมูลลับ เพราะค่าจะถูก Embed ลงไปใน JavaScript bundle ที่ส่งไปยัง Client

เปิดไฟล์ next.config.js แล้วเพิ่ม env object ดังนี้

// next.config.js
module.exports = {
  env: {
    appName: 'memo8',
    apiUrl: 'https://api.example.com',
  },
}

จากนั้นเรียกใช้ค่า Environment variable ด้วย process.env ในโค้ดได้เลย

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Welcome to {process.env.appName}</h1>
      <p>API URL: {process.env.apiUrl}</p>
    </div>
  )
}

หมายเหตุ: ห้ามใส่ Secret key หรือ API key ที่เป็นความลับในวิธีนี้ เพราะค่าจะถูกส่งไปยัง Client ทำให้ทุกคนเห็นได้

แบบที่ 2: ใช้ไฟล์ .env.local (Next.js ต่ำกว่า 9.4)

วิธีนี้ใช้ไฟล์ .env.local เก็บค่า Environment variables และใช้ dotenv อ่านค่าเหล่านั้นใน Next.js

ก่อนอื่นติดตั้ง dotenv

npm install dotenv

สร้างไฟล์ .env.local ที่ root ของโปรเจ็ค

APP_NAME=memo8
API_URL=https://api.example.com
SECRET_KEY=my-secret-key

จากนั้นในไฟล์ next.config.js ให้ require dotenv และเรียกใช้ .config()

// next.config.js
require('dotenv').config()

module.exports = {
  env: {
    appName: process.env.APP_NAME,
    apiUrl: process.env.API_URL,
    // ระวัง: secret key ที่ใส่ใน env object จะถูกส่งไป Client ด้วย
  },
}

อย่าลืมเพิ่ม .env.local ลงใน .gitignore เพื่อไม่ให้ไฟล์นี้ถูก Commit ขึ้น Git

# .gitignore
.env.local

แบบที่ 3: Next.js 9.4+ รองรับ .env โดยตรง

ตั้งแต่ Next.js เวอร์ชั่น 9.4 ขึ้นไป ได้เพิ่มการรองรับการโหลดไฟล์ .env โดยไม่ต้องติดตั้ง dotenv เพิ่มเติม เพียงแค่สร้างไฟล์ .env.local

APP_NAME=memo8
API_URL=https://api.example.com
SECRET_KEY=my-secret-key

ค่าที่กำหนดใน .env.local จะสามารถเรียกใช้ได้ใน Server-side code (getServerSideProps, getStaticProps, API Routes) ผ่าน process.env ได้เลย

// pages/api/hello.js
export default function handler(req, res) {
  res.json({ secretKey: process.env.SECRET_KEY })  // ใช้ได้ฝั่ง Server
}

เผยแพร่ค่าไปยัง Client ด้วย NEXT_PUBLIC_

ถ้าต้องการให้ค่าจาก .env ถูกส่งไปยัง Client ด้วย ให้ตั้งชื่อตัวแปรขึ้นต้นด้วย NEXT_PUBLIC_

NEXT_PUBLIC_APP_NAME=memo8
NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_KEY=my-secret-key  # ค่านี้จะใช้ได้ฝั่ง Server เท่านั้น

จากนั้นเรียกใช้ใน Component ฝั่ง Client ได้เลย

export default function Home() {
  return (
    <div>
      <h1>Welcome to {process.env.NEXT_PUBLIC_APP_NAME}</h1>
    </div>
  )
}

ไฟล์ .env ที่ Next.js รองรับ

Next.js 9.4+ รองรับไฟล์ .env หลายรูปแบบตามลำดับความสำคัญ

สรุป

• ค่าที่ไม่เป็นความลับ: ใส่ใน next.config.js หรือขึ้นต้นด้วย NEXT_PUBLIC_
• ค่าที่เป็นความลับ: ใส่ใน .env.local โดยไม่มี prefix NEXT_PUBLIC_ จะใช้ได้ฝั่ง Server เท่านั้น
• Next.js 9.4+ ไม่ต้องติดตั้ง dotenv เพิ่มแล้ว