如何通过 NextJS 网站中的 Contentful API 从单个页面获取内容? [英] How can I fetch content from a single page throught Contentful API in a NextJS website?

问题描述

我在这里和那里找到了一些关于从 Contentful 采购到 NextJS 的指南，您可以在其中为静态博客提供内容.这是一个起点.

I've found some guides here and there about sourcing from Contentful into NextJS, where you can feed a static blog with content. That's a starting point.

但是对于单页内容，我无法使用 API 获得任何结果.不知道为什么.

But as for single pages contents, I cannot reach any results using the API. Not sure why.

这是我正在处理的代码的一些摘录，并附有解释结构的注释.

Here's some excerpt of the code I'm working on with comments to explain the structure.

// components/layout.js
(...)

import client from '../utils/contentful/client' // <-- This imports the call for contentful [const contentful = require('contentful')]

// The function bellow is supposed to reach the content and export it as a props, right?
export async function getStaticProps({entryId}) {
  const paginas = await client
  .getEntries({ content_type: "paginas" })
  .getEntry({ entry_id: entryId })
  .then((response) => response.items)
  return {
    props: {
      paginas
    },
  }
}

// This function bellow is called within the <Footer /> where I pass the entry_id as a props
export function ContatoPage({ pagina }) {
  getStaticProps(pagina) 
    // Is this how it works? Can I call this function getStaticProps() here so the 
    //props will be reached in the constant bellow?
  
const { titulo, content } = paginas.fields
  return (
    <Box>
      <Heading>{titulo}</Heading>
      <p>{content}</p>
    </Box>
  )
}


// There's a static contact info page hanging on every footer and I'm trying to fetch it's values from Contentful.

function Layout( ... ) {
return (
(...)
<Footer>
  <ContatoPage pagina="<entry_id>" /> // this is where I pass the string value for the page I'm trying to reach.
</Footer>
} 

export default Layout

任何想法或评论将不胜感激.

Any thoughts or comments will be immensely appreciated.

推荐答案

我在解决这个问题时遇到了很多麻烦，感谢 @stefan-judis，谁指出了 getEntries 和 getEntry 的误用，我在此方面取得了更好的效果.

I had a lot of trouble figuring this out and thanks to @stefan-judis, who pointed out the misuse of getEntries and getEntry together, I had a lead on the approach that would work better for this.

事实上，它是有文档记录的，但对于像我这样的初学者来说，由于获取内容的 API 和方法数量众多，有时获取有关 contentful 的文档可能有点奇怪.

It is, in fact, documented, but for beginner users like me, sometimes documentation on contentful can be a little weird to get, due to the wide number of APIs and methods on fetching content.

我所做的对我有用的是设置一个异步函数，在那里我使用查询调用条目.我习惯于使用 graphQL 使用 Gatsby 查询内容，所以我误解了逻辑 - 就像我说的，没有足够的经验.

What I did that worked for me was to set an async function where I called the entries using queries. I'm used to query content with Gatsby using graphQL so I misunderstood the logic - like I said, no experience enough.

// client-contentful.js <-- This is a simple caller for the client
const { createClient } = require('contentful')

const client = createClient({
  space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE,
  accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN
})

module.exports = client

// ***.js
import client from 'client-contentful.js'

// Set content for the page 
export async function getStaticProps() {
  let data = await client.getEntries({
    content_type: 'paginas', // <-- set content_type
    'fields.slug': 'inicio'  // <-- filter the page with the slug (you can pass it as a props too)
  })
  return {
    props: {
      pagina: data.items[0] // <-- this will set the query as a prop
    }
  }
}

export function Page({ pagina }) {
  const { titulo, slug, section } = pagina.fields

      return (
        <main id={slug}>
            <h1>{titulo}</h1>
            <RenderSection section={section} />

        </main>
    )
}

您可以通过多种方式使用它，因为它已在其他地方记录.这是我经过一番挣扎后找到的解决方案.

You can use this in many ways, as it is documented in other places. This is a solution I found out after some struggle.

现在，我仍然对部分部分有问题，我希望在映射中呈现页面中的条目.立即着手处理.

Now, I still have a problem with the section part, where I have entries in my pages that I'd like to render in a mapping. Working on it right now.

这篇关于如何通过 NextJS 网站中的 Contentful API 从单个页面获取内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！