Next.js Website Boilerplate is an open-source website starter kit from Cosmic that combines Next.js with the Cosmic headless CMS to deliver dynamic pages, blog articles, author management, SEO, a contact form, and full-site search.
What is Next.js Website Boilerplate?
Next.js Website Boilerplate is a ready-to-run Next.js application that uses Cosmic as its content backend. It takes a Cosmic Bucket as input — including pages, blog posts, authors, and contact information — and produces a fully responsive website with SEO and search. It is maintained by Cosmic and distributed under an open-source license on GitHub, with a live demo hosted at cosmicjs.com/apps/nextjs-website-boilerplate.
Key Features
- Responsive frontend — Built with Bootstrap, the template is fully responsive down to mobile devices.
- SEO ready — The template includes SEO metadata handling for pages and blog articles.
- Contact form with SendGrid — The contact page sends submissions to email addresses you choose and to Cosmic for reference; it relies on the SendGrid Email Function and a SendGrid API key.
- Full-site search — A search feature lets visitors search across all content managed in Cosmic.
- Cosmic CMS integration — All site content is managed in Cosmic, and the repository includes a bucket.json file that you import to install demo content.
- Author management — Blog articles support authors, managed as objects in Cosmic.
- Dynamic pages — The template supports creating dynamic pages beyond the fixed homepage and blog index.
Who is it for?
Next.js Website Boilerplate is for developers who want a production-ready starting point for a content-driven Next.js website without building common features from scratch. It is also for teams already using Cosmic as their headless CMS who need a reference implementation for pages, blog, and search. Content editors benefit because they can update pages and blog posts through the Cosmic dashboard without touching code.
Use cases
- Early-stage startups can launch a marketing site with a blog, contact page, and search in a day by importing the demo bucket and customizing the content.
- Agencies can use the boilerplate as a base for client sites that need a CMS-backed blog and dynamic pages, then extend it with custom Next.js pages or components.
- Developers learning Next.js can study a real integration between Next.js and a headless CMS, including server-side rendering and data fetching patterns.
How does it work?
Clone the repository from GitHub, run npm install, and import bucket.json into your Cosmic Bucket under Settings > Import/Export Data. Start development with npm run dev at localhost:3000. For production, set the COSMIC_BUCKET environment variable to your bucket slug and run npm run build then npm start. To make the contact form send email, deploy the SendGrid Email Function from the Cosmic Functions dashboard, add your SendGrid API key, and set the SENDGRID_FUNCTION_ENDPOINT in config/index.js for local testing or via Web Hosting environment variables for production.
FAQ
Does the contact form work immediately?
No. The contact form requires you to deploy the SendGrid Email Function from your Cosmic Bucket's Functions settings, create a SendGrid account and API key, and set the SENDGRID_FUNCTION_ENDPOINT environment variable.
What content types does the template support?
The core content types are pages, blog articles, and authors. Contact information is also managed as content in Cosmic, so page text, blog posts, and the contact details are all editable in the CMS.
Can I use this without a Cosmic account?
The template is designed around Cosmic. You need a Cosmic Bucket to import the demo content and manage site data, and the site reads content from your bucket at runtime.
