In this blog post series, I am going to explore the features that NX workspace provides.
I will build a simple Next JS web app with Tailwind CSS styling within the Nx workspace.
Also, if you like reactive libraries like me, you can check my first impressions about SolidJS.
What is Nx workspace?
NX Framework is an advanced set of extensible dev tools for mono repositories, with a strong emphasis on modern full-stack web technologies.
1) Setup NextJS in Nx
1.1) See the available Nx plugins
You can see all of the available plugins with
nx list command
Now, install the Next plugin and see its options.
1.3) See the available Nx Next.JS plugin options
Let's see what we can do with the plugin. You'll see the available options for the plugin you choose.
I am going to generate an application, but first, I need to see all options. We have options four options to generate and 3 to execute.
1.4) See the options for generating a Next.JS application in Nx
Before generating the Next application, It will be better to see initial configuration options for generating an app. To do this, I must append a help flag to the end of the command.
1.5) Generating a Next JS application
It is better to use —dryRun flag on generating an application. Also, I need to give a name to my app. When I execute the command, some configuration options will be available to me. I'll stick with the CSS styling option.
1.6) Start Next JS Application
After setting up the Next application, let's open the workspace.json file. In the file, you will see the target list under the store application. Those are the actions that I can do with the Next JS application.
Now, I can start serving the app by the run command.
Now, open your browser and navigate to
2) Installing Dependencies
2.1) TailwindCSS Setup
I am going to style the web app with Tailwind CSS. Let's add the dependencies of it.
According to the docs, the Nx utility function should be used for purge property. This eliminates additional manual maintenance as your workspace progresses. Also, it should be noted that Nx only purges on a production build.
2.2) Import TailwindCSS Styles
When I'm in the root folder, I'll create a separate style file for tailwind.
3) Create a library
Nx framework allows you to structure your project with apps and libs. In other words, we don't need to create app libraries specifically in the app directory. We can also create separate and publishable libraries.
There are different types of libraries you can create:
|Feature libraries||App-specific libraries that contain UI logic, validation, etc.||feature (if nested) or feature-* (e.g., feature-home).|
|UI libraries||The libraries are mostly presentational-oriented.||UI (if nested) or ui-* (e.g., ui-buttons)|
|Data-access libraries||(by convention, they can be grouped under a +state folder under src/lib)|
|Utility libraries||A utility library contains low-level framework agnostic code used by many libraries.||util (if nested), or util-* (e.g., util-testing)|
Nx Library Types
You can easily move the libraries using the @nrwl/workspace:move generator command
We have two options for building libraries either —buildable or —publishable. Those are valid for Angular, React, NestJS and Node. Therefore, I am going to use React libraries as a separate standalone publishable library.
You will also find useful options flag that you can pass to the CLI command. You can find the full list of the react:library options.
|name||Library name (required)|
|buildable||Generate a buildable library.||false|
|component||Generate a default component.||true|
|directory||A directory where the lib is placed.|
|globalCss||When true, the stylesheet is generated using global CSS instead of CSS modules (e.g. file is '.css' rather than '.module.css').||false|
|importPath||The library name used to import it, like @myorg/my-awesome-lib|
|publishable||Create a publishable library.||false|
|style||css||css, scss, stylus, styled-components,styled-jsx, @emotion/styled, none|
|unitTestRunner||Test runner to use for unit tests.||jest|
4) Create a component
Now, I generated a publishable user interface component library. I'm planning to populate this library with tailwind components.
style=none flag is added because components styling will be done by tailwind classes and there is no need to create an extra style file.
Also, the library will not include the tailwindcss library, meaning that the library has a peer dependency of tailwindcss.
4.1) Generate components for the library
4.2) Generate components for the app
I generated the required files for the library components. It is a good practice to create a Layout component for the NextJS apps. Let's create it.
Now, fill those files likes these:
Now, I must build the library. By doing this, I'll be able to import the components to the app.
Now, restart the server.