---
title: "Azure CosmosDB - Next.js Starter"
description: "This is a Next.js project that uses @azure/cosmos JS SDK to connect to a Azure Cosmos DB database."
url: "https://vercel.com/templates/next.js/azure-cosmosdb-nextjs-starter"
links:
  repository: "https://github.com/Azure/azurecosmosdb-vercel-starter"
  demo: "https://cosmosdb-vercel-starter.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Azure+CosmosDB+-+Next.js+Starter&demo-description=This+is+a+Next.js+project+that+uses+%40azure%2Fcosmos+JS+SDK+to+connect+to+a+Azure+Cosmos+DB+database.&demo-url=https%3A%2F%2Fcosmosdb-vercel-starter.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F1HV8sUYtt73QAbVPGkzlwA%2Ffe3d4c70117c39f9e05b3aa5c1b57249%2Fazure-cosmosdb-thumbnail.png&project-name=Azure+CosmosDB+-+Next.js+Starter&repository-name=azure-cosmosdb-nextjs-starter&repository-url=https%3A%2F%2Fgithub.com%2FAzure%2Fazurecosmosdb-vercel-starter&from=templates&integration-ids=oac_C9lX7rbEavQCcZZQkF5mP8sn&env=COSMOSDB_CONTAINER_NAME%2CCOSMOSDB_DATABASE_NAME"
---

# Azure CosmosDB - Next.js Starter

This is a Next.js project that uses @azure/cosmos JS SDK to connect to a Azure Cosmos DB database.

# Azure Cosmos DB Starter – Todo App

A simple Todo App built on [Next.js](https://nextjs.org/) and [Azure Cosmos DB](https://aka.ms/trycosmosdbvercel), deployed on [Vercel](https://vercel.com/) with the [Vercel + Azure Cosmos DB integration](https://vercel.com/integrations/azurecosmosdb).

## Deployment Instructions

### Pre requisites

Azure [Cosmos DB account](https://aka.ms/trycosmosdbvercel), database and container. Please make sure the [Partition Key](https://learn.microsoft.com/en-us/azure/cosmos-db/partitioning-overview) for container is '/id'.

### Steps

- Install dependencies from the root folder - `npm install`

- Rename sample.env to .env and set appropriate variables.

  - COSMOSDB_CONNECTION_STRING : This is the connection string for Azure Cosmos DB.
  - COSMOSDB_DATABASE_NAME : This is the name of the database to store todos.
  - COSMOSDB_CONTAINER_NAME : This is the name of the container to store todos.

You can obtain the connection string by navigating to your Azure Cosmos DB account page's key blade, and select Primary connection string. Copy the value to use.

- Start the project - `npm run dev`

## Demo

https://cosmosdb-vercel-starter.vercel.app/

## Vercel + Azure Cosmos DB Integration

https://vercel.com/integrations/azurecosmosdb

## Related Templates

### [Next.js Commerce](https://vercel.com/templates/next.js/nextjs-commerce)

Starter kit for high-performance commerce with Shopify.

### [Next.js Enterprise Boilerplate](https://vercel.com/templates/next.js/nextjs-enterprise-boilerplate)

Enterprise-grade Next.js boilerplate built with Tailwind CSS, Radix UI, TypeScript, ESLint, Prettier, Jest, Playwright, Storybook, etc.

## Related Integrations

### [Azure Cosmos DB](https://vercel.com/marketplace/azurecosmosdb)

Integration with Vercel made easy

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.