Next.js: Documentation's Multi Zones example bugs on SSR

[paulgaumer]

Bug report

I was having routing issues in my application after implementing Multi Zones. I went back to the docs' example and noticed the bug was also there.

I hosted it on Now using the exact same example as the docs:
https://github.com/zeit/next.js/tree/canary/examples/with-zones

I'm not savvy enough to understand the origin of the bug. Where is this coming from?

Describe the bug

Visiting the link https://test-paul-with-zones-app.now.sh/blog/post/1 fails when request from the browser. It works only when navigating to it client-side (Next Link)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to 'https://test-paul-with-zones-app.now.sh/blog/post/1'
2. See a 404 page
3. Go to https://test-paul-with-zones-app.now.sh/blog
4. Click on Post 1
5. The page shows correctly

Expected behavior

The page should load and not show a 404

[zephraph]

This is the same thing we're seeing w/ one of our apps.

We have a route that's /team/member/[member]. So we might have a Link component like <Link href="/team/member/[member] as="/team/member/john_doe"/>. When we try to navigate to /team/member/john_doe there's a 404. It's important to note that that route is server side rendered with getServerSideProps.

We _can_ navigate to /team/member/[member]?member=john_doe however. Locally it works, it's just when it's deployed to Vercel it breaks down. It's like the route redirect isn't being automatically registered.

The only routes we have for that app in our now.json are:

    {
      "src": "/team/_next/(.*)/pages/team/(.*)",
      "dest": "apps/team/_next/$1/pages/$2"
    },
    { "src": "/team(.*)", "dest": "apps/team/$1" },

Until there's a fix I'm considering either swizzling all the links to dynamic pages to be the [member] format _or_ trying to auto generate redirects somehow? It's non-ideal to be sure. It might just be easier to self host w/ a custom server.

[paulgaumer]

I moved everything back to one big app, but having a fix would be great indeed!

[kbtganesh]

Same here.. Explained the issue in simple words as per my understanding.

Dynamic Routing along with SSR (getServerSideProps) returns 404 when deployed in Vercel but works fine in local. It is requesting for [slug].json in the DevTool -> Networks tab which will only happen in when statically exported (I believe).

Done the routing exactly how they mentioned in Documentation.

Below are the things I've observed

• Pages with SSR without dyanmic routing works fine but doesn't trigger API in real time. It uses the response got while building the application. Hence, not realtime.
• Pages with both Dynamic Routing & SSR is returning 404 after deployment in Vercel. Kindly address this issue.

[zephraph]

I reached out to Vercel support on this issue. The official response was

We highly recommend that you use Zero Config if you can. Yes, breaking the dynamic routes when you have "builds" or "routes" is expected since you need to define those explicitly. That is also one of the reasons why "rewrites" should be used instead of "routes".

Unless there was a miscommunication/misunderstanding it seems like this may explicitly be not supported. If you want to do multi-zone style apps self hosting with a custom server seems likely your best bet.

I think it'd be possible to monkey patch a solution together by dynamically generating a route or rewrite map based on your dynamic routes if you're really intent on using vercel. It'd be tricky, but it's probably doable.

For those following along, I have smaller repro here: https://github.com/zephraph/next-now-ssr-issue.

[kbtganesh]

Hi @zephraph, what does they mean by Zero Config? Can you confirm what command we should put in Vercel while deployment next build && next export OR next start for SSR + Dynamic Route Pages.

[paulgaumer]

Thanks @zephraph !
Kinda tough to self-host... Have you guys explored alternative solutions for this use case? I know Netlify can host a NextJS project and mentions reverse proxy in their docs

[zephraph]

@paulgaumer one alternative could be to treat your project kind of like a mono-repo and have multiple separate deployments in that one repo.

You’d have to do deployments via the now cli for each project in your own CI setup.

Kinda does have some benefits though. You could deploy only what has changed and each project could have some individual configuration. Kinda depends on what your Vercel paid package is and how many deployments/etc you can support.

[zephraph]

@kbtganesh for Vercel deployments you'd want to use next build. You don't need to do next export as far as I'm aware.

[lfades]

Hello there, can someone go over the example again and see if it fails? it received some updates and should be working as expected now!

[mabadir]

