Learn Browserify, Mdx and Reactfire

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



We will combine our knowledge of Dynamic routing to pass a dynamic parameter to a function that will query a single post from our Sanity CMS. When we fetch our blog post data this is a great place to do some processing of the content that we get back. If you didn't process your blog post markdown, it would come back as a string which doesn't look too great on the page.

To make our markdown pretty we will install and use the `MDSvex` library to use it's compile function and render our markdown.
  
We'll see that `MDSvex` gives us a Promise from `compile` because it's an async function so we'll use the Svelte `await` block to conditionally show the post body when it is ready, otherwise we'll show a loading state.

Load a Single SvelteKit Post Dynamically & Render Markdown with MDSvex

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

**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

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

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

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

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

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

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

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

Kathleen McMahon walks us through a real-world MDX digital garden implementation

Digital Gardening with MDX Magic

Rodrigo Pombo introduces [Code Hike](https://codehike.org/) and talks through how Code Hike and MDX empower advanced scrolly telling techniques.

The X in MDX

Prince Wilson, MDX contributor, takes us through one aspect of his personal site playground and dives deep into interactive code blocks.

Personal Site Playgrounds with MDX

Monica Powell, creator of React Ladies, talks through why someone would migrate from Remark to MDX before going into how to do that and what problems you might run into.

Migrating to MDX

Jonathan Bakebwa introduces MDX support for VueJS and NuxtJS while also using Chakra UI Vue for MDX components

MDX and VueJS/NuxtJS

Laurie Barth walks us through MDX v2's syntax by trying to break it. She starts at markdown syntax and takes us through increasingly complex applications of MDX, including passing dynamic props to .mdx files imported into other .mdx files.

MDX v2 Syntax

Cole Bemis explains how MDX works by taking us though his own journey digging into what MDX does under the hood.

Demystifying MDX

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using `exorcist`.

Gulp and Browserify - Adding Babel & Source Maps

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

gulp

Building upon the `watch` task that we begin this lesson with, we’ll look at how to create a local development server using the `app` directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public `.stream()` method that is designed exactly for this purpose.

Gulp and Browserify - Adding Live Reload with Browsersync

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task `watch` & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

Gulp and Browserify - Hooking up Watchify

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

browserify

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single `bundle.js` file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by `gulp.dest` and finish by writing the bundle to a `dist` directory.

Gulp and Browserify - Initial Setup

MDX has grown rapidly since the first commit two and a half years ago. We'd like to celebrate our accomplishments so far, and talk about what lies ahead. We've got lots of plans.
Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.

MDX Conf 2020

In this lesson, you'll learn how to enhance the accuracy of components generated by Cursor Composer by aligning your project's package.json with Cursor's rules. We'll guide you through extracting the list of installed packages from your package.json and incorporating them into your .cursorrules file, along with brief descriptions of their functionalities. By providing Cursor with this contextual information, you'll enable it to generate components that are more precise and functional on the first attempt. The lesson includes demonstrations of component generation both with and without these enhancements, highlighting the improvements in accuracy and efficiency.

Boost Cursor Composer Accuracy: Integrating package.json with Cursor Rules

Speed up your bug-fixing process dramatically with Cursors Composer. Take a warning from your logs, search for relevant terms, then seamlessly import both the warning and search results into Composer. Add documentation and apply fixes to all search results in one go. This streamlined workflow resolves multiple issues rapidly, saving valuable development time.

Batch Fix Every File in Search Results with Cursor's Composer

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

fast-check allows us to create composite generators that suit our testing needs. We'll generate two numbers to create a point simulating an X and Y and assert that the distance should always be greater than or equal to 0.

Generate composite objects with fast-check fc.record

Just using fast-check by itself can make you tests verbose and tough to read. Lucky for us there are many integrations with fast-check such as the `@fast-check/jest` package that will help remove some boilerplate from our test.

Tidy up your test with @fast-check/jest

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.