#Multiple Next.js Applications on Same Domain

1 messages · Page 1 of 1 (latest)

terse pasture
#

I have three Next.js applications running with different routes on the same domain. Previously I deployed all three and managed their routing using basePath. How should I do this with the app router?

cosmic riverBOT
#

Hi @terse pasture. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To serve multiple Next.js applications under a single domain using the App Router, you can use a similar approach to the one you used with basePath in the Pages Router. However, instead of basePath, you will use both rewrites and basePath configurations to achieve a Multi Zone project on Vercel.

Here's an example of how you can set it up:

  1. For your main application (let's call it home), include the rewrites configuration mapping to the other applications (let's say app1 and app2) within a next.config.js file. This will direct traffic from certain paths to the corresponding applications.

  2. For app1 and app2, set basePath to /app1 and /app2 respectively in their next.config.js files. This ensures that generated pages, Next.js assets, and public assets are within the /app1 and /app2 subfolders.

  3. Make sure all pages are unique across zones. For example, the home app should not have a pages/app1/index.js page.

You can see a complete example project implementing Multi Zones here (https://github.com/vercel/next.js/tree/canary/examples/with-zones).

Remember, Next.js uses a file-system based router where folders are used to define routes. Each folder represents a route segment that maps to a URL segment. To create a nested route, you can nest folders inside each other.

For more advanced routing patterns, the App Router provides conventions for Parallel Routes and Intercepting Routes. Parallel Routes allow you to simultaneously show two or more pages in the same view that can be navigated independently. Intercepting Routes allow you to intercept a route and show it in the context of another route.