yarn create redwood-app

cd cosmic-redwood

yarn install

yarn rw dev

yarn redwood generate page home /

cd web/src

npm i @cosmicjs/sdk

// web/src/pages/HomePage/HomePage.tsx
import { createBucketClient } from '@cosmicjs/sdk';

import { Metadata } from '@redwoodjs/web';

// app/page.tsx
const cosmic = createBucketClient({
  bucketSlug: process.env.REDWOOD_ENV_BUCKET_SLUG || '',
  readKey: process.env.REDWOOD_ENV_BUCKET_READ_KEY || '',
});

const { objects: posts } = await cosmic.objects
  .find({
    type: 'blog-posts',
  })
  .props('title,metadata.image,metadata.content');

const HomePage = () => {
  return (
    <>
      <Metadata title="Blog" description="Blog home page" />
      <h1>Blog</h1>
      {posts?.map(
        (post: {
          title: string;
          metadata: { image: { imgix_url: string }; content: string };
        }) => {
          return (
            <div key={post.title}>
              <div>{post.title}</div>
              <div>
                <img
                  src={`${post.metadata.image.imgix_url}?w=500&auto=format,compression`}
                  alt={post.title}
                />
              </div>
              <div
                dangerouslySetInnerHTML={{ __html: post.metadata.content }}
              />
            </div>
          );
        }
      )}
    </>
  );
};

export default HomePage;

# .env
REDWOOD_ENV_BUCKET_SLUG=add_your_bucket_slug_here
REDWOOD_ENV_BUCKET_READ_KEY=add_your_bucket_read_key_here

yarn rw dev