links are broken in dev mode in the with-zones example

[bionicles]

Bug report

Describe the bug

if you straight up clone /examples/with-zones, 'yarn dev' doesn't work in the root directory, so you have to run yarn dev in each zone independently, and then the cross-zone links break

To Reproduce

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

1. yarn create next-app --example with-zones
2. cd $APPNAME
3. yarn && yarn dev fails
4. cd blog && yarn && yarn dev
5. open a new terminal
6. cd path/to/$APPNAME/home && yarn && yarn dev
7. visit localhost:3000 in the browser
8. click the 'blog' link -- it doesn't work because the blog lives on port 4000
9. visit localhost:4000 -- it doesn't work because the blog lives at /blog page

Expected behavior

I expected the 'with zones' example to work like other examples, in that i could just cd into it and run yarn && yarn dev and it would work locally

System information

• OS: ubuntu 18.04
• Browser: chrome
• Version of Next.js: 9.2.1
• Version of Node.js: 14.4.0

Additional context

Thought this could help solve my issue of global styles screwing up my 3d game but unfortunately the local development is a bit wonky. It probably works if deployed, but then we gotta deploy our app for each change locally, just to get cross-zone linking to work.

A much better solution for my use-case would be per-page global styles

[bionicles]

thanks for making nextjs guys! you're the best

[khattakdev]

@lfades , I can write a fix for this

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.