Blog with Comment

Blog with Comment is an official Next.js starter template from the Vercel examples repository that adds Auth0-protected comments to the base Next.js blog, storing each comment in Upstash Serverless Redis.

What is Blog with Comment?

Blog with Comment is a Next.js application you generate with npx create-next-app --example blog-with-comment. It extends the standard Next.js blog example with a comment system: visitors must sign in through Auth0 to post a comment, each user can delete only their own comment, and an admin (defined by an environment variable) can delete any comment. All comments are persisted in Upstash, a Serverless Redis database, accessed through the REDIS_URL environment variable. The template is part of the official vercel/next.js GitHub repository, which currently has over 141,000 stars, and it is designed to be deployed directly to Vercel.

Key Features

• Auth0 authentication — The comment box appears only for logged-in users; the example configures an Auth0 Single Page Web Application with callback, logout, and web origin settings.
• Role-based comment deletion — Any authenticated user can remove their own comment, while the admin email in NEXT_PUBLIC_AUTH0_ADMIN_EMAIL can delete every comment on the blog.
• Upstash Serverless Redis storage — Comments are stored in a Redis database created through the Upstash Console; you supply the connection URL with the REDIS_URL environment variable.
• Environment-variable driven setup — Configuration lives in .env.local, using NEXT_PUBLIC_AUTH0_DOMAIN, NEXT_PUBLIC_AUTH0_CLIENT_ID, NEXT_PUBLIC_AUTH0_ADMIN_EMAIL, and REDIS_URL.
• One-command bootstrap — The example installs via npx create-next-app --example blog-with-comment, giving you a working blog with comments in one command.
• Live demo — A working deployment is hosted at https://blog-with-comment.vercel.app/ so you can test the comment flow before building your own.
• Official maintenance — The template lives in the vercel/next.js repository, so it stays aligned with Next.js updates and is maintained by the Vercel team.

Who is Blog with Comment for?

Next.js developers who want a reference implementation for adding authenticated comments to a blog without building an auth system and a database from scratch. Bloggers who already use the Next.js blog example and need a comment feature that requires login and supports admin moderation. Teams learning how to integrate Auth0 with Next.js, because the README gives exact setting values for callback URLs, logout URLs, and web origins. Vercel users who want a serverless-deployable blog with comments, since the project can be imported directly and published after setting environment variables.

What can you do with Blog with Comment?

• Authenticated readers: sign in with Auth0 to post a comment on any blog post; the comment box is hidden until a user logs in.
• Content moderators: set your admin email in the environment variables and delete any comment from the blog, which is useful for filtering spam or inappropriate content.
• Next.js learners: study a minimal comment system that combines Serverless Redis and Auth0, then reuse the pattern in your own pages or apps.
• Vercel deployers: push the project to GitHub, GitLab, or Bitbucket, import it into Vercel, and copy the same environment variables to go live.

How do I set up Blog with Comment?

Run npx create-next-app --example blog-with-comment to generate the project. Copy .env.local.example to .env.local, then create an Upstash database and copy its REDIS_URL into the file. In the Auth0 dashboard, create a Single Page Web Application and set the Allowed Callback URLs, Allowed Logout URLs, and Allowed Web Origins to http://localhost:3000/ for local testing or your production domain. Add the Auth0 domain, client ID, and admin email to the environment variables, then deploy by importing the repository into Vercel and configuring the same variables in the project settings.

FAQ

Does commenting require authentication?

Yes. The comment box requires users to sign in with Auth0. Only authenticated users can add new comments, which means anonymous visitors cannot post.

Who can delete comments?

A regular user can delete only their own comment. The admin user, identified by the NEXT_PUBLIC_AUTH0_ADMIN_EMAIL environment variable, can delete any comment on the blog.

Where are comments stored?

Comments are stored in Upstash Serverless Redis. You create a database in the Upstash Console and supply its connection URL via the REDIS_URL environment variable.

How do I deploy this to production?

Push the project to GitHub, GitLab, or Bitbucket, then import it into Vercel. In the Vercel project settings, set the same environment variables (REDIS_URL, NEXT_PUBLIC_AUTH0_DOMAIN, NEXT_PUBLIC_AUTH0_CLIENT_ID, and NEXT_PUBLIC_AUTH0_ADMIN_EMAIL) that you used locally.

Is this an official Next.js example?

Yes. This is an official example from the vercel/next.js repository, extending the base Next.js blog example with comment functionality. The repository has over 141,000 stars.