Share React Components in Next.js Applications with Nx Workspace Libraries
When developing with an Nx monorepo it is highly suggested to develop your main logic inside so-called Nx workspace libraries. That allows you to develop components in isolation (e.g. with Storybook), leads to a better API and decoupling overall and facilitates reuse across various applications.
In this lesson, we learn about how to easily share a component that has been previously developed within an Nx workspace library with our Next.js-based application.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] With Storybook set up on our shared-ui library, we can develop all of our components independently and in isolation. Which gives us a very nice developer experience, in the sense that we can here go and change the properties of our component, and explore different variations of it as we develop, but also as a documentation afterwards.
[0:20] Ultimately, what we want to do is embed these components in our various applications. Right now, we only have our Site application, which is the Next.js base application up here. We can go ahead and create a new page here and actually use the component.
[0:34] Let me use an Nx generator from the Next package. Let me call a new page component, with the name, Topics. The project here where I want to add it, is our site project, which is the one here. We want to use CSS for that component. We get a new page here, which now we should be able to serve. Let's serve our Next.js application. We, again, want to use the TAILWIND_MODE=watch, to make sure that JIT mode works properly. By going to localhost:4200/topics, we should see our new Topics page.
[1:11] Let's import our new shared component there. First of all, at the very top, we can import the component from that new yuri/dev, which is the main npm scope of our Nx workspace here. We have the shared-ui, and that should expose now such a Topic button, which I can now just include. Let's give it a topic-name = nextjs. Let's also add some class dup here to make it look a bit nicer.
[1:40] If you then go to our application, we see that Topic button nicely renders. The image, for some reason, doesn't display. If we look here, it looks like there is an error loading some resource. The main reason for that is that in the Next.js config here, in Nx, the SVGR support is disabled by default. Let's enable this here. There's some more details here if you want to look that up.
[2:07] Once we save this and set this to true, let's restart our application, and now if you go to application, we see the Topic button nicely visualized, also with according logo. You can see how easy it was to actually first develop the component independently, and then import it into our Topics page, by directly using this npm scope here and pulling in the button.
[2:31] Just as easy, we could use the same button in a different application that might live in the future, here in our apps folders, say, a React application, where we also want to use that Topic button.