React: How to integrate React with headless CMS (Strapi, Contentful)?

1import { createClient } from "contentful";
2
3// Client
4const client = createClient({
5  space: process.env.CONTENTFUL_SPACE_ID,
6  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
7});
8
9// Server component (Next.js)
10async function BlogPost({ slug }) {
11  const entries = await client.getEntries({
12    content_type: "blogPost",
13    "fields.slug": slug,
14  });
15
16  const post = entries.items[0].fields;
17
18  return (
19    <article>
20      <h1>{post.title}</h1>
21      <time>{new Date(post.date).toLocaleDateString()}</time>
22      <div>{post.content}</div>
23    </article>
24  );
25}

1// Custom hook for Strapi API
2function useStrapi(collection, params = {}) {
3  const query = new URLSearchParams(params).toString();
4  const { data, isLoading, error } = useQuery({
5    queryKey: [collection, params],
6    queryFn: () =>
7      fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/${collection}?${query}`)
8        .then(res => res.json()),
9  });
10  return { data: data?.data, isLoading, error };
11}
12
13// Usage
14function Articles() {
15  const { data: articles, isLoading } = useStrapi("articles", {
16    "populate": "*",
17    "sort": "createdAt:desc",
18  });
19
20  if (isLoading) return <Spinner />;
21  return articles.map(a => <ArticleCard key={a.id} article={a} />);
22}