Hey 👋, glad you're interested in my course about architecting a Digital Garden. Now there are a lot of buzzwords in this course 😅. Digital Garden, Next.js, Tailwind, Nx and more! And yes, we'll cover them all. We're not going to talk about Digital Gardens too much (there's a lot of material on Egghead on that already if you're curious), my goal is to teach you how to set up your own infrastructure to host one. 

That said, even though we're basically building a non-mission-critical personal platform for ourselves, all the technologies and skills you'll learn here, are 100% transferrable to your next professional project!

I really hope you like the course. Feel free to ping me [on Twitter](https://twitter.com/juristr) or on my [personal website](https://juri.dev) with questions and comments 🙂. Also, make sure to leave a review if you like the course!! 😄

Introduction to Architecting an Extensible Digital Garden with Next.js, Tailwind and 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](https://nx.dev/l/r/getting-started/nx-setup) 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](https://nextjs.org/) 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](https://blog.nrwl.io/create-a-next-js-web-app-with-nx-bcf2ab54613).

Create a Next.js Web Application with Nx

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](https://nx.dev/l/r/next/page) which is the one for our portfolio's About page. We also leverage [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-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](https://blog.nrwl.io/create-a-next-js-web-app-with-nx-bcf2ab54613).

Create a new Next.js Page Component with Nx Generators

A Next.js page component has two interesting functions `getStaticProps` and `getStaticPaths`. 

In this lesson we're going to look into `getStaticProps` to get a basic understanding of what it does and why it will be useful for our final target of creating a statically rendered portfolio site with Next.js

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

Understanding Next.js GetStaticProps

For our personal portfolio site, we definitely want to have a blog or list of articles. If we want to display articles, we might have a routing like `/articles/some-article`. 

In this lesson, we learn how Next.js uses a folder-based routing system and in particular why `getStaticPaths` is useful for creating a dynamic Next.js page component that renders the article based on what is in the URL `/article/[slug]`.

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

Understanding Next.js getStaticPaths

Besides having a performant website, our portfolio site should also have a decent design and UI. Now, either you're a champion in CSS and UI design in general, or you just rely on some existing CSS framework that takes care of 90% of the things for you already. In our case, we use [Tailwind](https://tailwindcss.com/). 

In this lesson, we specifically look into the setup of Tailwind and how we can integrate it into our Nx workspace together with Next.js

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/setup-next-js-to-use-tailwind-with-nx-849b7e21d8d0).

Setup Next.js with Tailwind in a Nx Workspace

In development mode, [Tailwind](https://tailwindcss.com/) might be several hundred Kb large, if not into the megabytes depending on which classes you use. That's definitely not something we want to ship to our production environment. Therefore, Tailwind comes with CSS purging, a build step that analyzes your HTML, components, etc and removes all the unused Tailwind CSS from the overall bundle, shrinking down the Tailwind CSS to the bare minimum. 

Normally you would just set this up for the app you're installing Tailwind for, but in a [Nx](https://nx.dev) workspace, you might have multiple apps and multiple libraries (shared or not). Hence, we don't just want to purge app-specific HTML files, but also those of the libs we use. Nx comes with built-in support to automatically generate glob patterns based on the libraries consumed by a given application.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/setup-next-js-to-use-tailwind-with-nx-849b7e21d8d0).


Configure Tailwind purging in a Nx Workspace

Monorepos might consist of multiple applications and libraries. As such, when we setup Tailwind, we might want to have certain workspace-wide global Tailwind settings which all of our applications should use (e.g. imagine company level branding colors etc). At the same time though, individual applications might have different requirements and thus need to adjust and overwrite the global Tailwind configuration. In this lesson, we learn how to have a global Nx monorepo workspace wide configuration that is imported into the application level individual Tailwind configurations

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/setup-next-js-to-use-tailwind-with-nx-849b7e21d8d0).

Configure Tailwind in a Nx Monorepo With Potentially Multiple Apps and Libs

While still an experimental feature in Tailwind v2, [JIT compilation mode](https://tailwindcss.com/docs/just-in-time-mode) will be the default in v3. JIT mode not only gives faster rebuild times and allows to generate arbitrary styles, but mainly gives browser tools some relief by only shipping what is needed. 
Tailwind purging only happens when you create a production build, which means your browser dev tools have to process the possibly megabytes large Tailwind CSS, which might result in a noticeable slowdown. In this lesson we're configuring JIT mode for our setup and we'll learn how we can leverage it with Nx.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/setup-next-js-to-use-tailwind-with-nx-849b7e21d8d0).

