Fix all deploy button URLs in the Next.js repo to follow the following format: ``` https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/<EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME> ``` The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button. Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs. --- For example, for the `hello-world` example: The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world And the deploy button looks like this: [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world) --- For reference, I used the following regexes to search for the incorrect URLs ``` \(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.*)\) \(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/([^&]*)(.*)\) \(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.*)\) https://vercel.com/import/git https://vercel.com/import/select-scope https://vercel.com/import https://vercel.com/new/project ```
3.2 KiB
Using multiple zones
With Next.js you can use multiple apps as a single app using its multi-zones feature. This is an example showing how to use it.
- All pages should be unique across zones. For example, the
home
app should not have apages/blog/index.js
page. - The
home
app is the main app and therefore it includes the rewrites that map to theblog
app in next.config.js - The
blog
app setsbasePath
to/blog
so that generated pages, Next.js assets and public assets are within the/blog
subfolder.
How to use
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example with-zones with-zones-app
# or
yarn create next-app --example with-zones with-zones-app
With multi zones you have multiple Next.js apps over a single app, therefore every app has its own dependencies and it runs independently.
To start the /home
run the following commands from the root directory:
cd home
npm install && npm run dev
# or
cd home
yarn && yarn dev
The /home
app should be up and running in http://localhost:3000!
Starting the /blog
app follows a very similar process. In a new terminal, run the following commands from the root directory :
cd blog
npm install && npm run dev
# or
cd blog
yarn && yarn dev
The blog
app should be up and running in http://localhost:4000!
Deploy on Vercel
You can deploy this app to the cloud with Vercel (Documentation).
Deploy Your Local Project
To deploy the apps to Vercel, we'll use monorepos support to create a new project for each app.
To get started, push the example to GitHub/GitLab/Bitbucket and import your repo to Vercel. We're not interested in the root directory, so make sure to select the blog
directory (do not start with home
):
Click continue and finish the import process. After that's done copy the domain URL that was assigned to your project, paste it on home/.env
, and push the change to your repo:
# Replace this URL with the URL of your blog app
BLOG_URL="https://with-zones-blog.vercel.app"
Now we'll go over the import flow again using the same repo but this time select the home
directory instead:
With the home
app deployed you should now be able to see both apps running under the same domain!
Any future commits to the repo will trigger a deployment to the connected Vercel projects. See the blog post about monorepos to learn more.