所以我做了一个getData.ts：

export async function getData(){
    const res = await fetch("http://localhost:3001/projects")
    return res.json()
  }

字符串
来获取类似这样的数据：

"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"
    },

型
我做了一个Projects组件来包含我所有的项目（* 片段用于一些顺风技巧 *）：

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>
      )
}

型
现在我有点难住了，如何用这个方法引用@/public中的图像。我可以在本地实现它，但我想在其他地方托管我的JSON，但我自己提供图像.
下面是每个项目的容器，去掉样式：

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>
    )
}

型
（* 修复我糟糕的 typescript 声明的加分 *）
尝试了很多东西，但我觉得我在这里缺少一个关键的逻辑.