https://github.com/cosmicjs/simple-nextjs-blog
A simple blog powered by Next.js and the Cosmic headless CMS
https://github.com/cosmicjs/simple-nextjs-blog
api cms cosmicjs headless-cms nextjs
Last synced: 5 months ago
JSON representation
A simple blog powered by Next.js and the Cosmic headless CMS
- Host: GitHub
- URL: https://github.com/cosmicjs/simple-nextjs-blog
- Owner: cosmicjs
- Created: 2023-05-30T13:53:41.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-14T02:23:30.000Z (11 months ago)
- Last Synced: 2025-02-07T15:08:41.201Z (5 months ago)
- Topics: api, cms, cosmicjs, headless-cms, nextjs
- Language: TypeScript
- Homepage: https://cosmic-nextjs-blog.vercel.app
- Size: 203 KB
- Stars: 57
- Watchers: 5
- Forks: 21
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple Next.js Blog
### [View Demo](https://cosmic-nextjs-blog.vercel.app/)
### React + Next.js + Cosmic
This blog uses Next.js to create a React blog. It uses Next.js 15 and the new [Partial Prerendering](https://vercel.com/blog/partial-prerendering-with-next-js-creating-a-new-default-rendering-model) to optimize performance and user experience. It connects to the Cosmic API via the [Cosmic JavaScript SDK](https://www.npmjs.com/package/@cosmicjs/sdk).
### Opimized for speed and performance
## Getting Started
1. Log in to Cosmic and install the [Simple Next.js Blog template](https://www.cosmicjs.com/marketplace/templates/simple-nextjs-blog).
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](https://app.cosmicjs.com/login) 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](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.
