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


Video: Build a Cosmic-powered blog using Gatsby
Thank you to everyone who joined us for our Halloween edition of our Wednesday Webinar series. In this presentation, we discussed making localization for websites less spooky using Gatsby and Cosmic.
In this tutorial, I'll show you how to deploy your Gatsby Blog to Netlify and trigger automatic rebuilds on content edits using Cosmic Webhooks.
In this Guide, I’m going to show you how Imgix Extension will provide optimized images for your application. Will also talk about the benefits, and show you how to install it to your Bucket in a few clicks.
Every blog needs a solid Content Management System (CMS). This allows content owners to control their content without having to hire a developer to make every single change to their site. Cosmic is a great choice for a CMS. In this how-to article, we’ll connect a React/Next.js app to Cosmic .
With revision history, you no longer have to worry about editing mistakes. You now have the power to go back in time and revert to to prior versions.

Get started with Cosmic

Personal projects are free. Scale up as you grow.
Start building Talk to sales