Configure And Use TailwindCSS JIT Mode With Nx

On our portfolio site, we definitely want to have the ability to render a list of articles, which preferably we'd want to write in Markdown. Whenever our user navigates to `/articles/[slug]` they should be presented with an article. In this lesson we learn about how Next.js page routing works and how we can leverage the `getStaticPaths` to read our list of markdown files and generate a new page for every article in the folder.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/read-and-render-md-files-with-next-js-and-nx-89a85c1d9b44).

Use getStaticPaths to Retrieve a List of Markdown Files to Render With Next.js

In a plain normal Next.js application you would place your markdown processing logic somewhere within a folder insider your Next application. We could do the very same in an Nx monorepo, however, we get much more benefits by moving it into a dedicated library in the `libs` folder.

[Nx workspace libraries](https://nx.dev/l/a/structure/grouping-libraries#example-workspace) allow you to nicely encapsulate your functionality as well as to easily share it with other apps that might potentially live in our workspace. In this lesson, we learn how to generate a new library with Nx generators and how to import the library into our Next.js application.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/read-and-render-md-files-with-next-js-and-nx-89a85c1d9b44).

Generate an Nx Library to Implement our Markdown Rendering for our Next.js App

Many markdown documents have a metadata section at the very beginning, which contains information such as the title, author and creation date. This section is the so-called "front matter". 

In order to render our markdown-based blog articles on our portfolio site we want to parse them and separate them into the front-matter and main article part. `gray-matter` is a library that helps us with that.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/read-and-render-md-files-with-next-js-and-nx-89a85c1d9b44).

Parse a Markdown Document With gray-matter

Once we have separated the front-matter from the rest of the markdown document, we can proceed to convert it to HTML, for then finally render it with our Next.js page component. In this lesson we use `next-mdx-remote` to parse the markdown string into HTML and we learn how to leverage the `MDXRemote` component to include it into our page component.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/read-and-render-md-files-with-next-js-and-nx-89a85c1d9b44).

Render Markdown With next-mdx-remote in our Next.js Page Component

When rendering our markdown we might want to enrich the experience with some dynamic content. Many static site generators allow to include dynamic content placeholders for like embedding a Youtube video, generating table of contents, code blocks with interactive functionality and more. One way to achieve this in the React ecosystem is by using MDX. MDX is similar to JSX but for Markdown content, and allows us to directly embed React components within it. This gives an enourmous flexibility to what we can display within a page.

In this lesson we’re going to generate a new Nx library to host our “mdx elements” and learn how to leverage the `MDXRemote` component to embed these React components into our markdown rendering flow.

Embed React Components in our Markdown with MDX in a Next.js App

The markdown rendering includes a lot of native HTML tags as well of course. Assume for instance we want to change the behavior of links within our rendered document. We can definitely create a custom component and include that in our MDX document, but we’d rather not want to have to use a specific `<Link>` component and rather be able to keep the native way of rendering links in Markdown, that is `[some link](https://juri.dev)`.

Turns out that with `next-mdx-remote` we are able to automatically replace all rendered `<a>` tags (or really any other tag we want) with a React Component.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/component-hydration-with-mdx-in-next-js-and-nx-90f46ea0431c).

Use React Components for Native HTML Tags with MDX and Next.js

Next.js is all about creating performant web applications. However, the more React components we pull into our MDX via `next-mdx-remote`, the heavier our JavaScript becomes which drains our site's performance. Also, while we might have quite a few React components to be included in our Markdown rendered content, we might not always use all of them in our articles.

In this lesson, we learn how to leverage Next.js dynamic imports to just pull the minimum necessary components into our final JavaScript bundle. Also, we look into why we might want to do deep imports into our Nx library setup to decrease the size of the bundle even more.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/component-hydration-with-mdx-in-next-js-and-nx-90f46ea0431c).

Dynamically Loading React Components with next-mdx-remote and Next.js Dynamic imports

