Fast Refresh

[theodorusclarence]

Do next-mdx-remote supports fast refresh/hot reload? Or do I need to install another library?

[jescalan]

No, this library loads markdown content as data through getStaticProps, and data does not have fast refresh applied to it at all. If you want a reload on save, you can use this library, but its just a normal reload.

Hope this is helpful!

[xairoo]

You can add this future really easily. I am able to use fast refresh when I also use require to load the files.

export async function getPostsSlugs() {
  const files = fs.readdirSync(postDirectory);

  if (!files) {
    return [];
  }

  const slugs = files.map((file) => {
    require("../posts/" + file); // Used for fast refresh when file is changed
    return file.replace(".mdx", "");
  });

  return slugs;
}

And finally

export async function getStaticPaths() {
  const slugs = await getPostsSlugs();

  return {
    paths: slugs?.map((slug) => ({ params: { slug } })),
    fallback: false,
  };
}

---

Or...

export async function getSortedPost() {
  const files = fs.readdirSync(postDirectory);

  const posts: any[] = [];

  if (!files) {
    return;
  }

  files.forEach((file) => {
    const filePath = path.join(postDirectory, file);

    require("../posts/" + file); // Used for fast refresh when file is changed

    const fileContent = fs.readFileSync(filePath, "utf8");
    const { data, content } = matter(fileContent);

    posts.push({
      ...data,
      content,
      slug: file.replace(".mdx", ""),
    });
  });

  // Sort posts by date
  return posts.sort((a, b) => {
    if (a.date < b.date) return 1;
    if (a.date > b.date) return -1;
    return 0;
  });
}

export async function getStaticProps() {
  const posts = await getSortedPost();
  return {
    props: {
      posts,
    },
  };
}

[jescalan]

While this does get fast refresh, it does so at the expense of performance, and also makes it impossible to load remote content. It might be worth adding a mode of some sort that could be opted into to enable this behavior only in development though - I'd be comfortable with it as long as the developer turning it on was ok with accepting the downsides in exchange for adding fast refresh, and as long as it was only like this in development.

If you want to auto-reload without the downsides, you can also use next-remote-watch, though it provides full reloads and not fast refresh.

[ssadler]

While this does get fast refresh, it does so at the expense of performance, and also makes it impossible to load remote content.

Wouldn't that only happen during development / build anyway, since it's inside getStaticPaths?

Edit: Actually, using require doesnt work for me, since there's no loader for mdx files at that point.