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

NOTE: workspace.json is deprecated, you can update to project.json here.

One cool aspect of Next.js is its 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". We are going to use 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.