How to automatically restart Next.js app after an update in another library?

Question

I have a monorepo with two apps:

• The web app (Next.js)
• The UI library (Tailwind, which uses Microbundle)

The only way I managed to make the web app see the changes I make to the UI library is by:

• Making the changes
• Rebuild the UI library (in this case, I'm using microbundle watch)
• Manually restart the Next.js server

My question is: how can I automatically restart the Next.js server every time the files within ui/dist are recreated (because they are rebuilt every time a change is made)?

Answer 1

You can use nodemon to watch any files and restart a node app, the Next.js app in this instance, when they're modified.

First, create a nodemon.json file in the Next.js project folder with the following contents, replacing the path to your ui/dist folder accordingly.

{   
    "ignore": ["node_modules", ".next"],
    "watch": ["path-to/ui/dist/**/*"],
    "ext": "js json",
    "exec": "next dev"
}

Then, you'll have to replace your dev script to run nodemon instead.

"scripts": {
    "dev": "nodemon",
    ...
}