Next.js + Sanity CMS Boilerplate

A starter project to integrate Sanity CMS with Next.js 14 and TailwindCSS.
Explore the docs »

Report Bug · Request Feature

About The Project

This project integrates Next.js 14, Sanity CMS, and TailwindCSS to provide a fully functional starter for developers who want a streamlined and scalable website setup. It includes Sanity Studio embedded within the Next.js project, allowing content creators to manage the website directly from a /admin route.

The main goal of this boilerplate is to provide a simple and maintainable structure, making it easy to scale as your content grows.

Features:

• Seamless integration with Sanity CMS for dynamic content management.
• TailwindCSS for fast and responsive styling.
• Optimized image handling via Sanity’s CDN.
• Modular and scalable structure with server-side rendering and static site generation.
• A built-in admin interface for managing content via Sanity Studio.

(back to top)

Built With

• 
• 
• 

(back to top)

Getting Started

To get this project set up and running on your local machine, follow these simple steps.

Prerequisites

Ensure that you have the following installed on your machine:

• Node.js >= 14.x
• npm or yarn
• Sanity Account

Installation

1. Clone the repo

   git clone https://github.com/jrparente/next-sanity-boilerplate.git

2. Navigate to the project directory

    cd next-sanity-boilerplate

3. Install NPM packages

   npm install

4. Create a new Sanity project:

   npm create sanity@latest

5. Add your Sanity project details to .env.local:

   NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
   NEXT_PUBLIC_SANITY_DATASET=your_dataset

6. Run the development server:

   npm run dev

7. Access Sanity Studio at: http://localhost:3000/admin

(back to top)

Usage

This boilerplate serves as a foundational setup for creating dynamic, content-rich websites. You can easily extend it by adding new content types in Sanity, and the TailwindCSS integration ensures that the styling is responsive and customizable.

To create new content blocks or page layouts:

1. Create a new schema in Sanity Studio.
2. Create new Components in the components directory.
3. Fetch the data in the relevant page or component using Sanity's GROQ queries in your server components.

You can find a step-by-step guide on how to use this project in the Medium article.

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Joana Parente - @joana_r_parente - jrparente@gmail.com

Project Link: https://github.com/jrparente/next-sanity-boilerplate

(back to top)