Loading content from a static JSON Next JS

Question

I have Next JS project with static JSON placed in /pages/api/data.json that looks like this:

{
 "Card": [
   { "title": "Title 1", "content": "Content 1" },
   { "title": "Title 2", "content": "Content 2" },
   { "title": "Title 3", "content": "Content 3" }
 ]
}

I'm trying to get the content from that JSON to load in a couple of sections like this:

import { Card } from "../api/data";

export const getStaticProps = async () => {
  return {
    props: { cardData: Card },
  };
};

export default ({ cardData }) => (
  <>
    const card = cardData.title; console.log(cardData);
    { {cardData.map((cardData) => (
      <div>
        <h3>{cardData.title}</h3>
        <p>{cardData.content}</p>
      </div>
    ))}; }
  </>
);

But I'm getting a Type: Undefined error and I'm pretty sure that's not how the function should look like.

Also, if I want to export that as a component that I can use in my index.js, would I have to name the export default function? repo link here: https://github.com/DoctorSte/remoteOS

score 15 · Answer 1 · edited Sep 01 '22 at 13:42

15

No need for getStaticProps here, Webpack will bundle the JSON for you at build time. Here's a working example with your contact.js page:

import "tailwindcss/tailwind.css";

import Footer from "./components/footer";
import Form from "./components/form";
import Navbar from "./components/Navbar";

import Cards from "./api/data.json"

export default function Contact() {
 
 console.log(Cards['Cards 1'][0].title); // Title 1

 return (
    <>
      <Navbar />
      <Form />
      <Footer />
    </>
  );
}

edited Sep 01 '22 at 13:42

OGreeni

572
5
17

answered Aug 25 '21 at 21:55

Alex A.

845
8
10

this answer inspired me good and help – Geery.S Apr 24 '22 at 13:55
had to change to `import Cards from "../api/data.json"` to make it work. thanks! – Arye P. Apr 09 '23 at 05:39

score 1 · Answer 2 · answered Mar 13 '23 at 08:03

In my case I imported it like the example below

mock/database.json

[
  {
    "id": 1,
    "name": {
      "first": "John",
      "last": "Smith"
    },
    "total": 2795.95,
    "status": "On Hold",
    "method": "PayPal",
    "date": "15 Minutes ago"
  },
  ...
]

components/RecentOrders.tsx

import data from "@/mock/database.json";

const RecentOrders = () => {
  return <div>{JSON.stringify(data, null, 2)}</div>;
};

export default RecentOrders;

Loading content from a static JSON Next JS

2 Answers2

mock/database.json

components/RecentOrders.tsx

Linked