Next.js and React are the problem here. Adding another layer adds complexity. To simplify, you should remove complexity. To comprehensively address the problem you should strike at the root causes, rather than adding yet another layer of duct tape.
Do you have suggestions on a better alternative?
Several markdown to html generators exist that are well established which simply use the base languages: node, python, go, etc. Instead of using a framework that isn't suited to the task, they focus on structure and features and work on that. By working on the features, structure, and grammar, the tooling will emerge.
1. I want to edit the pages sometimes, and I want to do so using markdown without extra steps.
2. I still want to use React components *sometimes*.
3. I want it to be really easy to deploy and monitor. Nextjs is really easy for those things.
Solving the first issue and third issues don’t require React, but the second definitely does. So I’m still stuck.
Why? What specifically are you using for "website with markdown" that needs React?
> Do you have suggestions on a better alternative?
Yes.
1. For turning markdown into html on the server (i.e. render the HTML on the server and then deliver it) use pandoc. I use it like this for my blog: https://gist.github.com/lelanthran/2634fc2508c93a437ba5ca511...
2. For turning markdown into html on the client, write a custom component that parses the markdown into DOM nodes allowing the page author to simply do `<dynamic-markdown remote-src=some/path/to/page.md>`. You can even use one of the many existing Vanilla JS libraries to do this within the custom component.
In either of those two options above, what value does React add?
Just try to make something without React and you light see the light. It's actually not difficult.
example:
<html>
<head><title>hello</title></head>
<body>
<main id=root ></main>
<script src=./marked.min.js async defer ></script>
<script>
async function load() {
let element = document.querySelector("main#root");
await fetch("./index.md")
.then(resp => resp.text())
.then(text => marked(text, { ... }))
.then(html => {
element.innerHTML = html;
});
}
window.onload = load;
</script>
</body>
</html>
> edit: formatting