Next.js를 사용한 이전 및 다음 게시물

나는 이것을 알아내려고 몇 주를 보냈고, 당신이 같은 일을 겪게 만들지는 않을 것입니다. 바로 들어가자...

문제

graphql을 통해 가져온 게시물이 있는 Next.js 사이트에서 이전 및 다음 POST를 구현하는 방법은 무엇입니까? 이것은 게시물의 상세 보기에 있을 것입니다.

해결책

The solution below uses graphql and Contentful but can be modified to wherever you want to apply it.

const ARTICLE_QUERY = `
query {
    articleCollection(order: publishedAt_DESC) {
      items {
        slug
        title
        excerpt
        category {
          title
          categorySlug
        }
        series {
          title
          slug
        }
        body {
          json
        }
      }
    }
  }

`;

async function fetchGraphQL(query) {
  return fetch(
    `https://graphql.contentful.com/content/v1/spaces/${process.env.SPACE_ID}`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.CDA_TOKEN}`,
      },
      body: JSON.stringify({ query }),
    }
  )
    .then((response) => response.json())
    .catch((error) => console.error(error));
}

export async function getPostAndMorePosts(slug) {
  const response = await fetchGraphQL(ARTICLE_QUERY);
  const posts = response.data.articleCollection.items;

  const currentPost = posts.find((post) => post.slug === slug);
  const currentPostIndex = posts.findIndex((post) => post.slug === slug);
  const prevPost = posts[currentPostIndex - 1] || posts[posts.length - 1];
  const nextPost = posts[currentPostIndex + 1] || posts[0];

  if (!currentPost) {
    return {
      post: false,
    };
  }

  return {
    post: currentPost,
    morePosts: [prevPost, nextPost],
  };
}

위의 코드에서:

기사 쿼리를 생성하고 쿼리를 수행하는 함수를 만듭니다. - fetchGraphQL

그런 다음 getPostAndMorePosts를 매개변수로 사용하는 비동기 함수slug를 내보냅니다. 여기에서 fetchGraphQL를 사용하여 모든 게시물을 배열로 가져옵니다.

find를 사용하여 전달된 슬러그 매개변수와 일치하는 슬러그가 있는 게시물을 가져옵니다. - currentPost

currentPost를 인덱스로 사용하여 이전 게시물과 이후 게시물을 얻습니다. 이들은 각각 이전 게시물과 다음 게시물이 됩니다

.

마지막으로 currentPost를 게시물로 반환하고 morePosts를 이전 및 다음 게시물의 배열로 반환합니다.

[slug].js에서:

import getPostAndMorePosts from '../../lib/api'

export async function getStaticPaths() {
  ...
}

export async function getStaticProps({ params }) {
  const data = await getPostAndMorePosts(params.slug);

  return {
    props: {
      post: data?.post ?? null,
      morePosts: data?.morePosts ?? null,
    },
  };
}

export default function Post({ post, morePosts }) {
    ...
}

동적 페이지에서:

getPostAndMorePosts를 가져옵니다. getStaticProps에서 params를 전달한 후 getStaticPaths에서 사용합니다.

getStaticProps 에서 params.slug를 getPostAndMorePosts로 전달하여 다음을 얻습니다.

현재 게시물 데이터

이전 및 다음 게시물 데이터

마지막으로 이 데이터를 구성 요소에 전달하고 데이터를 렌더링합니다.

전체 구현이 포함된 저장소는 다음과 같습니다.
https://github.com/stefanjudis/jamstack-workshop/blob/main/lib/api.js

결론

감사합니다. 도움을 주신 모든 분들께 감사드립니다.

The full story of how we got here is coming in another article. It really puzzles me how there isn't a native solution for this. Gatsby has it, WordPress does as well. What happened here Next.js?

읽어주셔서 감사합니다. 연결합시다!

저의 작은 구석을 찾아주셔서 감사합니다. , Polywork 및 )에 연결해 보겠습니다.