Next.js Integration
These instructions assume you've already created a JamComments account as well as a "site" within that account. If you haven't, learn more about that process on the Getting Started page.
Prerequisites
In order to use this plugin, you'll need a JamComments account, where you'll also need to have created a site and generated an API key.
Installation
npm install @jam-comments/next
Usage
In your getStaticProps
or getServerSideProps
hook, retrieve the comments for a given post by using the fetchMarkup
method, and then passing your API key, domain, and comment data to your rendered page, which should then be passed to the <JamComments />
component.
// [slug].js
import { JamComments } from "@jam-comments/next";
export default function Post({ content, commentData }) {
return (
<article>
<div dangerouslySetInnerHTML={{ __html: content }}></div>
<JamComments markup={commentData} />
</article>
);
}
export async function getStaticProps({ params }) {
const content = await getContentFromSomewhere();
const { fetchMarkup } = require("@jam-comments/next");
// Retrieve all comments already made on this post.
const commentData = await fetchMarkup({
domain: process.env.JAM_COMMENTS_DOMAIN,
apiKey: process.env.JAM_COMMENTS_API_KEY,
path: `/posts/${params.slug}`,
});
// Pass domain, API key, and comments to `props` for use client-side.
return {
props: {
commentData,
content,
},
};
}
Environment Configuration
In non-production mode, this plugin will render a list of dummy comments on your pages, making it easier to adjust styles before deploying to production. Additionally, any new comments will be silently submitted.
In order to remove these dummy comments and allow submissions to go through, either the NODE_ENV
or JAM_COMMENTS_ENVIRONMENT
environment variables must be set to production
.
Contributions
The source for this plugin is open to contributions. If you have a bug fix or idea for improvement, leave a pull request or issue in the GitHub repository.