Next.js: Hot-reloading of custom servers

[sedubois]

I think the custom server examples (e.g dynamic routing: https://github.com/zeit/next.js/tree/master/examples/parameterized-routing) don't hot-reload when the server.js itself changes. How is that done? It would be great if the example showed that.

[timneutkens]

I'm guessing it's easiest to do it the usual node server way, with nodemon :smile:

[markthethomas]

I use nodemon for that myself =>

nodemon -w server.js -w src -x env-cmd develop babel-node server.js

[sedubois]

Thanks, that works 🙂

"dev": "nodemon -w server.js server.js"

https://github.com/RelateNow/relate/commit/5b7d8b2299beeebb77d59e0ae97ad9070ae66c1b

[newswim]

note that just doing nodemon server.js sends the process into a tailspin.

[brandones]

It seems like the next dev server modifies source files while serving, which makes it so that nodemon can't watch sources without getting confused. My server went into a tailspin when I tried nodemon -w pages -w components -w server.js server.js. With just nodemon -w server.js server.js I have to manually kill and restart the server in order for it to pick up changes to non-server files.

[jakewies]

Just installed nodemon hoping to get reloading of a custom server routing nextjs apps and ran with nodemon server.js too. Got the tailspin. Def not recommended. Is there a better solution?

[pgsandstrom]

Im not too familiar with nodemon, but for some reason nodemon server.js sent me into a tailspin but nodemon -w server.js server.j worked. I get a redundant compile each swap, but it works.

[jimmylee]

Just so you guys know, you can configure a nodemon.json file in your project root folder:

{
  "verbose": true,
  "ignore": ["node_modules", ".next"],
  "watch": ["server/**/*", "index.js"],
  "ext": "js json"
}

And for those who are using babel-node and presets

nodemon index.js --exec babel-node --presets es2015,stage-1,stage-2,stage-3

However just like @pgsandstrom's suggestion, you won't get a tailspin but you still get the redundant compile each swap. Better than manual server restarting though! 😎

[msmichellegar]

Worked great, thanks @jimmylee 👍

[itaditya]

@timneutkens if I use nodemon with custom server then I loose all the benefits of webpack HMR. And I don't want that. Can I help in some way to make the custom server experience better?

[brainkim]

If you’re still having problems, next.js (on OSX at least) has a habit of touching files in the pages directory, so you have to make nodemon ignore your pages directory as well. next.js handles changes in those files anyways.

[guiihlopes]

@timneutkens if I use nodemon with custom server then I loose all the benefits of webpack HMR. And I don't want that. Can I help in some way to make the custom server experience better?

I'm also facing issues with custom server and webpack HMR... Is there any solution, or nothing yet?

[sergiodxa]

The nodemon example solves the HMR issue. It will only reload the server when the server files change and not the Next app files.

[guiihlopes]

@sergiodxa I'm using nodemon example, but the issue is that when I change something in my client app, the console logs [HMR] bundle rebuilding, but it didn't change anything. Only when I refresh the page...

I inspected what was going on, and I have figure out that if there's any warning from TSlint the HMR not work as expected... 🤔

[glenjamin]

Restarting the server process via nodemon means there'll need to be a fresh client build after the restart, which can take a bit longer than an in-memory refresh.

It is possible to do "hot reloading" of the server code in a few different ways, with varying degrees of reliability - but it's hard to do in the general case.

If there was a middleground between using the built-in next server and the fully custom server where routes could be added via an injection point, it might be possible to support reloading of the custom routes module on the server without restarting the whole process - but if there were any stateful objects in that module then this can be difficult to deal with.

[hutber]

Thanks, that works

"dev": "nodemon -w server.js server.js"

sedubois/relate@5b7d8b2

I wonder if we can use this while moving the pages folder into src/pages too?

[coderafei]

any better solution here?

[matthewhuang-camelot]

Yeah, normally with a default Next.js server running separate from the Node.js API, any server-side changes cause the server to reload and get up and running pretty quick. But with a custom server, you'll trigger a new Next.js build, and your dev site will be inaccessible for much longer.

This has been my biggest pain working with custom servers -- perhaps there's some way to communicate to Next.js to just use the same build it previously outputted? Would that not solve the issues we're having?

[connor-baer]

An alternative solution that was released with Next.js v9 is API routes. They solve many of the use cases for having a custom server in the first place.

[kevlened]

The API routes feature won't work if you need https locally. A few instances when https is useful:

1) If you need to test third-party integrations like https://clearbit.com/ that require an https-protected domain
2) If you want to use the Secure flag for cookies locally
3) If your application uses subdomains (for multi-tenancy), you want to test locally, and your app uses Web Crypto (only supported over https except for localhost)

https://github.com/zeit/next.js/issues/2633#issuecomment-317602742 :

To make it clear.

* We won't have SSL support in the core.
* But anyone can have it via our custom server API. (So, we welcome an example)

[timneutkens]

@kevlened could you write a RFC for that, I'm definitely willing to consider it at this point in time (the comment you're referring to is over 2 years old).

[antgustech]

{
  "verbose": true,
  "ignore": ["node_modules", ".next"],
  "watch": ["server/**/*", "index.js"],
  "ext": "js json"
}

However I configure this file, it only seems to watch the server.js file. What about the /pages folder where I have .jsx files? I've tried this but it has no effect:

{ "verbose": true, "ignore": ["node_modules", ".next"], "watch": ["server/**/*", "index.js", "pages/*"], "ext": "jsx js json" }