Create a Next.js Web Application with Nx
The first step to getting started with Nx is to create a workspace.
In this lesson, we're going to walk step by step through generating a new Nx workspace using npx create-nx-workspace command. Next, we'll choose a preset during the Nx setup process which allows us to also generate a brand new Next.js application within our Nx workspace as well. Finally, we'll learn about what got generated for us and the anatomy of an Nx workspace.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] To get started, unless you already have an Nx workspace, you definitely want to create one. We can use npx create-nx-workspace.
[0:09] We give it a name and that's the organization name usually. Since I'm rebuilding my web platform or my portfolio page, which is hosted on Yuri.dev, I figured I'm going to ask yuri.dev directly. Then I'm also going to give it my package manager.
[0:26] I'm using yarn here because I prefer it. You could also go with npm or pnpm, which would work just as fine. During the installation process, you will get asked a couple questions. You could start with a default empty workspace or you could choose among one of these presets.
[0:44] This is highly recommended. If you already know what you're going to build mainly within that work space, these presets would already make sure that you're set up property rather than you having to install the plugins individually as you go.
[0:58] We know we're going to build a Next.js middy. This will obviously also come with React built-in so I'm choosing Next.js here. The next question that create-nx-workspace procedure asks me about the name of the first application, which it is going to generate by default.
[1:13] Since what I'm going to build here is my main website, let's just call it site for now, the lack of a better name. We'll go with pure CSS for now. Also, Nx Cloud is totally free so I can go and enable that for now. This will help me get some faster builds later on.
[1:31] Then let's have the installation process going. All right. Once installation finishes, you see a couple of links, which might be useful for exploring some things further. There's also some indication here of the Nx Cloud that has been enabled for this workspace.
[1:45] We could explore this at this URL, but that's something we will do later. For now, let's just open up our newly created Nx workspace. Let me open it up in Visual Studio code. Let's explore what has been created for us here.
[1:58] What might immediately jump to your eyes is that now we have here in apps and libs folder, which is particular to the set up of an Nx workspace. Libs four is currently still empty and we will fill that up as we go ahead in the lessons of building up my personal portfolio page.
[2:14] The apps folder already has a project in there, and that's the project which we mentioned initially during the setup process. This is our site project, our site application, which is a fully functional Next.js app.
[2:25] Furthermore, we have here a set up and a train test setup based on Cyprus, which is already wired in a way that allows me to easily test my site application here. Other things that are particular to Nx is the workspace.json.
[2:40] The workspace.json contains the metadata for our workspace. You can see there is the very top level node where you have basically the project. There's some CLI specific settings. There's some generator settings. We will explore that as well. There's the default project.
[2:56] All the commands that don't have a project will automatically jump to this default project, which allows us to spin it up much more easily. If you open up a one project node, we see it simply describes where that project sits in our workspace.
[3:11] What a source root folder is. What a project type is. In this case, it's an application, but it might be as well as a library which we'll see later. Then we have the targets part here, which contains basically all the different tasks which you might execute for our application.
[3:29] If I would want to serve my Next.js application, what I can do is I can open up the terminal, type yarn. I prefix it with yarn or npx to use basically the local version of the globally installed binary of my Nx workspace.
[3:42] Adding yarn the project name, which in our case here is site: and the target I want to invoke. In this case, serve. What this will do, is it will automatically spin up my Next.js application and launch it at a specific port.
[4:04] If I switch over to web application, you can see on port four tag 200, we have our site application on Next.js based application running. We can also shortcut these and instead of having yarn Nx run project name and the target, we can also put the target directly.
[4:21] I could say, serve site, which is my project name again, or simply just Nxserve, which retrieves the default project which again is my site project up here.
[4:32] If you have Nx console installed in your Visual Studio code workspace here, you see that icon and that also adds those code lens commands direct into my workspace.json. I could simply also just click that button here, which would simply also serve up my site just as we did before.