Create a new Next.js Page Component with Nx Generators
One of the powerful aspects of Nx is its generators that allow to easily scaffold new projects, configuration changes and new components. In this lesson we're exploring how to use a Nx built-in generator to scaffold a new Next.js page component which is the one for our portfolio's About page. We also leverage Nx Console to have a visual UI while composing the various options of the generator.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] Now that I have my Nx workspace set up here, as well as my Next application generated, let's explore a bit what we got here. We have an app.tsx, which is basically the main wrapper around my Next.js application.
[0:15] We have already an index.tsx file generated, which uses the CSS modules. As you can see it imports it at the top here. Here we have our actual module page and we have a couple of things pre-generated for us. Let's add a new Next.js page here.
[0:32] When I'm going to my/about of my Next.js app, my About page opens up. Nx has so-called generators for us that allow us to easily create such new pages or components or projects. I will use a couple of those during this course.
[0:48] The best way to do it or the easiest way is to use this Nx console plug-in, which allows us to click generate and it will present us with a set of generators for us.
[0:59] For instance, in our case, we want to create a new page so we just select that page generator, which will ask us for a name, which is now let's call it About. The project we want to generate it in is site. The style is CSS. We leave the directory as is. We don't want to export it. All the other things are just as is.
[1:20] The cool part is also what this will give us here is it will immediately prints out what this would generate. However, it's used at the so-called dry run mode, the dry run flag, which means it doesn't have an effect on actual file system.
[1:33] It just shows what would be created whenever we click that run button. Furthermore, it also shows us the command it uses. We could learn these commands as we go and be much faster by just using our terminal window.
[1:47] For now, let's just click here run, which now creates our new page. In fact, if we go here now into the file system, we see now a new About page is being created, as well as the corresponding CSS module. To serve this site, let's use Nx serve site as we have seen before.
[2:07] This will spin up the Next.js builder behind the scenes and on localhost:4200. We should see our site being rendered. This is the default template of the index.tsx. If we go to About, we see now our About page.