What are the best practices for storing content for a NextJS website

[IronSean]

What are the best practices for storing content for you nextjs site, be it blog posts, page content, etc. Especially for integrating with a CMS.

Ideas I've thought of:

Javascript/Typescript objects:
Pros:

• Strongly typed (you can set an enum or type as a property on your repeated content and the type checker will validate it when you're editing in an IDE)
• Very flexible format, can even include functions to generate properties
• Don't need to hard refresh for changes to appear on the page when editing in dev mode.

Cons:

• This is imported as module rather than read as a file, so updates happen at build time, not at request time. This might not play nicely with preview mode or similar features.
• This won't work well for patterns like one file per blog post, since either each would need to be imported, or some combined array of all would need to be imported.
• Hard to make a CMS save changes to these files.

Markdown and FrontMatter
Pros:

• Works very well for a simple single content collection and metadata (blog post, plus author, date, ec).

Cons:

• If it's not a blog post but instead a page with multiple discrete sections, now complex chunks of content are in multiple frontmatter properties, or you're dealing with importing and reading multiple files.
• Must manually define types separately and assign them when loading the file.

JSON
Pros:

• Types are inferred when loading a specific file.
• More flexible than markdown, easier to have multiple separate pieces of content in one file.

Cons:

• Types are not inferred when loading dynamicly (like /content/${slug}.json)
• Storing multiline text has to be done with \n instead of real line breaks.

---

As a secondary issue, I'm also trying to wrap my head around storing formatted content in either Front Matter or JSON fields. I could format both as markdown as well, but that causes a couple complications.

First, you have to process each property like markdown or get specific in your code about which properties are or aren't markdown.

Second, everything gets wrapped in <p> tags, unless presumably it's formatted as a header or list instead.

Third, this html generated from markdown must be set using dangerouslySetInnerHtml, but what happens if something in the markdown is a link? It won't be using NextJS Link handling because it will just be a normal link tag and it not being handled by react at all. Does NextJS handle this or are any tags inside a markdown formatted content block doomed to server requests rather than getting handled by the app router?