Nx + Next.js = ❤

ReactJS 1.0 ReactJS 1.0 Presentation ReactJS 1.0 Presentation 1.0 Dev Developer ReactJS 1.0 Developer 1.0 Presentation 2.0 Developer ReactJS 1.0 Presentation 2.0 Developer ReactJS 1.0 Presentation 2.0 Developer ReactJS 1.0 Presentation 2.0 Developer ReactJS 1.0 Developer 2.0 Developer

Hey everybody, my name is Adam Ellibert, aka Big AB, and I am a core contributor on a project called NX. And today, I'm going to go through a whirlwind tour of a really cool way to do web development. So you've probably already heard of a project called Next.js. It's that cool framework for making Jamstack sites either statically generated or SSR, or that awesome, sweet hybrid approach, well, of the two. But what you haven't probably heard of is NX. And so what is NX? OK, it's basically a suite of dev tools to improve developer experience. And it's a CLI package on npm, so you can do npm install nx. You'll get all these cool commands that you can do to help out your development. It's extensible because it's plugin-based. So you can basically make it do whatever you want, and it's open-source. It's MIT licensed. So if you feel like you want to contribute or you need a fork or something, it's all completely open source. I'm going to show you a bunch of commands that will help out your development that NX gives you. So the first one is create NX workspace. If you're used to create react app, this is really our Create Next app, this is very familiar, this is going to create an NX workspace, which in our world is a monorepo. It's where your organization is going to hold all your applications and all your shared libraries in one space, and that'll really help development. I'll explain why further. Then it's got this NX generate. So the concept of schematics comes from Angular, but NX lets you use it across any framework, including Next.js and React. NX serve is basically like a dev server. And it uses something called builders, also from Angular, but again, sharing out this. And schematics and builders come from plugins, which is sort of the heart of all of what NX does. Then there's an NX build, which is basically taking an application and compiling it into some sort of artifact. NX test is for running whatever unit test runner you have configured, and we have the same thing for end-to-end tests. So now, I said that NX is at the heart of plugins, and we have a lot of them. You can run NX lists, and see a whole list of them. There's official ones, and then there's community ones. And the one I'm going to focus on today is the Next.js plugin for NX. And in just eight commands, I'm going to show you something awesome, and how easy it is to get started to get rolling. If any of these commands scare you, I do want to mention that there is a GUI that you can use, that you don't have to memorize commands.

They're much easier to discover and see what you can do. And it's a plugin for VS code, called NX Console.

So to start off, I'm just going to create an NX workspace. I'm going to say, create npx, create NX workspace, and then the organization name. This could be whatever organization. And again, you're going to have all your applications and your libraries in one place. So name that appropriately.

And then it's going to ask you, oh, what do you want to put the first application there? What kind of application do you want it to be? And I'm going to choose Next.js, because it's awesome. This is going to be, let's just say, my marketing website, or something that's going to be my first application.

Now don't get scared about this thing. I'm going to run all through these, and then I'm going to show you what I made. So these commands are basically just, I'm going to create another application. I'm going to do nxg, which is short for generate. I'm going to use the Next.js plugin to create another app called Uber for Star, because I don't know what I'm making, it's just a demo here. And then I'm going to use the Next.js plugin again to add a page, which is a Next.js concept, to that Uber 4, and I'm going to call it this dashboard.

Then I'm going to create a shared library, which is going to be shared components, which both the marketing site and the Uber 4 Star are going to use. Then I'm going to add some components to that library. Then I'm going to use our storybook plugin to configure storybook for that shared components library to get sort of a design system up and running. And then I'm just going to use NxServe to serve my Uber 4 app. And let me show you what kind of that gives me.

So this is sort of a splash page that you're going to get on here. You'll note we added that dashboard page, so I've got that dashboard page. It's empty now, but it's basically, it's all set up for you. We've got storybook all set up for you. And this is great, storybook has like a ton of things you can add. It's sandbox development for each of the components, as well as like, you can add documentation and a whole design system here. Let me show you some of the code real quick. We've got, you know, here's our workspace. And like I said, there's sort of a split of our products into apps and libs. And apps is your applications, libs is your shared libraries.

We've got that shared components thing in here. And this is where those components live. This is the source code for those components. And in our apps, so we've got our marketing website and our Uber 4 app, you know, whatever that is. But you might also notice here, we've got these end to end directories as well. And these are for writing Cypress test. These are all configured for you're all set up. So you can just start writing end to end tests, which is a great experience in a great way. Mixed with also we have jest for writing unit tests, a fantastic way to work.

And so our Uber 4 app is just like any other X Next.js app that you might expect. It's got pages public, whatever. And in our pages, you can see there's that dashboard page we created and you can have this nested if you're familiar with Next.js. And I just wanted to show you. So we're gonna use these shared components inside our index page here. And the way you import them is just, you know, we're just sort of prefixing them with this scoped. My org, that's what I named the org. You can name it whatever you want. And then just the name of the library. And that's how easy it is to share code across the applications and a breakout code into different shared things.

Now, one of the main parts of an NX repo is the fact that we've got one package Jason in the whole thing. It's at the root. And the reason this is important, is because NX sort of handles all these dependencies for you. And why that's good is because this will protect you from like a whole swath of problems that mono repos can sometimes run into where you've got one project that is lagging behind, it's versions behind, it's hard to update, this department never ever updates. So, there are like six versions behind and it's really frustrating. You sort of get to ignore all that because NX is gonna make sure that everybody's moving together, everybody's upgrading together cause it's one set of dependencies. It also handles that import syntax that I talked about where you can sort of scope it to the org making it really easy to share code. And then because NX handles these dependencies, you get to sort of have a way to sort of compensate for some of the problems that mono repos can have. One major thing is once you get into like hundreds of shared libraries and hundreds of apps, you don't wanna run them all every time you wanna run your tests or wanna run your build. And so what NX does, it's got this thing called computation caching where after you've run a test or a build, it sort of caches the results and puts them somewhere. And now the next time you run that, if it knows that it doesn't have to change because none of this code could possibly affect it, it just hands you back that cash.

It's like, oh, I don't need to change. I don't need to rerun. Here's the results from it, making it super fast. And then we can even take that one step further with an offering we have called NX Cloud, which basically takes those computations and it puts them in the cloud. So if I run a build that takes seven minutes on my machine and then my coworker immediately runs that same build, theirs will be almost instant because it'll just download the result from the cache and display it immediately or put it into the build or whatever it needs to be, super cool stuff.

And so what NX brings to the table is it allows you to sort of easily create these applications with all these commands that are easy and consistent amongst all your teams. It makes extracting shared libraries super easy because everybody is moving together with their dependencies and you can always sort of make sure that you're not gonna break anything by my update because everything's always going together. And the generators, like I said, to save a bunch of time and also keep things consistent and a way to reinforce best practices, both with generators, as well as ESLint rules for one, across all your code bases. It's good stuff and same CLI and stuff. It has all these modern tools, Cypress, Storybook, Prettier ESLint built-in because of the plugins.

And of course, Next.js, because of our Next.js plugin. And our Next.js plugin in particular can create and configure Next.js applications, which is super cool. It serves them in the Next.js dev mode. It can create pages and components and it can build production-ready Next.js apps ready to deploy, as well as, of course, Next.js feature of completely static apps. So if that interests you at all, this was crazy fast, but you wanna learn more, go to nx.dev, the easiest URL in the world to remember and go through one of the tutorials, check out what we can do, and of course, try out our Next.js thing. I'll answer any questions after this.