Found a change in next.config.js. Restart the server to see the changes in effect
Tags: nextjs, react, node, webdev
Published: 2022-01-30 09:30:33


---
canonical_url: https://dpnkr.in/blog/nextjs-config
description: Understanding how Next.js prints this message from its source code.
---

For much better experience read this from the [original blog](https://dpnkr.in/blog/nextjs-config)

```bash
event - compiled successfully in 9.2s (227 modules)
wait  - compiling /...
event - compiled successfully in 782 ms (307 modules)

> Found a change in next.config.js. Restart the server to see the changes in effect.
```

Looks Familiar? If you're next.js developer there's a good chance that you have encountered this message in the terminal on changing the `next.config.js`.

So what is this blogpost even around?

I was curious to know how does next.js knows that I have modified the file, to start my expedition I just dived into the [Next.js source code](https://github.com/vercel/next.js) and saw the implementation.

The implementation is pretty simple, let's try to build something similar to it. So let's begin by creating a `next.config.js` and `watch.js` inside a directory.

Next.js uses [`watchFile`](https://nodejs.org/api/fs.html#fswatchfilefilename-options-listener) to listen for file changes, the interface of `fs.watchFile` is as follows:

> ```js
> fs.watchFile(filename[, options], listener)
> ```
> Watches for changes on `filename`. The callback `listener` will be called each time the file is accessed. The listener gets two arguments the current stat object and the previous stat, these are of the type `Stats`
> `fs.Stats` object provides information about a file. You can refer to the entire interface [here](https://nodejs.org/api/fs.html#class-fsstats). We will be using the `size` property which returns the size of the file in bytes helping us to identify if the file was modified or not.


Let's create a dummy config file.

```js
const config = {
  name: 'Deepankar',
  age: 20,
};
```

And then the watcher implementation, which would call the listener function based on the size stats. The greater than 0 check makes sure that the file isn't deleted.

```js
const { watchFile } = require('fs');
const configFile = `next.config.js`;

watchFile(`${process.cwd()}/${configFile}`, (cur, prev) => {
  if (cur.size > 0 || prev.size > 0) {
    console.log(
      `\n> Found a change in ${configFile}. Restart the server to see the changes in effect.`
    );
  }
});
```

Now run `node watch.js` and modify the file and voila!


![Next config demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y63q8smqi32wuhfv4yai.gif)

So yeah it was pretty simple but I love to understand how things work behind the scenes. here's that part from [next.js source code](https://github.com/vercel/next.js/blob/3ad2035ae6ab16361b5fd65706de444e73822bbf/packages/next/bin/next.ts#L122).

```ts
if (command === 'dev') {
  const { CONFIG_FILES } = require('../shared/lib/constants')
  const { watchFile } = require('fs')

  for (const CONFIG_FILE of CONFIG_FILES) {
    watchFile(`${process.cwd()}/${CONFIG_FILE}`, (cur: any, prev: any) => {
      if (cur.size > 0 || prev.size > 0) {
        console.log(
          `\n> Found a change in ${CONFIG_FILE}. Restart the server to see the changes in effect.`
        )
      }
    })
  }
}
```

Next.js loops over the `CONFIG_FILES` which are basically `['next.config.js', 'next.config.mjs']` depending on if you're using the ES6/CJS flavour. The rest of the code is exactly how we did it.

That's it! As much as I loved writing this blog, I hope you folks found this interesting too. There are gonna more such "Next.js deep dive" blogs coming up soon so stay tuned and follow me on [Twitter](https://twitter.com/DeepankarBhade) for updates.