Question on potential shared dependencies

[mark-voltacharging]

This is great, thank you for doing this! I might be using this as a guide line for building a monorepo at my company, but I have a question about dependencies themselves; why does each package carry its dependencies in its own package.json? Why not share them across all packages? That way they all can use the same version of Next, React etc. the same way they share devDependencies across packages. Is this possible to do? So if this monorepo gets to be 6-8 apps, you wouldn't need to manage the dependencies individually

[cpv123]

Hey @mark-voltacharging - I actually agree with what you're suggesting, and that's the approach I have taken in a few projects now. I have updated this repo to also share dependencies across projects 👍

Basically, you can just import shared dependencies into the root package.json and everything should work fine. I've only ever experienced one problem with this approach, which was when trying to deploy a Nextjs application onto AWS Amplify - the deployment required that next was a dependency within the package itself (because Amplify's support for Next.js + monorepos is not great). But if you're deploying to Vercel/Netlify/most others then you should have no problems at all.

If you're just getting started, it might be worth also taking a look at the Turborepo demo application which is also a "Nextjs monorepo". The method of sharing code is actually the exact same as what's done in this repo, but Turborepo also has some nice ideas about how you might want to share other things like tsconfig etc.

The final thing I'll mention is about importing code from the "shared" package. In this repo I'm importing as

import { SharedButton } from "shared"

but I've come to realise that this isn't optimal because you'll end up bundling code from your entire shared package (next-bundle-analyzer showed me this). Better is to import directly from the shared code:

import { SharedButton } from "shared/src/components/Button"

and then you're sure to only bundle the button component. And you could even configure an alias in tsconfig to make this import path a bit shorter if you want. I've updated this repo to match!