Simple Next.js Blog

View Demo

React + Next.js + Cosmic

This blog uses Next.js to create a React blog. It uses Next.js 15 and the new Partial Prerendering to optimize performance and user experience. It connects to the Cosmic API via the Cosmic JavaScript SDK.

Opimized for speed and performance

Getting Started

1. Log in to Cosmic and install the Simple Next.js Blog template.
2. Run the following commands to install the code locally.

git clone https://github.com/cosmicjs/simple-nextjs-blog
cd simple-nextjs-blog

Environment Variables

1. Create an .env.local file to gain API access to your Cosmic Bucket. To do this, run:

cp .env.example .env.local

2. Find your API access keys at Bucket Settings > API Access after logging into your Cosmic dashboard and add them to the .env.local file. It should look something like this:

COSMIC_BUCKET_SLUG=your-bucket-slug
COSMIC_READ_KEY=your-bucket-read-key

Run in development

Install all dependencies and run in development mode.

yarn
yarn dev

Open http://localhost:3000.

Deploy to Vercel

Use the following button to deploy to Vercel. You will need to add API accesss keys as environment variables. Find these in Bucket Settings > API Access.