How to Add Comments to Next.js Application

In this tutorial, we are going to add a comments section to your Next.js application using Hyvor Talk as your commenting platform.

Having in mind that you have already set up your Next.js application, let’s go directly to start integrating Hyvor Talk into your Next.js application.

1. Getting Started with Hyvor Talk

If you have already completed signing up and creating a website at Hyvor Talk, jump to the next step.

1.1 Create a project at Hyvor Talk

Go to the Hyvor Talk home page and click on Go to Console.

How to add Next.js comments — Hyvor Talk homepage

Then type the name and the website name of your project. Click Create Website.

Once you have completed this, you will get a unique website ID from Hyvor Talk, which can be found on Console -> Settings -> Website -> Website ID.

2. Adding Hyvor Talk Comments to Next.js Application

Open your Next.js project in your code editor.

2.1. Install the Hyvor Talk React Library

Open the terminal from the root directory of the Next.js project.

Then run the following command to install the Hyvor Talk React library.

1npm install @hyvor/hyvor-talk-react

2.2. Using Components of the Library

In the Hyvor Talk React library, the following components are available:

<Comments> - wraps <hyvor-talk-comments>
<CommentCount> - wraps <hyvor-talk-comment-count>

Now, go to the code file where you want to add comments to your Next application. Follow the given steps below.

For demonstration, I am going to add comments to the main page (page.tsx) of my Next.js application.

2.2.1. Using `<Comments>` Component

This is used to add comments embed to your webpage. The props are the same as the attributes of hyvor-talk-comments.

Import the <Comments> component from the library

1import { Comments } from "@hyvor/hyvor-talk-react";

Declare two constant variables for your website’s ID and unique page ID.

1const YOUR_WEBSITE_ID = your-website-id; // Replace with your actual Hyvor Talk website ID
2const UNIQUE_PAGE_ID = "your-page-id"; // Replace with a unique identifier for the page

Then, place the <Comments> component where you want to show the comments embed.

1<Comments website-id={YOUR_WEBSITE_ID} page-id={UNIQUE_PAGE_ID} />

Here is an example code of the implementation.

 1"use client";
 2import styles from "./page.module.css";
 3import { Comments } from "@hyvor/hyvor-talk-react";
 4
 5const YOUR_WEBSITE_ID = 12345; // Replace with your actual Hyvor Talk website ID
 6const UNIQUE_PAGE_ID = "your-page-id"; // Replace with a unique identifier for the page
 7
 8export default function Home() {
 9  return (
10    <div className={styles.page}>
11      <h2>Hyvor Talk + React Integration</h2>
12      <main className={styles.main}>
13        <Comments website-id={YOUR_WEBSITE_ID} page-id={UNIQUE_PAGE_ID} />
14        <div className={styles.ctas}>
15          <p>
16            Hyvor Talk is a privacy-focused comment system that can be easily integrated into React applications. This example demonstrates how to set up Hyvor Talk in a Next.js application.
17          </p>
18        </div>
19      </main>
20    </div>
21  );
22}

This will load the Hyvor Talk comments section as shown below.

how to add comments to Next.js — Loaded the comments section on the Next.js Application

2.2.2. Using `<CommentCounts>` Component

You can use the <CommentCount> component to display the number of comments on a page. All props are the same as the base hyvor-talk-comment-count web Component.

Import the CommentCount and CommentCounts components.

1import { CommentCount } from "@hyvor/hyvor-talk-react";
2import { CommentCounts } from "@hyvor/hyvor-talk-base";

CommentCount shows the count for a given page-id.
The CommentCounts.load() method should be called once inside a useEffect on pages where you use <CommentCount>. It loads all counts on the page. It shows the comment count of the given page ID, where you want to show it on your application. In this case, near the commenting section.

 1import React from "react";
 2import { useEffect } from "react";
 3import { CommentCount } from "@hyvor/hyvor-talk-react";
 4import { CommentCounts } from "@hyvor/hyvor-talk-base";
 5
 6export default function Home() {
 7  useEffect(() => {
 8    CommentCounts.load({
 9      "website-id": YOUR_WEBSITE_ID,
10    });
11  }, []);
12  return (
13  	<CommentCount page-id={UNIQUE_PAGE_ID} />
14	)
15  }

This is an example view of the comment count implementation.

how to add comments to Next.js app using Hyvor Talk — Comment count added

Here is an example of how you can use both <Comments> and <CommentCount> components in the same space.

 1"use client";
 2import { useEffect } from "react";
 3import styles from "./page.module.css";
 4import { Comments, CommentCount } from "@hyvor/hyvor-talk-react";
 5import { CommentCounts } from "@hyvor/hyvor-talk-base";
 6
 7const YOUR_WEBSITE_ID = 12345; // Replace with your actual Hyvor Talk website ID
 8const UNIQUE_PAGE_ID = "your-page-id"; // Replace with a unique identifier for the page
 9
10export default function Home() {
11  useEffect(() => {
12    CommentCounts.load({
13      "website-id": YOUR_WEBSITE_ID,
14    });
15  }, []);
16  return (
17    <div className={styles.page}>
18      <h2>Hyvor Talk + Next.js Integration</h2>
19      <main className={styles.main}>
20        <Comments website-id={YOUR_WEBSITE_ID} page-id={UNIQUE_PAGE_ID} />
21        <CommentCount page-id={UNIQUE_PAGE_ID} />
22        <div className={styles.ctas}>
23          <p>
24            Hyvor Talk is a privacy-focused comment system that can be easily integrated into Next.js applications. This example demonstrates how to set up Hyvor Talk in a Next.js application.
25          </p>
26        </div>
27      </main>
28    </div>
29  );
30}