Community Articles Next.js Website Boilerplate

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 video, Cosmic JS co-founder Tony Spiro takes you on a tour of the new Cosmic CLI which allows you to do all of the awesome things you can with the Cosmic JS API, from the comfort of your command line interface.
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.
Cosmic JS 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.
In this tutorial, I'm going to show you how to create a elegant Recipe App using Vue2, Vuex, Vuetify and Cosmicjs.
Learn how I built the Twitter Search Extension to search and save Tweets to your Bucket.
Using Cosmic JS's Webhooks we can sync Algolia with Cosmic JS to provide search to our projects.

Ready to Get Started?

No payment info required.
Start Now   Contact Sales