Cosmic Logo

Follow the steps below to get started with Cosmic to power content for your Next.js application.

Install a new Next.js app

npx create-next-app@latest cosmic-next

Answer the prompts with the following answers:

  1. Would you like to use TypeScript? Yes
  2. Would you like to use ESLint? Yes
  3. Would you like to use Tailwind CSS? Yes
  4. Would you like to use src/ directory? No
  5. Would you like to use App Router? (recommended) Yes
  6. Would you like to customize the default import alias (@/*)? No

Go into the project folder.

cd cosmic-next

Install the Cosmic JavaScript SDK

Install the Cosmic JavaScript SDK in the location of the codebase.

npm i @cosmicjs/sdk

Add an Object type in the Cosmic dashboard

Log in to the Cosmic dashboard and create a new Blog Posts Object type in a new or existing Project with the following metafields:

  1. Image: Image type with key image
  2. Content: Rich text with key content

Blog model

Add content

Add a few blog posts to get some content ready to be delivered.

Add the following code to your app/page.tsx file

// 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 Home() {
  const { objects: posts } = await cosmic.objects
    .find({
      type: 'blog-posts',
    })
    .props('title,metadata.image,metadata.content');
  return (
    <>
      {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>
          );
        }
      )}
    </>
  );
}

Add your Cosmic API keys

In a new file titled .env.local add the following environment variables and make sure to switch out the values with your Cosmic API keys found in Project / API keys.

# .env.local
BUCKET_SLUG=add_your_bucket_slug_here
BUCKET_READ_KEY=add_your_bucket_read_key_here

Start the app

Start your app with the following command, go to http://localhost:3000, and see your blog posts.

npm run dev