A climate initiatives listing application built in Next.js 🤘
Headless CMS powered by Strapi 🟪
API backend deployed to Heroku ⚡
Front-end deployed to Vercel ▲

Features • Spin up • Deployment

What is Strapi?

Strapi is an open-source headless CMS used for building fast and easily manageable APIs written in JavaScript. It enables developers to make flexible API structures easily using a beautiful user interface.

What is Next.js?

Next.js is an open-source development framework built on top of React enabling React based web applications functionalities such as server-side rendering and generating static websites.

✨ Features

• Strapi CMS backend
• Strapi Component feature with these components included:
  • Hero
  • Navigation
  • Content
  • Footer
• Strapi form submission using the create collection type endpoint
• Static site generation and Incremental Static Regeneration with Next.js
• Utility-first CSS with Tailwind CSS
• Modular page content for all pages, including hero and content blocks
• Page-level SEO settings

⚡ Spin Up

Strapi (Back End)

yarn develop in the at the root of this Strapi backend project folder to start the admin dashboard locally

• Your Strapi admin dashboard should be running on http://localhost:1337

Once you have added data in the collection types and single types, you would need to:

• Save and publish the content
• Go under Settings > Roles > Public to select all the necessary find and findOne actions in the single and collection types. You will also need to select the create action for the listing collection type for the form submission to work.

Next (Front End)

yarn dev in the Next.js front-end project root to start the front end locally

• Your front end should be running on http://localhost:3000

You should be able to see all the pages populated if you've created all the necessary collection and single types content.

🚀 Deployment

Strapi

You will need the Strapi backend project to deploy the backend API to production. Follow the steps here. The production backend was deployed to Heroku using PostgreSQL for the database. More details here on how to deploy to production using Heroku.

Vercel

The Next.js front-end is easily set up to be deploye to Vercel. Simply follow the deployment documentation to setup your new project to deploy. Be sure to add the same .env.example variables to your Vercel Project.

📚 Learn more

• Strapi resource center - Strapi resource center.
• Strapi documentation - Official Strapi documentation.
• Next.js documentation - Official Strapi documentation.