next-stitch

Stitches together multiple Next.js apps.

Quick start

Prepare your child Next.js app

npm install --save-dev next-stitch
next-stitch prepare pages
npm publish

Install your package in your parent Next.js app
```
npm install @my-org/prepared-child-package
```
Create a .stitchrc.json file, so we know which packages to stitch
```
{
  "packages": ["@my-org/prepared-child-package"]
}
```

Stitch everything together and celebrate

npm install --save-dev next-stitch
next-stitch stitch
next

Why do I want to do this?

Scaling the development of a Next.js application across multiple teams can be difficult, one approach is to host multiple apps however this adds operational overhead and you lose the ability to maintain client-side state easily as users navigate around your app.

next-stitch allows teams to own a Next.js application that serves just their pages and then have this stitched into a larger shell application at build time. Everything ends up as one big app, so client-side state is maintained during page transitions - unlike if you were hosting multiple seperate apps.

These apps run just like regular Next.js apps, so the great developer experience that Next offers is maintained. You can still use all of the features of Next.js, including ISR and static generation.

Check out /example and /example-shell for a very brief demo.

Caveats

SASS and CSS imports (including modules) do work, but you'll need to include the entire bundle in a custom component. Depending on the amount of CSS you have this could result in loading a lot of unused CSS on each page.

Roadmap

Add support for public folder for images and other static content

License