Next.js: Zones with Custom Server

Created on 30 Jun 2018  路  3Comments  路  Source: vercel/next.js

I am using zones for an application I am working on and it works great until I attempt to use a custom server so I can do custom routing. You can easily reproduce this problem by cloning the with-zones example project and using a custom server in either of the applications.

You will get a 404 error for any page/route you setup under the custom server zone. I've encountered this issue in nginx and micro.

It looks like a problem with next bundling? The .next folder is being ejected under the project root instead of the zone application root. Has anyone else encountered this? Possible workarounds? Thanks.

Most helpful comment

For anyone else having trouble with zones and custom server, keep this in mind:

  • "npm install" is technically required for each zone. node will look up the file tree for missing dependencies and the with-zones-app example seems to work without doing npm install on each zone without custom server but you will start to have errors with custom server.
  • Each "zone" is just a normal next.js project that knows nothing about other zones. Zone really isn't a next.js feature at all...NOW provides a convenient way of aggregating multiple next.js projects under same domain name, but there is no next.js magic for "zone" feature. The micro-proxy is really the secret sauce of "zone" feature. I don't mean to diminish how amazing the NOW zones feature is, just as a new user it is important to clarify that I think the docs imply there is more next.js side logic when it comes to zones than there actually is.
  • Don't try to run custom server from the parent directory like this " node blog/server.js". This will appear to work more than it should but give you 404 for reasons beyond my current understanding. Instead, if you want to start a zone from parent directory, run this "npm run --prefix blog start" where start in blog/package.json is something like "PORT=5000 node server.js". The magic is the --prefix which runs npm commands from package.json in that directory.

I am very new to next/node so take everything with caution but it seems to be working. Also...and I am sure this could be improved but in my ignorance here are some convenience methods I put together to install/start zones in parallel from the parent example directory:

{
"name": "with-zones",
"version": "1.0.0",
"scripts": {
"installTask": "npm install",
"installHome": "npm run --prefix home installTask",
"installBlog": "npm run --prefix blog installTask",
"installParallel": "npm-run-all --parallel installTask installHome installBlog",
"home-start": "npm run --prefix home start",
"blog-start": "npm run --prefix blog start",
"buildParallel": "npm-run-all --parallel home-build blog-build",
"proxy-dev": "npm run micro-proxy -p 9000 -r rules-dev.json",
"start-dev": "npm-run-all --parallel blog-start home-start proxy-dev",
},
"dependencies": {
"npm-run-all": "^4.1.3",
...
}
}

(I believe the with-zones example should be updated to start with a custom server to avoid noob confusion and will get around to that someday when I learn more about this if no one else beats me to it)

All 3 comments

The .next folder is being ejected under the project root instead of the zone application root.

I'm not sure what you mean by this, can you give an example?

You will get a 404 error for any page/route you setup under the custom server zone. I've encountered this issue in nginx and micro.

At ZEIT we run multiple custom servers in zones, which works fine when correctly configured (assetPrefix)

Also, this should actually be posted on spectrum.chat/next-js, as it's a question, please follow the issue template next time.

For anyone else having trouble with zones and custom server, keep this in mind:

  • "npm install" is technically required for each zone. node will look up the file tree for missing dependencies and the with-zones-app example seems to work without doing npm install on each zone without custom server but you will start to have errors with custom server.
  • Each "zone" is just a normal next.js project that knows nothing about other zones. Zone really isn't a next.js feature at all...NOW provides a convenient way of aggregating multiple next.js projects under same domain name, but there is no next.js magic for "zone" feature. The micro-proxy is really the secret sauce of "zone" feature. I don't mean to diminish how amazing the NOW zones feature is, just as a new user it is important to clarify that I think the docs imply there is more next.js side logic when it comes to zones than there actually is.
  • Don't try to run custom server from the parent directory like this " node blog/server.js". This will appear to work more than it should but give you 404 for reasons beyond my current understanding. Instead, if you want to start a zone from parent directory, run this "npm run --prefix blog start" where start in blog/package.json is something like "PORT=5000 node server.js". The magic is the --prefix which runs npm commands from package.json in that directory.

I am very new to next/node so take everything with caution but it seems to be working. Also...and I am sure this could be improved but in my ignorance here are some convenience methods I put together to install/start zones in parallel from the parent example directory:

{
"name": "with-zones",
"version": "1.0.0",
"scripts": {
"installTask": "npm install",
"installHome": "npm run --prefix home installTask",
"installBlog": "npm run --prefix blog installTask",
"installParallel": "npm-run-all --parallel installTask installHome installBlog",
"home-start": "npm run --prefix home start",
"blog-start": "npm run --prefix blog start",
"buildParallel": "npm-run-all --parallel home-build blog-build",
"proxy-dev": "npm run micro-proxy -p 9000 -r rules-dev.json",
"start-dev": "npm-run-all --parallel blog-start home-start proxy-dev",
},
"dependencies": {
"npm-run-all": "^4.1.3",
...
}
}

(I believe the with-zones example should be updated to start with a custom server to avoid noob confusion and will get around to that someday when I learn more about this if no one else beats me to it)

Thank you for the info! I smashed my head against the wall trying to get it to work but ultimately decided I had wasted enough time trying to squeeze a little bit of efficiency out of it. I haven't worked with NEXT in a bit but I will give this a shot and see if it works.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

olifante picture olifante  路  3Comments

irrigator picture irrigator  路  3Comments

havefive picture havefive  路  3Comments

formula349 picture formula349  路  3Comments

swrdfish picture swrdfish  路  3Comments