A Step-by-Step Guide to Integrate Nx Monorepo with Next.js

Web developers who are familiar with Next.js and want to learn how to use Nx Monorepo to manage multiple projects efficiently then you are in right place.

Introduction

Explanation of Nx Monorepo

Nx is a mono repository management system developed by Nrwl. Teams may manage several projects, libraries, and apps within a single repository using this collection of tools and best practices. Code reuse is enhanced, cross-functional collaboration is made easier, and development is made simpler with the help of Nx Monorepo.
Teams can share code, test suites, and configuration files between projects using Nx Monorepo, which reduces duplication and improves the codebase's maintainability. Additionally, Nx makes it easier to manage the development process by enabling developers to run tests, create applications, and carry out other development tasks from a single command-line interface.
Nx Monorepo is designed to work with Angular, React, and other popular front-end technologies, and provides advanced features such as efficient builds, optimized test runs, and enhanced collaboration between developers. It is ideal for large-scale projects that require complex dependencies and complex testing requirements.

Explanation of NextJS

NextJS is a free and open-source React-based framework for building server-side rendered (SSR) web applications. It is designed to make it easy for developers to build scalable and performant web applications that can handle heavy traffic and complex business logic.
NextJS provides an easy-to-use development environment with a hot reloading development server, automatic code splitting, and built-in optimization for fast page loads. It also includes a server-side rendering engine, which allows for rendering pages on the server, rather than in the browser. This results in faster page load times improved SEO, and better user experience for users accessing the website from low-powered devices.
NextJS also provides a modular architecture, which allows developers to split their code into smaller, reusable components, making it easier to maintain and develop the application over time. Additionally, it has a large and growing community of developers and contributors, which provides a wealth of resources, tutorials, and support to help developers build their applications quickly and easily.
Overall, NextJS is an excellent choice for developers looking to build fast, performant, and scalable web applications, and it provides a robust set of features and tools to help them achieve their goals.

Importance of integrating Nx Monorepo with NextJS

Integrating Nx Monorepo with NextJS provides several benefits to developers and organizations, including:

Improved Code Reuse: Nx Monorepo allows teams to share code, libraries, and components between different projects, reducing the duplication of code and increasing the maintainability of the codebase. This makes it easier for developers to collaborate and share code across multiple projects.
Streamlined Development Workflow: Nx Monorepo provides a centralized command-line interface for managing the development process, including building, testing, and deploying applications. This makes it easier for developers to manage and scale their projects.
Enhanced Collaboration: Nx Monorepo provides tools for collaborative development, such as code reviews, automated testing, and continuous integration. This helps teams to work together more effectively and reduces the risk of code-related problems.
Improved Performance: NextJS provides server-side rendering, which pre-renders web pages on the server for fast and responsive user experiences. By integrating Nx Monorepo with NextJS, teams can use these performance benefits across multiple projects.
Simplified Deployment: Nx Monorepo provides a centralized deployment process, making it easier for teams to deploy and scale their projects. This reduces the risk of deployment problems and simplifies the process of deploying and managing multiple projects.

1. Setting up Nx Monorepo with Next.js

Installation

To start with, developers should install Nx CLI and Next.js CLI globally on their machines. Nx can be installed using the command:

npm install -g @nrwl/cli

Next.js CLI can be installed using:

npm install -g create-next-app

Creating a new Nx Workspace

After installing Nx CLI, developers can create a new Nx workspace with Next.js, run:

npx create-nx-workspace

This will prompt you to choose a preset and add necessary packages to the workspace.

~❯ npx create-nx-workspace@latest


✔ Choose your style                     · integrated
✔ What to create in the new workspace   · next
✔ Repository name                       · next-nx-demo
✔ Application name                      · first-demo
✔ Default stylesheet format             · css
✔ Enable distributed caching to make your CI faster · Yes

Creating a new Workspace

Once the command completes, notice two projects were added to the workspace:

A NextJs application located in apps/first-demo.
A Project for Cypress e2e tests for our first-demo application in apps/first-demo-e2e.

While we see the first-demo-e2e Cypress project here, we won't go deeper into Cypress in this blog. You can find more materials on Nx Cypress support on the @nrwl/cypress package page.

2. Adding a Next.js application to Nx Workspace

Generating a new Next.js application

To generate a new Next.js application use the command:

nx generate @nrwl/next:app [app-name]

This creates a new second-app named Next.js application within the Nx Workspace.

~/next-nx-demo❯ npx nx g @nrwl/react:app second-app

>  NX  Generating @nrwl/next:application

