🌠Cara Mudah Install Disqus di Next.js + Sanity CMS

Bagaikan makan tanpa sambal, tak lengkap rasanya jika sebuah website atau blog tidak ada fitur komentar nya. Hal ini yang saya rasakan ketika awal mendevelop sebuah web dinamis, melalui komentar, kita juga bisa mengetahui respon pembaca serta berdiskusi terkait artikel yang dipublish.

Sebagai contoh, disini saya buat aplikasi menggunakan framework Next.js dan CMS Sanity, ada banyak sekali tutorial di internet yang membagikan cara membuat fungsi komentar menggunakan framework Next.js, tetapi saya pribadi lebih suka menggunakan third party dari Disqus, selain ada fitur reaction, cara instalasinya juga terbilang gampang.

Berikut adalah cara install Disqus di Next.js dengan CMS Sanity.

Install disqus-react

Langkah pertama, kita bisa install library disqus-react:

npm i disqus-react

Membuat komponen Disqus

Berikut ini adalah contoh komponen Disqus di React:

import { DiscussionEmbed } from "disqus-react";

const DisqusComments = ({ post }) => {
  const disqusShortname = "your-disqus-shortname";

  const disqusConfig = {
    url: "https://your-site-url/post-slug",

    identifier: post.id,
    // Single post id
    title: post.title, // Single post title
  };

  return (
    <div>
      <DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
    </div>
  );
};

export default DisqusComments;

Penjelasan

variabel “disqusShortname” adalah nama unik yang diberikan di akun Disqus.

variabel “disqusConfig” adalah objek konfigurasi yang berisi informasi tentang URL dari postingan, identifikasi unik postingan, dan judul postingan. url adalah URL lengkap dari postingan, identifier adalah identifikasi unik untuk postingan, dan title adalah judul dari postingan.

Implementasi dengan Sanity

Berikut adalah kode Disqus yang saya implementasikan pada komponen Sanity:

export default function PostPage(props: PostPageProps) {
  const { preview, loading, morePosts = NO_POSTS, post, settings } = props;
  const { title = demo.title } = settings || {};

  const slug = post?.slug;

  if (!slug && !preview) {
    notFound();
  }

  const disqusShortname = "ferryops";

  const disqusConfig = {
    url: `https://ferryops.vercel.app/posts/${slug}`, // ganti dengan url Anda
    identifier: post?.slug, // Single post id
    title: post?.title, // Single post title
  };
  return <></>;
}

Lalu di embed pada fungsi return seperti contoh berikut:

return (
  <>
    <Layout preview={preview} loading={loading}>
      <Container>
        <BlogHeader title={title} level={2} />
        {preview && !post ? (
          <PostTitle>Loading…</PostTitle>
        ) : (
          <>
            <article>...</article>

            <DiscussionEmbed
              shortname={disqusShortname}
              config={disqusConfig}
            />
          </>
        )}
      </Container>
    </Layout>
  </>
);

Demikian cara mudah install Disqus di Next.js + Sanity, semoga membantu.

Referensi

https://codeytek.com/integrating-disqus-in-your-next-js-react-application/