Blog with Next.js

npm i @cosmicjs/sdk

# .env.local
BUCKET_SLUG=your_bucket_slug
BUCKET_READ_KEY=your_read_key

// app/page.tsx
import { createBucketClient } from '@cosmicjs/sdk';

const cosmic = createBucketClient({
  bucketSlug: process.env.BUCKET_SLUG,
  readKey: process.env.BUCKET_READ_KEY,
});

export default async function Page() {
  const { objects: posts } = await cosmic.objects
    .find({ type: 'blog-posts' })
    .props('title,slug,metadata');

  return (
    <ul>
      {posts?.map((post) => (
        <li key={post.slug}>{post.title}</li>
      ))}
    </ul>
  );
}