Static json
files can be used to store data that does not change regularly, and is used by multiple pages. These files can be stored in your applications public folder, and loaded directly with a GET
request. This approach can have security concerns however. A possible solution is to:
json
files in a private folder inside your applicationBefore getting started, you should be able to:
Next.js
app on VercelNext.js
API routesSWR
in your projectGiven a basic Next.js
project created with npx create-next-app@latest
or a new template on Vercel, let's create a folder called json
at the root of the project, and inside it, create a file called data.json
.
Begin by pasting the following content into the data.json
file:
{
"record": {
"id": 8221,
"uid": "a15c1f1d-9e4e-4dc7-9c45-c04412fc5064",
"name": "Next.js",
"language": "JavaScript"
}
}
Next add a file called staticdata.js
inside the pages/api
folder. This will create a Serverless Function that will load the json data from the file, and return it as a response.
Now paste the following code in the staticdata.js
file:
import path from 'path';
import { promises as fs } from 'fs';
export default async function handler(req, res) {
//Find the absolute path of the json directory
const jsonDirectory = path.join(process.cwd(), 'json');
//Read the json data file data.json
const fileContents = await fs.readFile(jsonDirectory + '/data.json', 'utf8');
//Return the content of the data file in json format
res.status(200).json(fileContents);
}
Code reading the `/json/data.json`
file and returning it's contents
Inside the index.js
file, located in the pages
folder, replace the content with the following code:
//useSWR allows the use of SWR inside function components
import useSWR from 'swr';
//Write a fetcher function to wrap the native fetch function and return the result of a call to url in json format
const fetcher = (url) => fetch(url).then((res) => res.json());
export default function Index() {
//Set up SWR to run the fetcher function when calling "/api/staticdata"
//There are 3 possible states: (1) loading when data is null (2) ready when the data is returned (3) error when there was an error fetching the data
const { data, error } = useSWR('/api/staticdata', fetcher);
//Handle the error state
if (error) return <div>Failed to load</div>;
//Handle the loading state
if (!data) return <div>Loading...</div>;
//Handle the ready state and display the result contained in the data object mapped to the structure of the json file
return (
<div>
<h1>My Framework from file</h1>
<ul>
<li>Name: {data.record.name}</li>
<li>Language: {data.record.language}</li>
</ul>
</div>
);
}
This code uses SWR
to make a request to the API route /api/staticdata
and display some of the content in the browser.
swr
in your project using yarn add swr
or npm install swr
npm run dev
When you browse to localhost:3000
, you should see the same content as on this page. You can now deploy your application to Vercel to produce the same results.
As reference:
SWR
to take advantage of keeping your data fresh without having to write additional codeNext.js