Loading two Next.js apps in the same page
Unanswered
Smalandstövare posted this in #help-forum
SmalandstövareOP
Hello, we have a tight deadline and we trying to load 2 Next.js page in the same web page. This creates conflicts due to both Apps using the same window keywords (next, NEXT_DATA__ ) and so on (see for more info https://github.com/vercel/next.js/issues/8963)
Due to the deadline we were thinking of manually modifying for one of the apps the content of the html scripts returned by Next.js and change those keywords so that they would not clash.
We are having trouble to accomplish that, so I wanted to check with more expert individuals if it makes sense the approach we are taking and if it is feasible?
Thanks
Due to the deadline we were thinking of manually modifying for one of the apps the content of the html scripts returned by Next.js and change those keywords so that they would not clash.
We are having trouble to accomplish that, so I wanted to check with more expert individuals if it makes sense the approach we are taking and if it is feasible?
Thanks
9 Replies
Standard Chinchilla
Why are you trying to load 2 apps on the same web page?
SmalandstövareOP
Because one team developed an app with Next.js and one of our product has Next.js and we need to integrated
Standard Chinchilla
So why not just merge them
SmalandstövareOP
Cause that app will be also present in other products and needs to be decoupled and stand alone
@Smalandstövare Cause that app will be also present in other products and needs to be decoupled and stand alone
Northeast Congo Lion
doesn't seem natively possible or even suggested.
maybe you need to revise your architecture
you could host a project on
subdomain.xxx.com
and have main on xxx.com
subdomain.xxx.com
and have main on xxx.com
Eurasian Woodcock
Hi, you can use module federation where your one repository will become provider and other will be consumers.
This makes it possible to share components across different projects.
https://github.com/module-federation/module-federation-examples/blob/master/nextjs-v13/README.md
This makes it possible to share components across different projects.
https://github.com/module-federation/module-federation-examples/blob/master/nextjs-v13/README.md
And the provider can provide shared components to as many projects