Hello there, can someone go over the example again and see if it fails? it received some updates and should be working as expected now!

Hi, I am on the latest Next.js version and hosted on Vercel. Still having this issue. I opened a support request, and still waiting for the response.

Just to add more context, the issue happens with pages hosted under the main App, the other app works fine. For example, App A has pages under / and App B under /blog. All routes under App B works ok, while only the main index page works for App A.

[lfades]

@mabadir Please check out the new version of the example that uses vercel dev instead of next dev, that issue should be non existing anymore.

[mabadir]

Yes, that's what I am doing. Actually running vercel dev throws an error. The only way I managed to run the app, is by building it on vercel.

Vercel CLI 19.1.1 dev (beta) — https://vercel.com/feedback
> Running Dev Command “next dev --port $PORT”
ready - started server on http://localhost:3000
Error: > Couldn't find a `pages` directory. Please create one under the project root

[mabadir]

For those facing the same problem, I figured out that the problem is related to how I set up the project on Vercel itself.
I initially had both apps as one monolithic app, then I split it into two different apps. I kept using the same Vercel project ==> and this is the problem.
I had to go to Vercel and change the Project Setting framework to Other instead of Next.js.

[mabadir]

@lfades Hey Luis, I think the option is now working fine, and I got it fixed.
My only concern that if you have links on app A references app B, and I click any of those links. For a brief second I get a console error that it tries to preload the JS for this page, but it tries to load it under the static path of app A.

[zephraph]

Okay @lfades I gave this a go on my small repo example: https://github.com/zephraph/next-now-ssr-issue

