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

The architecture and organization of your app can make a difference between a great or mediocre development experience.
You need to create a workspace that keeps it together as your app scales to include multiple related projects like component development and end-to-end testing.
Things can get messy quickly!
Nx aims to prevent these tricky problems before they start, and plays nicely with some of the most popular tools & frameworks in the web development space. It encourages clean code structure and sharing across multiple apps, and makes testing setup a breeze.
The Course Project
In this course, Juri Strumpflohner demonstrates how to create a Digital Garden with Next.js as the core frontend framework, Tailwind for styling, and MDX as a data source.
While you're going to make an easy to follow personal Digital Garden platform, Juri mixes in a set of exciting technologies like Storybook, Cypress, and Vercel, demoing how you can tame all of them with Nx.
As a result, there are some excellent lessons to learn in this course that are not just valuable for your portfolio site but could easily also power your next enterprise application.
You will learn how to leverage the power of Nx by supporting multiple apps, providing a cleaner structure, code sharing, and code standards across the app, and improving your testing experience.
Nx also has the so-called dep graph, which you can use to visualize everything that is inside our workspace.
Gain These Skills
Implementation of Next.js getStaticProps & getStaticPaths
Set up Tailwind and JIT mode in your monorepo
Parse and render markdown with gray-matter
Conditionally deploy Nx Based Next.js Applications
Write Cypress and e2e tests
What's Next?
If you want to keep exploring and learning the power that comes with using Nx in your enterprise-grade application, this is a great follow-up course where you'll work on custom Express backend → Scale React Development with Nx
A great way to learn more about Tailwind and how to stylize your portfolio is to learn the fundamentals and create a project where you are able to implement and understand the Tailwind class utilities → Craft Scalable, Custom-Made Interfaces with Tailwind CSS

• Introduction to Architecting an Extensible Digital Garden with Next.js, Tailwind and Nx
• Create a Next.js Web Application with Nx
• Create a new Next.js Page Component with Nx Generators
• Understanding Next.js GetStaticProps
• Understanding Next.js getStaticPaths
• Setup Next.js with Tailwind in a Nx Workspace
• Configure Tailwind purging in a Nx Workspace
• Configure Tailwind in a Nx Monorepo With Potentially Multiple Apps and Libs
• Configure And Use TailwindCSS JIT Mode With Nx
• Use getStaticPaths to Retrieve a List of Markdown Files to Render With Next.js
• Generate an Nx Library to Implement our Markdown Rendering for our Next.js App
• Parse a Markdown Document With gray-matter
• Render Markdown With next-mdx-remote in our Next.js Page Component
• Embed React Components in our Markdown with MDX in a Next.js App
• Use React Components for Native HTML Tags with MDX and Next.js
• Dynamically Loading React Components with next-mdx-remote and Next.js Dynamic imports
• Using Environment Variables with Next.js and Nx
• Add Fast Refresh Support to our MDX Files with Nx Support for Custom Next.js Servers
• Scaffold a New Blog Post Article Automatically With Nx Workspace Generators
• Run an Nx Generator With the Nx Console VSCode Extension
• Add prompts to an Nx Workspace Generator
• Configure Storybook for your React Based Nx Workspace Library
• Configure Tailwind for your Storybook Setup in an Nx Workspace
• Develop React Components in Isolation with Storybook and Nx
• Share React Components in Next.js Applications with Nx Workspace Libraries
• Write e2e Tests for our Next.js Application with Nx and Cypress
• Write Cypress Tests for our React Storybook Components with Nx
• Export a Next.js Application with Nx
• Setup Vercel to Deploy an Nx Based Next.js Application
• Only Build What Changed with Nx Affected Commands
• Register our Markdown Articles with the Nx Dependency Graph
• Only Deploy to Vercel What has Been Affected Using Nx
• Course Outro: Where to go from here!