NextJS 15 Fetch Data from Local Json|Fetch local Json Files

In this tutorial, we will fetch local json data using the NextJS 15 while using the Static Site Generation and pages router because the APP Router doesn’t support static based routing.

 

What is the FS module?

Fs module is a file system reading nodeJS function, which we use to read the file system in NextJS. I will give the documentation where you will find all the read, write, append, rm and much more.

To fetch data from the JSON file, we are going to create a new NextJS app by issuing this command,

Note:- I'm using the Pages directory.

Next steps, to read the file system, we need to install the fs module by issuing this command,

Custom Json Object

After that, go to the app which you have created, then create a folder name in the root directory of the project, and the file name will be dummy, and it doesn't matter what you want to name it, but give a write path name when reading the file system.

After that, create a JSON file inside the dummy folder, and it should contain a hyphen and dot JSON in the end,

For instance (how-to-create-api.json)

{
    "title": "how to solve json multiline.",
    "content":"This is example",
    "author": "BY Deepak Painkra",
    "date":"23 June 2023",
    "metadesc": "This is example",
    "slug": "example"
    
}

Then after we are going to create a JSON object like this one,

Note:- You can use a Dummy JSON server as well.

To add image put your file into the public folder, then add the url into the json object.

 

What is Static Site Generation?

SSG is a NextJS feature which we will use to generate the HTML static file at the run time. It is also called a prerendering strategy in NextJS.

First, we will create an object name data to let the JSON data and allConut will be equal to the data, by means length of the JSON file,

export async function getStaticProps(context) {
  let data = await fs.promises.readdir("blogdata");
  let allCount = data.length;
  let myfile;
  let allBlogs = [];
  for (let index = 0; index < 1; index++) {
    const item = data[index];
    myfile = await fs.promises.readFile(('dummy/' + item), 'utf-8')
    allBlogs.push(JSON.parse(myfile))
  }

  return {
    props: { allBlogs, allCount }, // will be passed to the page component as props
  }
}

export default Blog;

After that, we are creating object file to take the data. After that, we are going to make an array which is all data, and we will use for loop to fetch all the JSON files that are available in the data path,

First, it will index all the data, and then it will push all the JSON data into the file,

After that, it will return the props, which will pass to display them,

Next Steps, create a constant name, which will be Blog, then we will pass the prop to display them, we have created in the above.

 

Creating an Api to Serve content Dynamically

Next steps, let's create an api name blog.js to fetch data dynamically, and the path name will be pages/api folder.

Inside the blog.js file, import the fs, and then write this code inside the blog.js file, And With the help of fs, you can read and write in any file system.

Then we are going to write this code,

import * as fs from 'fs';

export default function handler(req, res) {

  fs.readFile(`dummy/${req.query.slug}.json`, 'utf-8', (err, data) => {
    if (err) {
      res.status(500).json({ error: "No such blog found" })
    }
    res.status(200).json(JSON.parse(data))
  })
}

We are using a handler, which takes (rea, res), and then we will use fs.readFile to read the blog data path, which we had created earlier, and then we will query the JSON file while using the (req. query) method with the help of [slug], which uniquely identifiers.

If any case, we get any error, then it will show up the res. status(500). JSON, which is an internal server error. Otherwise, it will parse the data as a JSON response.

Frontend Part

Okay, to show the output of this API. We are going to create another file name which is blog.js, and the path name will be pages/blog.js,

First, create a react function-based component, and if you have already installed any extension in your code vs code editor, then type rafce and hit enter, and it will automatically generate the react function-based component for you,

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import * as fs from 'fs';


// Step 1: Collect all the files from blogdata directory
// Step 2: Iterate through the and Display them

import React, { useEffect, useState } from 'react';
import styles from '../styles/Blog.module.css'
import Link from 'next/link';
import * as fs from 'fs';

// Step 1: Collect all the files from blogdata directory
// Step 2: Iterate through the and Display them

const Blog = (props) => {
  const [blogs, setBlogs] = useState(props.allBlogs);
  const [count, setCount] = useState(1)

  const fetchData = async () => {
    let d = await fetch(`http://localhost:3000/api/blog/?count=${count + 2}`)
    setCount(count + 1)
    let data = await d.json()
    setBlogs(data)
  };

Apart from that, I think you know how to use the map function and implement this to write blogs.map also, it retunes prope and gives it to an id, which can be random, but when you pass the prop, you need to enter the id or key, For instance {blog.title}

In this section, we are using useState to set all the data that are available in that folder,

We are using the fetch data function to fetch data from the api, which we had created earlier,

Note:- Always remember to change the count value whenever you add a new JSON file in the blog data path, initially, we have one file, so we have mentioned one.

First, lest import fs and react state function, then we are going to implement SSG for file-based routing ,