I thought it was fixed, but alas there's one more issue. It works like a dream with vercel dev. When it's deployed it _almost_ works (it doesn't 404 which is an improvement) but it's still not getting params.

I added a console.log just to check the context object (here's the logs), but query and params are both empty.

Try this out: https://next-now-ssr-issue.zephraph.vercel.app/next/123

It should print Your post id is 123 but instead it prints Your post id is.

[mabadir]

I can confirm this behaviour that @zephraph mentioned. The router.query is an empty object.

[lfades]

@zephraph I'll take a look at your demo and see why it doesn't work.

Is the current example broken too?

[mabadir]

@lfades I believe the problem that Next.js is still considering the pages on the root level pages/blog/[slug] while, it should be on blog/pages/blog/[slug].

Here is the error I am getting

Error: The provided `as` value (/app/leads/a642515a-a12c-4314-bfe7-7d557d8571c9) is incompatible with the `href` value (/leads/[id]). Read more: https://err.sh/vercel/next.js/incompatible-href-as

So it can't match the URL and query parameters to the component. I am not sure if that makes sense.

[zephraph]

@lfades, yeah, master of my example repo is still broken. I need to update the readme again because I thought it was fixed (when I only tested in dev).

[GxDesign]

It would be great to get some documentation on Multi-Zones usage with basePath, and with rewrites since we get warnings that we're being opted out of optimized lambdas for using routes.

For me, Im getting this problem (404 on prod deployment) when I have a dynamic directory: /blogs/[blog_name]/posts

[lfades]

@GxDesign The current example will be migrated to use rewrites instead of routes once a current issue with vercel dev and rewrites is fixed, that should fix the warning you're currently getting. For the moment feel free to continue using routes.

[kylemh]

Any issue/PR we can follow for updates?

[LoicMahieu]

Edit: I found the origin of my issue. It is not related to this issue.

For those who encounter the same issue, it is related to dynamic import from local package. Currently we've removed it waiting a better solution.

---

I was getting the same error, a 404 error for dynamic routes in the nextjs project.
I migrated to use rewrites instead of routes, no more 404 but now I get an error like this:
Cannot find module '../29.409907254363b71b1d51.js'

My now.json:

{
  "name": "my-project",
  "version": 2,
  "builds": [
    {
      "src": "packages/api/src/index.ts",
      "use": "@vercel/node"
    },
    {
      "src": "packages/website/package.json",
      "use": "@vercel/next"
    }
  ],
  "rewrites": [{ "source": "(.*)", "destination": "/packages/website/$1" }]
}

I tried many pattern with the same result. I am tired and upset...

Paths in stacktrace are strange: /var/task/packages/website/packages/website/.next/serverless/pages/index.js. The nextjs project is located packages/website and notice here the double "packages/website/".
So I tried again with routes, with [{ "source": "/(.*)", "destination": "/packages/website/$1" }], with [{ "source": "(.*)", "destination": "/packages/website$1" }] and so much much more...

I'll create a ticket to Vercel and try to get some sleep... Maybe it will help.
Thanks for any help.

Full logs

on.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Function.requireEnsure [as e] (/var/task/packages/website/packages/website/.next/serverless/pages/index.js:54:25)
    at module.exports.gbX9.next_dynamic__WEBPACK_IMPORTED_MODULE_0___default (/var/task/packages/website/packages/website/.next/serverless/pages/index.js:12920:115)
    at LoadableSubscription.load [as _loadFn] (/var/task/node_modules/next/dist/next-server/lib/loadable.js:22:111)
    at LoadableSubscription.retry (/var/task/node_modules/next/dist/next-server/lib/loadable.js:24:1327)
    at new LoadableSubscription (/var/task/node_modules/next/dist/next-server/lib/loadable.js:24:1237)
    at init (/var/task/node_modules/next/dist/next-server/lib/loadable.js:22:1274) code: 'MODULE_NOT_FOUND' }
2020-09-11T23:03:57.778Z    3a179e78-94d2-4997-bbaa-e4d1aa46b180    ERROR   { Error: Cannot find module '../29.409907254363b71b1d51.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Function.requireEnsure [as e] (/var/task/packages/website/packages/website/.next/serverless/pages/index.js:54:25)
    at module.exports.gbX9.next_dynamic__WEBPACK_IMPORTED_MODULE_0___default (/var/task/packages/website/packages/website/.next/serverless/pages/index.js:12920:115)
    at LoadableSubscription.load [as _loadFn] (/var/task/node_modules/next/dist/next-server/lib/loadable.js:22:111)
    at LoadableSubscription.retry (/var/task/node_modules/next/dist/next-server/lib/loadable.js:24:1327)
    at new LoadableSubscription (/var/task/node_modules/next/dist/next-server/lib/loadable.js:24:1237)
    at init (/var/task/node_modules/next/dist/next-server/lib/loadable.js:22:1274) code: 'MODULE_NOT_FOUND' }
2020-09-11T23:03:57.779Z    3a179e78-94d2-4997-bbaa-e4d1aa46b180    ERROR   Unhandled Promise Rejection {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: Cannot find module '../29.409907254363b71b1d51.js'","reason":{"errorType":"Error","errorMessage":"Cannot find module '../29.409907254363b71b1d51.js'","code":"MODULE_NOT_FOUND","stack":["Error: Cannot find module '../29.409907254363b71b1d51.js'","    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)","    at Function.Module._load (internal/modules/cjs/loader.js:562:25)","    at Module.require (internal/modules/cjs/loader.js:692:17)","    at require (internal/modules/cjs/helpers.js:25:18)","    at Function.requireEnsure [as e] (/var/task/packages/website/packages/website/.next/serverless/pages/index.js:54:25)","    at module.exports.gbX9.next_dynamic__WEBPACK_IMPORTED_MODULE_0___default (/var/task/packages/website/packages/website/.next/serverless/pages/index.js:12920:115)","    at LoadableSubscription.load [as _loadFn] (/var/task/node_modules/next/dist/next-server/lib/loadable.js:22:111)","    at LoadableSubscription.retry (/var/task/node_modules/next/dist/next-server/lib/loadable.js:24:1327)","    at new LoadableSubscription (/var/task/node_modules/next/dist/next-server/lib/loadable.js:24:1237)","    at init (/var/task/node_modules/next/dist/next-server/lib/loadable.js:22:1274)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: Error: Cannot find module '../29.409907254363b71b1d51.js'","    at process.on (/var/runtime/index.js:37:15)","    at process.emit (events.js:203:15)","    at emitPromiseRejectionWarnings (internal/process/promises.js:140:18)","    at process._tickCallback (internal/process/next_tick.js:69:34)"]}
Unknown application error occurred

[softmarshmallow]

Updates on this? I'm not able to use multi zone feature at all.