MDX Hot Reload | theodorusclarence.com

To make Next.js blog page hot reloads while editing the .mdx file

Install next-remote-refresh

This library enables hot reload by utilizing websocket by listening to folder changes.

yarn add next-remote-refresh

yarn add next-remote-refresh

Update next.config.js

next.config.js

const path = require('path');
 
const withRemoteRefresh = require('next-remote-refresh')({
  // Configure your Next.js project to watch the files you want to refresh
  paths: [path.resolve(__dirname, 'src', 'contents')],
});
 
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  // ... your config
};
 
module.exports = withRemoteRefresh(nextConfig);

next.config.js

const path = require('path');
 
const withRemoteRefresh = require('next-remote-refresh')({
  // Configure your Next.js project to watch the files you want to refresh
  paths: [path.resolve(__dirname, 'src', 'contents')],
});
 
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  // ... your config
};
 
module.exports = withRemoteRefresh(nextConfig);

I'm listening changes for all files inside src/contents folder.

Add the hook to _app.tsx

_app.tsx

import { useRemoteRefresh } from 'next-remote-refresh/hook';
 
function MyApp({ Component, pageProps }: AppProps) {
  useRemoteRefresh();
 
  return <Component {...pageProps} />;
}
 
export default MyApp;

_app.tsx

import { useRemoteRefresh } from 'next-remote-refresh/hook';
 
function MyApp({ Component, pageProps }: AppProps) {
  useRemoteRefresh();
 
  return <Component {...pageProps} />;
}
 
export default MyApp;