Next.js Integration

This guide shows you how to add JamComments to a Next.js site. Before starting, you’ll need:

• A JamComments account
• A site created in your account
• An API key (get one in your account settings)

Installation

npm install @jam-comments/next

Basic Usage

Fetch comments in getStaticProps or getServerSideProps, then pass them to the <JamComments /> component.

Example with getStaticProps

[slug].js

import { JamComments } from "@jam-comments/next";

export default function Post({ content, commentData }) {
  return (
    <article>
      <div dangerouslySetInnerHTML={{ __html: content }} />
      <JamComments markup={commentData} />
    </article>
  );
}

export async function getStaticProps({ params }) {
  const content = await getContentFromSomewhere();
  const { fetchMarkup } = await import("@jam-comments/next/server");

  // Fetch the comment form and existing comments
  const commentData = await fetchMarkup({
    domain: process.env.JAM_COMMENTS_DOMAIN,
    apiKey: process.env.JAM_COMMENTS_API_KEY,
    path: `/posts/${params.slug}`,
  });

  return {
    props: {
      commentData,
      content,
    },
  };
}

Configuration Options

Environment

In development (when NODE_ENV is not “production”), the integration shows dummy comments and silently accepts submissions without saving them. In production, it fetches real comments and saves submissions.

Set JAM_COMMENTS_ENVIRONMENT to override this behavior.

Customizing UI Text

You can change the text shown in the comment form:

const commentData = await fetchMarkup({
  domain: process.env.JAM_COMMENTS_DOMAIN,
  apiKey: process.env.JAM_COMMENTS_API_KEY,
  path: `/posts/${params.slug}`,
  copy: {
    commentPlaceholder: "Write something...",
    submitButton: "Post Comment",
    namePlaceholder: "Your name",
  },
});

Property	Default
confirmationMessage	”Comment successfully submitted!”
submitButton	”Submit”
namePlaceholder	(empty)
emailPlaceholder	(empty)
commentPlaceholder	”Write something in plain text or Markdown…”
writeTab	”Write”
previewTab	”Preview”
authButton	”Log In or Register”
logOutButton	”Log Out”
replyButton	”Reply”
nameLabel	”Name”
emailLabel	”Email”
commentCountLabel	”comment/comments”
replyCountLabel	”reply/replies”

Note: Count labels are automatically pluralized.

Date Format

Change how dates are displayed (uses PHP date format):

const commentData = await fetchMarkup({
  domain: process.env.JAM_COMMENTS_DOMAIN,
  apiKey: process.env.JAM_COMMENTS_API_KEY,
  path: `/posts/${params.slug}`,
  dateFormat: "l, F j, Y", // Thursday, October 31, 2024
});

Contributing

Found a bug or have an improvement? Open an issue or pull request on GitHub.