The new Cosmic dashboard is here!
Test drive it now →

Next.js Website Boilerplate

Community Articles
Community Articles Next.js Website Boilerplate

Check out this website boilerplate built on Next.js and Cosmic. It satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search.

TL;DR

Download the Next.js Website Boilerplate GitHub repo.
Check out the demo.

Features

1. Fully responsive down to mobile w/ Bootstrap frontend
2. SEO ready
3. A contact form that sends an email to your email(s) of choice and to Cosmic for easy reference
4. Full-site search functionality
5. All content is easily managed in Cosmic including pages, blog and contact info. Sign up for Cosmic to install the demo content and deploy this website. 

Get started

git clone https://github.com/cosmicjs/nextjs-website-boilerplate
cd medical-professional-next-js  
npm install

Import the bucket.json file into your Cosmic Bucket.  To do this go to Your Bucket > Settings > Import / Export Data.  Or install the app via the Next.js Website App page



Run in production

COSMIC_BUCKET=your-bucket-slug npm start 

Go to http://localhost:3000 

Run in development

 npm run dev

 Go to http://localhost:5000

Config 

Contact email Because Next.js doesn't have a mail server, the contact form uses mailgun to send the email. So add the following constants in the config file.


You may also like


Cosmic lets you build one-to-one as well as one-to-many Object Relationships within your Bucket Dashboard. To help you and your team manage content more seamlessly, you can now see your Connected Objects located on the Object’s Edit page in the Dashboard.
Why should you migrate your CMS? What's the big deal about Cosmic? This article should answer some questions you have about cosmicJS and what the pros and cons are of using an API-driven Content Management System
To demonstrate how easy it is to get started with Cosmic, we'll utilize the Cosmic CLI to quickstart a Vue.js Music App. This Music website was built using Vue, Nuxt and Cosmic. Users can upload and play tracks, upload and manage album art plus leave comments.
Here I am going to explain the complete process to implement an Angular 6 blog, which uses Cosmic as back-end.
Cosmic Community Member Reagan McFarland just debuted the new Alexa Skill codebase to add Objects to your Cosmic Bucket via voice. In this video, Cosmic co-founder Tony Spiro takes you on a quick tour of how to demo the Alexa To Do app from the Alexa developer console.
In this tutorial I’ll demonstrate how to build an Authentication app using Angular 6 and Cosmic. Starting from scratch, learn how to build, configure and deploy this Angular6 Auth app to the Cosmic App Server for testing purposes.

Get Started with Cosmic

Build personal projects for free. Add your team at unbeatable prices.
Start Building Talk to Sales