Next.js ไม่อัปเดต? วิธีล้างแคชและ Build โปรเจกต์ใหม่

บทความนี้จะพาไปดูขั้นตอนการล้างแคชและ build โปรเจกต์ใหม่ให้แน่ใจว่า Next.js ใช้โค้ดล่าสุดจริง ๆ

🔍 ทำไมต้องล้างแคชใน Next.js?

Next.js มีระบบการแคชเพื่อเพิ่มประสิทธิภาพ เช่น การแคชของ

• Static files (.next/ directory)
• Server-side rendered pages
• Client-side assets
• Output จากการ build ก่อนหน้า

แคชเหล่านี้ช่วยให้แอปรันเร็วขึ้น แต่อาจทำให้เกิดปัญหาเมื่อเราเปลี่ยนแปลงโค้ดหรือการตั้งค่าแล้วผลไม่อัปเดตตามที่คาด

🧹 ขั้นตอนการล้างแคชและ build ใหม่

1. ลบไดเรกทอรี .next นี่คือโฟลเดอร์หลักที่ Next.js ใช้เก็บแคชและผลลัพธ์จากการ build

rm -rf .next

หรือบน Windows:

rd /s /q .next

2. ลบ node_modules และ package-lock.json หรือ yarn.lock

rm -rf node_modules package-json.lock #สำหรับ npm
rm -rf node_modules yarn.lock #สำหรับ yarn

หรือบน Windows

#สำหรับ npm
rd /s /q node_modules
del package-lock.json

#สำหรับ yarn
rd /s /q node_modules
del yarn.lock

3. build โปรเจกต์ใหม่ หลังจากล้างแคชแล้วให้สั่ง build โปรเจกต์ใหม่

npm run build #สำหรับ npm
yarn run build #สำหรับ yarn

หลังจาก build เสร็จให้ทดสอบด้วย

npm run start #สำหรับ npm
yarn run start #สำหรับ yarn

4. ทดสอบว่าทุกอย่างอัปเดตแล้ว

• เช่น ลองเพิ่มข้อความหรือเปลี่ยนสีดู แล้วสังเกตผลลัพธ์
• ตรวจสอบด้วย Developer Tools ว่า assets ถูกโหลดใหม่

⚙️ ปิด Webpack cache ผ่าน next.config.js

สามารถปรับแต่ง webpack ใน next.config.js เพื่อปิดการ cache ได้แบบนี้

module.exports = {
  webpack: (config, { isServer }) => {
    config.cache = false; // ปิด Webpack caching
    return config;
  },
};

⚠️ การทำแบบนี้อาจทำให้ build ช้าขึ้น เพราะ Webpack ต้องทำทุกอย่างใหม่หมดทุกครั้ง

สรุป

การล้างแคชใน Next.js เป็นขั้นตอนสำคัญเมื่อคุณพบปัญหาแอปไม่แสดงผลลัพธ์ล่าสุด การลบ .next, ติดตั้ง dependencies ใหม่ และ rebuild โปรเจกต์จะช่วยให้มั่นใจว่าแอปของคุณสะอาดและพร้อมแสดงผลลัพธ์จากโค้ดปัจจุบัน 100%