I created a getData.ts file for fetching data in a certain format:
export async function getData(){
const res = await fetch("http://localhost:3001/projects")
return res.json()
}
The data structure I was aiming to retrieve looks like this:
"projects":[{
"title": "Project 1",
"description": "Description 1",
"tags": ["example", "notReal", "placeholder", "lol", "rofl"],
"imageURL": "project1IMG"
},{
"title": "Project 2",
"description": "Description 2",
"tags": ["you", "get", "the", "idea"],
"imageURL": "project2IMG"
},
For displaying all the projects, I designed a Projects component which utilizes fragments:
import React from "react"
import { getData } from "@/lib/getdata"
import Project from "./project"
export default async function Test() {
interface projectType{
title: string,
description: string,
tags: [],
imageURL: string
}
const projects: projectType[] = await getData()
return (
<section className="group">
<div>
{
projects.map((project, index) => (
<React.Fragment key={index}>
<Project {...project} />
</React.Fragment>
))
}
</div>
</section>
)
}
However, I am struggling with referencing images stored in @/public while hosting JSON on a different server...
Here is the basic structure of each project without styling applied:
import Image from "next/image"
type ProjectProps = typeof projectsData[0]
export default function Project({
title,
description,
tags,
imageURL,
}: ProjectProps){
return (
<div>
<h1>{title}</h1>
<p>{description}</p>
<ul>
{tags.map((tag: string, index: number) => (
<li
key={index}>{tag}</li>
))}
</ul>
<Image
src={imageURL}
alt="placeholder"
width="100"
height="100"
/>
</div>
)
}
(extra points for refining my TypeScript declarations)
I have tried various approaches but it seems like there is a crucial element missing in my logic...