Next.js Discord

Discord Forum

New to Next js, Local Json fetching

Unanswered
Western thatching ant posted this in #help-forum
Open in Discord
Avatar
Western thatching antOP
Hi guys I'm new to the next js, and I wanted to load data from a local JSON. I wanted to fetch the data and display it in components.jsx file in my components folder. But I'm struggling. to make it happen and tips and suggestions would be appreciated.

10 Replies

Avatar
Whippet
did you find a solution? im running into the same problem, i tried putting the json into the public folder and reach it like this 
  const res = await fetch(`/json/projects.json`);
but it didnt work
Avatar
Whippet
if you are using page routing this might work https://www.slingacademy.com/article/next-js-read-and-display-data-from-a-local-json-file/ . with app routing i'm not sure yet
Avatar
joulev
you just import it?
import data from "./test.json";

export default function Page() {
  return <div>{data.name}</div>;
}
{
  "name": "john doe"
}
Image
Avatar
Whippet
in what location did you put the .json file?
Avatar
Whippet
more general question, is there a convention where json file should be in?
Avatar
joulev
Same directory, i use colocation as described in https://nextjs.org/docs/app/building-your-application/routing/colocation
Avatar
Western thatching antOP
Thanks a lot
@joulev