nextjs load json utf-8


To load a JSON file in a Next.js app, you can use the fs (file system) module and the readFileSync function. Here’s an example of how you can do this:

import fs from 'fs'

function Example() {
    const data = JSON.parse(fs.readFileSync('data.json', 'utf-8'))

    return (
            { => (
                <div key={}>{}</div>

In this example, we use the readFileSync function to read the contents of the data.json file and store it in a variable called data. We then parse the JSON string using the JSON.parse function to convert it into a JavaScript object.

The utf-8 parameter specifies the character encoding of the file. This is important because JSON files can contain characters from different languages, and the utf-8 encoding can handle these characters correctly.

It’s important to note that the fs module is only available on the server-side in a Next.js app, so this approach will not work in the browser. If you need to load a JSON file in the browser, you can use the fetch function or an HTTP client library like Axios.