Monorepo Next.js Setup

[kennetpostigo]

Hi!

I wanted to ask about what the general approach to setting up a StyleX with something like Turborepo and consumption in multiple Next.js applications?

I have a design-system package in my monorepo, that will be consumed by our component library to theme our components. Our component library will then be consumed by our Next.js applications. Currently I see there is a plugin for Next.js, Webpack, Rollup, etc. But i'm a bit unsure about how the best way to author our design-system themes and components for consumption in our Next.js app.

Each of the 2 packages theme and ui will have stylex as a dependency for styling. Our Next.js apps will also have stylex as a dependency for styling but also depend on theme and ui packages. I'm just a bit unsure if there's impact for consumption or what the recommended approach should be.

Should I use rollup to build the theme and ui packages, how should we expose vars, themes, from our themes package for consumption with other packages and Next.js apps?

Is there any monorepo examples that I should reference?

For context I currently use tamagui for our design system, and it provides a build module @tamagui/build purposely built for packaging up a design system as a standalone package that can then be consumed from a next.js application or expo application that is configured with the tamagui babel plugin. Here is a reference to their documentation: https://tamagui.dev/docs/guides/design-systems

[nmn]

The StyleX repo itself is an example of how to setup a monorepo. The nextjs-example app is part of a monorepo and depends on another pacakge @stylexjs/open-props in the mono repo.

You should be able to use the same setup for your use-case. The only difference being that your next.config.js will contain:

transpilePackages: ['theme', 'ui'],

---

The final moving piece here is turbo repo. Our NextJS setup has some issues which we are working to fix so caching between builds cannot be currently used. We use prebuild and predev scripts to delete generated files before dev and build runs. If you do the same, turborepo should work as expected outside of that as it is only an orchestration tool for running scripts in parallel.