So far the path to the articles folder, where we host all of the markdown files, is hard-coded into our Next.js page component. In the long run, we wouldn't want to leave it like that. First of all to give greater flexibility in customizing the path if we ever decide to move it to another place, but also to make it more easily accessible by other parts of our Nx workspace libraries and apps.

This is a perfect use case for environment variables. In this lesson, we learn about how Nx, as well as Next.js, is able to read environment variables.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/hot-reload-mdx-changes-in-next-js-and-nx-c05252cf450a).

Using Environment Variables with Next.js and Nx

**NOTE:** `workspace.json` is deprecated, you can update to `project.json` [here](https://nx.dev/deprecated/workspace-json).

One cool aspect of Next.js is its [fast refresh](https://nextjs.org/docs/basic-features/fast-refresh) support. Whenever you change some Next.js component it automatically refreshes the page without hard reloading everything. However, you might notice that whenever we change something within our MDX markdown files, fast refresh is not capturing that, hence we need to manually refresh the browser window.

In this lesson, we learn how to leverage a feature of Nx to create a "[custom Next.js development server](https://nx.dev/l/r/next/server#customserverpath)". We are going to use [chokidar](https://www.npmjs.com/package/chokidar) to watch our articles folder and then invoke a private API on the Next.js server instance to trigger a reload command.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/hot-reload-mdx-changes-in-next-js-and-nx-c05252cf450a).

Add Fast Refresh Support to our MDX Files with Nx Support for Custom Next.js Servers

Once we finish our portfolio site, hopefully, one of the main activities we'd be doing with it is to create new content. Thus we want to automate the creation of a new blog article, which includes the creation of a new MDX file in the `_articles` folder as well as initialize the article's front matter with the title, author, and creation date.

Nx has a powerful concept, called [generators](https://nx.dev/l/r/generators/using-schematics). While many of them come already built into the Nx plugins (e.g. `@nrwl/next`, `@nrwl/react`,...), we can also define our own, [Nx Workspace Generators](https://nx.dev/l/r/generators/workspace-generators). This is exactly what we leverage to scaffold new blog articles.

Prefer to read along as well? Here's the [accompanying article](https://juristr.com/blog/2021/08/nextjs-storybook-tailwind-nx/#using-our-react-topic-button-component-in-our-next-js-app)

Scaffold a New Blog Post Article Automatically With Nx Workspace Generators

We can run [Nx Generators](https://nx.dev/l/r/generators/using-schematics) directly from the console. However, if you prefer a more interactive, UI-driven approach, the [Nx Console extension](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) for VSCode is for you. 

Interestingly, Nx Console not only allows to run built-in generators that come with the various Nx plugins, but it is also possible to directly run local [Nx workspace generators](https://nx.dev/l/r/generators/workspace-generators).

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/using-nx-workspace-generators-to-scaffold-new-blog-posts-8c8162cf857b).

Run an Nx Generator With the Nx Console VSCode Extension

To improve the execution of our [Nx workspace generator](https://nx.dev/l/r/generators/workspace-generators) we can add prompts to our generator configuration. In that way, when users run the workspace generator and some argument is missing, it would prompt the user with a question we can define. This leads to a much-improved experience.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/using-nx-workspace-generators-to-scaffold-new-blog-posts-8c8162cf857b#0f77).

Add prompts to an Nx Workspace Generator

Developing UI components is sometimes a highly visual effort. We continuously want to have feedback on how a particular change affects our component rendering and adjust accordingly. Most often, as a developer, we include these components in their target applications, just to get that visual feedback. This is far from ideal though.

[Storybook](https://storybook.js.org/) solves exactly this! It allows you to develop components in isolation and experiment with the inputs and outputs of a component. Furthermore, once the Storybook story is fully developed, it can serve as documentation for other developers to explore.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/use-storybook-with-tailwind-in-an-nx-workspace-5ceb08edad71).

Configure Storybook for your React Based Nx Workspace Library

We want to have a library where to host our UI components s.t. they can be easily shared within our Nx workspace. In many cases a Nx workspace starts like this, and then over time we add new applications, either because new projects start or even because we split up existing projects into multiple ones for a better scalability. Furthermore, having a shared UI library is a common scenario especially in larger real-world applications to encapsulate the corporate design components

In this lesson, we look into how to configure our Nx React Storybook setup to work with Tailwind CSS.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/use-storybook-with-tailwind-in-an-nx-workspace-5ceb08edad71).

Configure Tailwind for your Storybook Setup in an Nx Workspace

In this lesson, we develop a new React component in an [Nx](https://nx.dev) library with Storybook. We explore how to leverage [Storybook](https://storybook.js.org/) to develop the component in isolation, how to expose the component props s.t. we can then dynamically change them in the Storybook rendering and much more.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/use-storybook-with-tailwind-in-an-nx-workspace-5ceb08edad71).

Develop React Components in Isolation with Storybook and Nx

When developing with an Nx monorepo it is highly suggested to develop your main logic inside so-called Nx workspace libraries. That allows you to develop components in isolation (e.g. with Storybook), leads to a better API and decoupling overall and facilitates reuse across various applications.

In this lesson, we learn about how to easily share a component that has been previously developed within an Nx workspace library with our Next.js-based application.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/use-storybook-with-tailwind-in-an-nx-workspace-5ceb08edad71).

Share React Components in Next.js Applications with Nx Workspace Libraries

[Nx](https://nx.dev) promotes best practices by automatically generating [Cypress](https://www.cypress.io/) based e2e tests for all applications inside an Nx monorepo workspace. Not only does Nx take away the burden of configuring Cypress, but it also allows to easily serve Cypress in "watch" or headless mode. The latter is particularly useful to also run in your CI pipeline. When you run Cypress test with Nx, it automatically makes sure to first launch the tested application, then run Cypress and point it to the running application. 

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/use-cypress-with-next-js-and-nx-to-battle-test-your-react-components-da273f664f81).

Write e2e Tests for our Next.js Application with Nx and Cypress

[Storybook](https://storybook.js.org/) is already powerful for being able to develop components in isolation as well as using those stories as living documentation for others. [Nx](https://nx.dev) goes a step further. It leverages the fact that Storybook exposes an `iframe.html` that allows to access the rendering of the story without the actual Storybook frame. On top of that, Nx generates a Cypress configuration to run tests against the Storybook stories.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/use-cypress-with-next-js-and-nx-to-battle-test-your-react-components-da273f664f81).


Write Cypress Tests for our React Storybook Components with Nx

When it comes to deploying Next.js based applications we have basically two different possibilities: "exporting" our app, or just building it.
The main difference is that "exporting" a Next.js app will generate a set of static files for us which can be hosted by really any static site hosting provider. Building a Next.js app is what you would want to do instead for deployment on [Vercel](https://vercel.com/).

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).



Export a Next.js Application with Nx

When you develop a Next.js based application, [Vercel](https://vercel.com/) is probably the preferred way of deploying the site (although not the only option you have). In this lesson, we're going to have a look at how to set up a Vercel deployment for our developer portfolio site.

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).

Setup Vercel to Deploy an Nx Based Next.js Application

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

By leveraging the [dependency graph](https://nx.dev/l/r/structure/dependency-graph), [Nx](https://nx.dev) is able to understand which parts in the monorepo changed and thus trigger actions on those nodes, such as building an app, running tests or linting. This already works out of the box. However, with our portfolio application, all of our markdown articles reside in the root-level `_articles` folder. Those are not captured by the Nx dependency graph and thus Nx would not correctly detect a change to our Next.js site application whenever we change or add a new markdown article.
In this lesson, we learn how to register our `_articles` folder s.t. it appears as a dedicated node in the Nx dependency graph.

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).

Register our Markdown Articles with the Nx Dependency Graph

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

Wow, congrats 🎉. You did it! I'm fully aware this was a lot. I really hope you enjoyed the course. From here you can dive into different things:

- keep finishing your own Digital Garden with the knowledge you gained (send me the link once you've deployed it!)
- explore more of Next.js (hint hint, Egghead has some great courses on the topic)
- learn more about [Nx](https://nx.dev). It is probably the most transferrable knowledge item of this course as it can be applied to your next React application, Node app and more. Nx is really made to scale, so your next, huge enterprise project might just be a good moment to hop on!

Also, if you want to learn more about Nx specifically, I have another completely free Egghead course on [Scaling React Development with Nx](https://egghead.io/courses/scale-react-development-with-nx-4038)

Make sure you leave a review comment on the course if you found it useful. And as always, feel free to [ping me on Twitter](https://twitter.com/juristr) or [my website](https://juri.dev) 👋

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

Instructor

Course Content