HTML in json file

Shane Harley · 2024-12-25 00:10:25.04955

I'm following [this](https://vercel.com/guides/loading-static-file-nextjs-api-route) guide, and getting the data to show up no worries. What I'm struggling with however, is if I want some HTML in my json file, for example, if I want to add a class to part of a string. Is the only way to do this using dangerouslySetInnerHTML?

Vercel Alum

Hi, Shane! Welcome to the Vercel Community

You could structure your JSON data with explicit fields, like so:

{
  "text": "Hello World",
  "className": "text-blue-500"
}

Then create React components that accept the structured data as props, render the content with appropriate HTML elements and apply classes or styles as needed.

Then when it comes to parsing and rendering the content, it'd look like:

// Read JSON normally
const data = await readJsonFile()

// Render through your component
<StyledText content={data} />

This would make sure that:

✅ Type-safe and secure
✅ No raw HTML injection
✅ Full React component control
✅ Easy to maintain and extend

This is safer than using dangerouslySetInnerHTML while still achieving styled, structured content from your JSON files.

Thanks Pauline! Turned out the problem was with what I was putting in my JSON file so got this working now. Thanks though!

Vercel Alum

Great to hear this works now! Thanks for coming back to share your solution