New to Next js, Local Json fetching
Unanswered
Western thatching ant posted this in #help-forum
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
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`);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
@Western thatching ant 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.
you just import it?
import data from "./test.json";
export default function Page() {
return <div>{data.name}</div>;
}{
"name": "john doe"
}Whippet
in what location did you put the .json file?
Whippet
more general question, is there a convention where json file should be in?
@Whippet in what location did you put the .json file?
Same directory, i use colocation as described in https://nextjs.org/docs/app/building-your-application/routing/colocation
Western thatching antOP
Thanks a lot
@joulev