Nx helps architect, test, and build at any scale:
integrations with modern frameworks, distributed task execution, computation caching, smart rebuilds of affected projects, powerful code generators, editor support, GitHub apps, and more.

Learn Nx

In this course we'll be focusing on a package-based monorepo setup. 

Basically, we have a collection of packages, each with their own `package.json`. We'll then use pnpm workspaces to set up a monorepo that allows us to share these packages between each other locally. 

As our app grows we'll bring in Nx to get more advanced features such as build pipelines and caching.

So let's dive right in! If you have any questions don't hesitate to leave a comment. 

Introduction to Build High-Speed Monorepos with Nx and pnpm Workspaces

In an Nx monorepo, you typically have multiple applications and lots of libraries. When we configure [Vercel](https://vercel.com) for deployment, we set one Vercel deployment for each app in our monorepo. However, we would want to make sure that not all the apps are being deployed all the time, but only if the app was really affected by the change. [Nx affected commands](https://nx.dev/l/r/core-extended/affected#rebuilding-and-retesting-what-is-affected) can help here.

In this lesson we're going to create a simple script, that leverages the Nx affected commands to determine whether we should cancel or continue a given Vercel deployment.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/publishing-a-next-js-app-to-vercel-with-nx-df81916548f5).

Only Deploy to Vercel What has Been Affected Using Nx

If you work in a monorepo you want to make sure to have tooling that supports that. [Nx](https://nx.dev) comes with those baked in, allowing you to grow your monorepo from a single to multiple apps. One way Nx tackles this is by providing so-called [affected commands](https://nx.dev/l/r/core-extended/affected#rebuilding-and-retesting-what-is-affected).

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/publishing-a-next-js-app-to-vercel-with-nx-df81916548f5).

Only Build What Changed with Nx Affected Commands

On the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code.

But there's a bit more to it than just those three steps.

The type of project you're working on impacts the decisions you make. It gets more complicated when you're working on multiple projects that are related. For example, maybe you have a customer-facing frontend app, an admin dashboard app, and a single backend used for both.

How does this change your directory structures? How should you share code between projects? What happens when you add a Design System into the mix?

It can get hard to keep things straight in your head.

Nx is a tool that aims to solve these problems for you, whether you're working solo on a small full-stack app or on a dev team of thousands.

It's not just an opinionated folder structure. When you create an app with Nx, it generates unit and e2e test setups as well as preparing bundling and code-splitting with Webpack, and stubbing out common features like routing.

One of the coolest features of Nx is its Dependency Graph. The graph can visually show you the relationship between the parts of your application, and is optimized to ensure that compiling, testing, and linting only happens in the affected areas of your project.

In this course, Juri Strumpflohner demonstrates these features and more through the iterative creation of a React + Storybook + Express app. Don't worry if this isn't your preferred stack! Nx supports the most popular frameworks & libraries on the web.

More importantly, the focus of this course is more on the workflow than the implementation.

Watch Juri's course, and see if the Nx tooling & workflow is right for you and your team!

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Scale React Development with Nx

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Architect an Extensible Digital Garden with Next.js, Tailwind, and Nx

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

Scalable Signals Angular Architecture with NGRX Signal Store

Dive into the world of real-time web development with this hands-on course! You’ll learn how to build a dynamic chat application using Fauna Streams and Next.js 14, focusing on the essentials and best practices.

**What You’ll Learn:**
- **Next.js Best Practices:** Master Next.js best practices for building fast, maintainable apps.
- **Server-Side Rendering (SSR):** Learn SSR techniques and master features like server actions, server side form submission etc.
- **Database Access Patterns:** Efficiently connect and retrieve data using Fauna.
- **Real-Time Updates:** Implement real-time updates with Fauna Streams.
- **Basic Authentication:** Secure your chat app with simple authentication methods.

**Course Highlights:**
- Practical, project-based learning.
- Clear, step-by-step instructions.
- Focus on modern, real-time web development.
- Tips and tricks for optimizing performance.

By the end of this course, you’ll have a working real-time chat app and a solid grasp of the tools and techniques used to build it.


Next.js is a minimalistic framework for server-rendered React applications.

Build a Real-time Next.js 14 Chat App with Fauna 

Our app is in a good stopping point. A good challenge for you to implement from here is to implement a navbar with a `logout` button.

Challenge: Implement a NavBar for the Application with Logout Functionality

FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

faunadb

Now that we have user information available to us, we want to connect messages created to the users that are sending them. When we add `read` privileges to the `User` model, we can call `User.identity()` to get the user data we need to set for messages. 

Update Fauna Messages Collection with Authors

Now that we have user Authentication, we can redirect users to sign in if we don't find a cookie to do so. 

Throughout our app we can now replace our fauna token we have set in environment variables to the user token that we have access to. 

Implement Auth Guards with Tokens throughout an Next.js App

For user signin, we'll implement a proper server action by creating a `actions.js` file where our server actions can live. In our login page, we'll set the component to be a client component to hold some state. This way we can use the new `useFormState` hook from `react-dom` and pass in our login server action.

Within the action we'll call our `UserLogin` function from Fauna and set a cookie with the secret we get back that we can use throughout our application.

Implement Fauna Signin with Next.js Server Actions and useFormState React Hook

Now it's time to actually sign users up for our appliaction.

We'll implement the `doSignup` function that we created earlier. This function will run on the server with the `'use server'` directive so we can instantiate a fauna client and call `UserRegistration` within this function.

From there we'll redirect the user to the `/signin` page which will error out because it's not implemented yet.

Implement Signup Functionality through Fauna with Next.js 14 Server Actions

To have actual users in our application we need to represent those users in our database. Fauna has quite a few ways you can do user authentication but we'll be creating our own using a few built-in Fauna helpers.

We'll start by setting up the necessary Fauna logic for users. We'll add a `User` collection as well as a `functions.fsl` file that we'll expose user sign up and log in. Here we'll see how Fauna gives us a built in `Credentials` document to handle email and password for a user. It also has a login function that it exposes to make that easy for us which will generate a token for a user on login.

After setting up our functions, we'll add an `UnAuthRole` as well as an `AuthRole` and give proper actions for each role.

Add Fauna User Authentication to a Next.js App

To take advantage of Next.js app router, we need to separate our client components that need state from the rest of the page so we can load data on the server.

To do this we'll refactor the list of rooms into it's own `RoomList` component which will take the client-side React hooks with it. This way we can load all our rooms on the server and just pass it to `RoomList` which will start to stream the rooms as we create them.

The final step will be to turn the form for creating rooms into a server action. You'll notice that we will need to instantiate a new fauna client within the server action even though we have a client available in that same page. 

Refactor a Next.js 14 Page to Utilize Both Server and Client-side Rendering 

By default Nx stores the cache locally. We can gain additional benefits if we distribute our cache so a CI or our coworkers may benefit from it. 

The easiest way to set it up is to just run this command `pnpx nx connect-to-nx-cloud`

Distribute Your Cache with Nx Cloud

As your workspace grows you may need to start using more advanced optimizations. 

A great option that Nx provides are "affected commands". These use git to determine the changes between your current branch and the base branch, and **run a command on all projects that were affected by the changes**

Further Optimize Your Nx Workspace with Affected Commands

Not only do you get excellent speed and caching features, you also get a really cool graph from Nx that lets you see a visual representation of your workspace.

Use the Nx Graph to Visualize Your Workspace

Since dependencies on other local packages in the workspace are really just symlinks to those projects, we'll run into issues if we haven't ran their build script. 

We can make sure that this happens automatically by using Nx's task pipeline features. In our `nx.json` we can add a `dependsOn` field and set the commands that need to be ran within a project's dependencies. 

Use the Nx Task Pipeline to Run Commands Within Local Dependencies

Sometimes you might want to use a pattern you defined for a certain input in a different one somewhere else in your nx.json confg. 

You can do that by defining a `namedInputs` object field and setting your named input's name as the key, and the glob pattern as the value. 

Use Nx Named Inputs to Reuse Glob Patterns Across Inputs

By default, Nx considers all the files in the project as inputs to the cache, so any changes will invalidate it. But, that might not be the behavior we want. Especially if we are just doing something like updating a README.

To selectively ignore certain files, we can specify an inputs field where we are configuring the custom output. There, we can use a glob pattern to define the files you'd like to ignore. 

Configure Nx Cache to Ignore Changes to Specified Files

Nx has some default settings when restoring the cache. When you create a custom build output in your `tsconfig` for example, Nx won't automatically know about it. 

But, Nx gives you some really easy to use options for configuring these settings. On the project level you can tell Nx about your custom output target in the `package.json` 

You can also set a default for all the projects in the workspace in your `nx.json` config!

Configure the Nx Cache Output Location

It's a waste of computation resources to run your build scripts if there haven't been any changes. 

Nx's caching features save you time and resources. Get started by just running the `nx init` command and then setting the scripts you want to cache in the generated `nx.json`  

Configure Nx Caching

You can run multiple projects using the `run-many` command from Nx and setting a `--target` flag with the command you want to run.

For example `npx nx run-many --target=build`

Nx

Search Results

Introduction to Build High-Speed Monorepos with Nx and pnpm Workspaces

Only Deploy to Vercel What has Been Affected Using Nx

Only Build What Changed with Nx Affected Commands

Scale React Development with Nx

Architect an Extensible Digital Garden with Next.js, Tailwind, and Nx