UPDATE .gitignore
CREATE apps/second-app/index.d.ts
CREATE apps/second-app/next-env.d.ts
CREATE apps/second-app/next.config.js
CREATE apps/second-app/pages/index.module.css
CREATE apps/second-app/pages/index.tsx
CREATE apps/second-app/pages/_app.tsx
CREATE apps/second-app/pages/styles.css
CREATE apps/second-app/public/.gitkeep
CREATE apps/second-app/specs/index.spec.tsx
CREATE apps/second-app/tsconfig.json
CREATE apps/second-app/project.json
CREATE apps/second-app-e2e/cypress.config.ts
CREATE apps/second-app-e2e/src/e2e/app.cy.ts
CREATE apps/second-app-e2e/src/fixtures/example.json
CREATE apps/second-app-e2e/src/support/app.po.ts
CREATE apps/second-app-e2e/src/support/commands.ts
CREATE apps/second-app-e2e/src/support/e2e.ts
CREATE apps/second-app-e2e/tsconfig.json
CREATE apps/second-app-e2e/project.json
CREATE apps/second-app-e2e/.eslintrc.json
CREATE apps/second-app/jest.config.ts
CREATE apps/second-app/tsconfig.spec.json
CREATE apps/second-app/.eslintrc.json

Creating a new App

Once the command completes, notice another two new projects were added to the workspace:

A NextJs application located in apps/second-app.
A Project for Cypress e2e tests for our second-app application in apps/second-app-e2e.

3. Running the Next.js application

To run the Next.js application, navigate to the application directory and run:

npm run dev

This starts the application and allows for development and testing.

4. Creating shared libraries in Nx Monorepo

Adding a new library

To add a new library to Nx Workspace, use the command:

nx generate @nrwl/workspace:lib [lib-name]

This creates a new library within the Nx Workspace and adds it to the nx.json file.

❯ npx nx g @nrwl/next:lib common-ui

>  NX  Generating @nrwl/next:library

✔ Which stylesheet format would you like to use? · css
CREATE libs/common-ui/project.json
CREATE libs/common-ui/.eslintrc.json
CREATE libs/common-ui/.babelrc
CREATE libs/common-ui/README.md
CREATE libs/common-ui/src/index.ts
CREATE libs/common-ui/tsconfig.lib.json
CREATE libs/common-ui/tsconfig.json
UPDATE tsconfig.base.json
UPDATE package.json
CREATE libs/common-ui/jest.config.ts
CREATE libs/common-ui/tsconfig.spec.json
CREATE libs/common-ui/src/lib/common-ui.module.css
CREATE libs/common-ui/src/lib/common-ui.spec.tsx
CREATE libs/common-ui/src/lib/common-ui.tsx
UPDATE nx.json

Creating a new library

Once the command completes, notice a new library named common-ui was added to the lib/common-ui:

Adding a new component to the library

You can also create new components and pages by running the generate command.

nx generate page [component - name] --project=[project-name] --[options]

Or `nx g` short for `nx generate`

nx g page [component - name] --project=[project-name] --[options]

command to create a component

This command creates a new component named banner inside the common-ui library.

❯ npx nx g @nrwl/next:component banner --project=common-ui --export

>  NX  Generating @nrwl/next:component

✔ Which stylesheet format would you like to use? · css
CREATE libs/common-ui/src/lib/banner/banner.module.css
CREATE libs/common-ui/src/lib/banner/banner.spec.tsx
CREATE libs/common-ui/src/lib/banner/banner.tsx
UPDATE libs/common-ui/src/index.ts

Creating banner component

Once the command completes, notice a new component named banner was added to the lib/common-ui/src/lib/banner:

Banner component

export interface BannerProps {
  text: string;
}

export function Banner(props: BannerProps) {
  return <header>{props.text}</header>;
}

export default Banner;

Banner component

To share code between the Next.js application and the created libraries, import the libraries in the application using the standard import statement:

import { myFunction } from '@myorg/mylib';

For example, we will import Banner component inside _app.tsx the page of first-demo App.

_app.tsx page

import { Banner } from '@next-nx-demo/common-ui';
import './styles.css';

export function CustomApp() {
  return <Banner text="Welcome to our admin app." />
}

export default CustomApp;

_app.tsx page

5. Running Nx commands

To run Nx commands, use the command:

nx [command] [options]

This allows for running various tasks such as linting, testing, and building.

For example, if we want to run our first-demo app, we can run the following command:

❯ nx serve first-demo

> nx run first-demo:serve:development

info  - automatically enabled Fast Refresh for 1 custom loader
event - compiled client and server successfully in 416 ms (173 modules)
[ ready ] on http://localhost:4200

Running first-demo app

There are many commands, you can check them out at Nx Documentation.

6. Project graph

Run the below-given command, and the browser should open up with the following contents:

npx nx graph

Conclusion

Integrating Nx Monorepo with Next.js can significantly improve the development workflow for managing multiple projects within a single repository. By following the steps outlined in this guide, developers can create shared libraries, streamline their workflow, and enjoy efficient project management.

A Step-by-Step Guide to Integrate Next.js with Nx Monorepo