Next.js Website Boilerplate


Check out this website boilerplate built on Next.js and Cosmic JS. 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 JS for easy reference
4. Full-site search functionality
5. All content is easily managed in Cosmic JS including pages, blog and contact info. Sign up for Cosmic JS 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 JS 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.


Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like


In this tutorial, I'm going to show you how to create a minimalistic but awesome single page app blog using Vue, Vuex, Vuetify, Cosmic JS and deploy it to Netlify.
This is a quick example to show some of the powerful things you can do with the Cosmic JS NPM Module. This script will, add a Bucket to your Cosmic JS account, add an Object Type (Pages) and add a few Pages.
You have the ability to add Quick Links to Your Cosmic JS Bucket Dashboard. Quick Links are a great way to easily navigate to other websites, shared resource documents, CRMs, task management software or team collaboration tools directly from your Cosmic JS Bucket Dashboard.
In this tutorial, Cosmic JS co-founder Tony Spiro takes you on a tour of Cosmic JS Webhooks. Learn how webhooks work, see how to easily install integrations with Slack, auto-deploy websites to Netlify, and get an intro to Cosmic JS Functions.
Now editors can use the new Unsplash Photos Extension to find and add stock photography to their media library, all from the comfort of their Bucket Dashboard without having to interface with a third-party website like Unsplash.
Cosmic JS has powerful content modeling and delivery tools to help you build apps faster, together. Cosmic JS lets you manage all your content, data and files and is unopionated as to the format of content you're uploading. The Cosmic Editor allows you to upload rich media such as video, images and