Question

我想将使用Airtable作为简单数据库添加到我的投资组合站点的项目添加。

我已经成功获取并显示了项目并路由到每个项目ID。但是，我对如何从该特定项目中获取其他数据并进行显示一无所知。静态地。

从Airtable功能获取数据：

export async function getProjectsData() {
  const res = await fetch(
    `https://api.airtable.com/v0/${BASE_KEY}/Projects?api_key=${API_KEY}`
  );
  const airtable = await res.json();

  const projectData = await airtable.records
    .map(record => {
      return {
        name: record.fields.Name,
        notes: record.fields.Notes,
        siteURL: record.fields.SiteURL,
        codeURL: record.fields.CodeURL,
        screenshots: record.fields.Screenshots.map(img => img.url),
        tech: record.fields.Tech,
        id: record.fields.ID,
      };
    })
    .sort((a, b) => {
      if (a.id < b.id) {
        return -1;
      } else return 1;
    });
  return projectData;
}

使用getStaticProps（）在首页上显示每个项目的名称

          <ul>
            {projects.map((project, index) => (
              <li key={index}>
                <h3>{project.name}</h3>
                <Link href='/projects/[id]' as={`/projects/${project.id}`}>
                  <a>Find out more</a>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </main>
    </div>
  );
}
export async function getStaticProps() {
  const projects = await getProjectsData();

  return {
    props: {
      projects,
    },
  };
}

对于每个发送到此页面但有动态标记的项目，单击上方的链接，将[id].js用于动态路由。

export default function Project() {
  return (
    <div>
      <h1>This is a project</h1>
      <Link href='/'>
        <a>Home</a>
      </Link>
    </div>
  );
}

我的问题是我希望使用动态路由和SSG在项目页面上显示其余项目数据。我已经阅读了文档。

任何帮助将不胜感激。

静态网站的动态路由？

0 个答案: