Pengenalan

Next.js adalah framework populer untuk membangun aplikasi React, menawarkan fitur seperti server-side rendering dan pembagian kode yang efisien. Dalam proses pengembangan, Next.js menyediakan fitur hot reload yang nyaman, memungkinkan pengembang melihat perubahan secara instan tanpa perlu menyegarkan secara manual. Artikel ini mengenalkan cara menjalankan perintah selama hot reload di aplikasi Next.js.

Konfigurasi Next.js

Untuk menjalankan perintah selama hot reload di aplikasi Next.js, Anda perlu mengonfigurasi proyek Next.js menggunakan file next.config.js. File ini berfungsi sebagai titik konfigurasi sentral untuk aplikasi Next.js Anda dan memungkinkan Anda untuk mendefinisikan logika kustom selama fase startup dan restart server pengembangan.

Berikut adalah panduan langkah demi langkah dalam mengatur konfigurasi Next.js:

1. Buat file dengan nama next.config.js di direktori utama proyek Next.js Anda jika belum ada.
2. Buka file next.config.js di editor kode yang Anda pilih.
3. Di dalam file tersebut, ekspor objek konfigurasi dengan menugaskannya ke module.exports:

module.exports = {
  // Configuration options will be added here
};

4. Selanjutnya, tambahkan properti webpackDevMiddleware ke objek konfigurasi. Properti ini memungkinkan Anda untuk mendefinisikan logika kustom selama fase startup dan restart server pengembangan:

module.exports = {
  webpackDevMiddleware: (config) => {
    // Custom logic will be added here
    return config;
  },
};

5. Di dalam fungsi webpackDevMiddleware, Anda dapat menambahkan logika kustom, termasuk menjalankan perintah. Untuk menjalankan perintah, Anda dapat menggunakan modul child_process atau metode lain sesuai pilihan Anda. Berikut adalah contoh penggunaan metode child_process.exec:

const { exec } = require('child_process');

module.exports = {
  webpackDevMiddleware: (config) => {
    exec('<Perintah Anda>', (error, stdout, stderr) => {
      if (error) {
        console.error(`Error executing script: ${error}`);
        return;
      }
      console.log(`Script output: ${stdout}`);
      console.error(`Script errors: ${stderr}`);
    });

    return config;
  },
};

Pada contoh di atas, <Perintah Anda> mewakili perintah yang akan dijalankan. Gantilah dengan perintah yang sesuai dan pastikan Anda memberikan jalur yang benar ke skrip Anda.

6. Simpan file next.config.js, dan Next.js akan menjalankan perintah tersebut selama hot reload.