---
title: "Blog (with comments)"
description: "Next.js blog application with Auth0 and Upstash"
url: "https://vercel.com/templates/next.js/blog-with-comments"
links:
  repository: "https://github.com/vercel/next.js/tree/canary/examples/blog-with-comment"
  demo: "https://blog-with-comment.vercel.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Blog+%28with+comments%29&demo-description=Next.js+blog+application+with+Auth0+and+Upstash&demo-url=https%3A%2F%2Fblog-with-comment.vercel.app%2F&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F2doqzpUs8MxLW7oOEgxFyo%2F953a4291f415613e97d2c2cbd63d5464%2FAuth0-tempate.png&project-name=Blog+%28with+comments%29&repository-name=blog-with-comments&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fblog-with-comment&from=templates&integration-ids=oac_V3R1GIpkoJorr6fqyiwdhl17&env=NEXT_PUBLIC_AUTH0_DOMAIN%2CNEXT_PUBLIC_AUTH0_CLIENT_ID%2CNEXT_PUBLIC_AUTH0_ADMIN_EMAIL&envDescription=Learn+more+about+configuring+these+env+vars&envLink=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fblog-with-comment%233-configuring-upstash"
---

# Blog (with comments)

Next.js blog application with Auth0 and Upstash

# Blog with Comment

This project adds commenting functionality to [Next.js blog application](https://github.com/vercel/next.js/tree/canary/examples/blog) using Upstash and Auth0.

The comment box requires Auth0 authentication for users to add new comments. A user can delete their own comment. Also admin user can delete any comment.

Comments are stored in Serverless Redis ([Upstash](http://upstash.com/)).

### Demo

[https://blog-with-comment.vercel.app/](https://blog-with-comment.vercel.app/)

## `1` Project set up

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)
with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the
example:

```bash
npx create-next-app --example blog-with-comment blog-with-comment-app
```

## `2` Set up environment variables

Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):

```bash
cp .env.local.example .env.local
```

## `3` Configuring Upstash

Go to the [Upstash Console](https://console.upstash.com/) and create a new database

#### Upstash environment

- `REDIS_URL`: Find the URL in the database details page in Upstash Console clicking on **Redis Connect** button.

## `4` Configuring Auth0

1. Go to the [Auth0 dashboard](https://manage.auth0.com/) and create a new application of type **Single Page Web
   Applications**.
2. Go to the settings page of the application
3. Configure the following settings:
   - **Allowed Callback URLs**: Should be set to `http://localhost:3000/` when testing locally or typically
     to `https://myapp.com/` when deploying your application.
   - **Allowed Logout URLs**: Should be set to `http://localhost:3000/` when testing locally or typically
     to `https://myapp.com/` when deploying your application.
   - **Allowed Web Origins**: Should be set to `http://localhost:3000` when testing locally or typically
     to `https://myapp.com/` when deploying your application.
4. Save the settings.

#### Auth0 environment

- `NEXT_PUBLIC_AUTH0_DOMAIN`: Can be found in the Auth0 dashboard under `settings`.
- `NEXT_PUBLIC_AUTH0_CLIENT_ID`: Can be found in the Auth0 dashboard under `settings`.
- `NEXT_PUBLIC_AUTH0_ADMIN_EMAIL`: This is the email of the admin user which you use while signing in Auth0. Admin is able to delete any comment.

## Deploy Your Local Project

To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket
and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=upstash-roadmap).

**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to
match your `.env.local` file.

## Related Templates

### [Nextra: Docs Starter Kit](https://vercel.com/templates/next.js/documentation-starter-kit)

Simple, powerful and flexible markdown-powered docs site. Built with Next.js.

### [Blog Starter Kit](https://vercel.com/templates/next.js/blog-starter-kit)

A statically generated blog example using Next.js and Markdown.

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

Get started with Next.js and React in seconds.

## Related Integrations

### [Upstash](https://vercel.com/marketplace/upstash)

Serverless DB (Redis, Vector, Queue, Search)

---

## 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.