K1ファクトリー
Next.jsブログにコメント欄を設置してみた

Next.jsブログにコメント欄を設置してみた

Next.jsを使った静的サイト（当サイト）にコメント欄を設けてみました。
静的サイトなので、外部のサービスからJavascriptで読み込んで表示させます。
一番有名らしい、Disqusなども考えてみたんですけど設置するのも利用するのも結構面倒なので、
もっと簡単なのないかな。といろいろ探してると、「HTML COMMENT BOX」というのを発見！

Googleアカウントを持ってればすぐ出来るということなので、設置してみました。

まずは、「HTML COMMENT BOX」にアクセスして、
Googleアカウントでログインします。

02でコードが表示されるので、コピーします。



コメント欄を貼り付けたいページ、個別詳細ページ（blog/[id].js）にて、
コピーしたコードを貼り付けますが、

<!-- begin wwww.htmlcommentbox.com -->
 <div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">Widget</a> is loading comments...</div>
 <link rel="stylesheet" type="text/css" href="https://www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
 <script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="https://www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttribute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24kz359wLNxjgUbN8GTkGTT1"+"&opts=16798&num=10&ts=1630125174328");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end www.htmlcommentbox.com -->


私は、前半の<div>タグ<link>タグ部分と、
後半の<script>タグ部分を分けて貼り付けました。

前半部分は、
<article>〜</article>のすぐ後に、<section>タグ内に貼り付けました。

<section className="w-full sm:w-4/5 mx-auto p-10 text-sm xl:text-base"
	dangerouslySetInnerHTML={{
		__html: `
			<!-- begin wwww.htmlcommentbox.com -->
			<div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML </a> is loading comments...</div>
			<link rel="stylesheet" type="text/css" href="https://www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
			<!-- end www.htmlcommentbox.com -->
		 `,
	}}
/>

dangerouslySetInnerHTMLを使ってそのまま掲載しています。

後半部分は、<script>タグなので、
ファイル冒頭で、

import Script from 'next/script'

を追記します。（Next.js version11の機能らしい）
先ほど前半部分を載せた<section>タグの後に以下の様に貼り付けました。

<Script type="text/javascript" id="hcb"
	dangerouslySetInnerHTML={{
		__html: `
			/*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="https://www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttribute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&opts=16798&num=10&ts=1630115715575");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ 
		`,
	}}
/>

こちらも dangerouslySetInnerHTMLを使ってそのまま掲載しています。

以上です。
このページの下にCommentが表示されてます。

HTML COMMENT BOXの設定については、
シリウスにコメント欄を設置したい～その４～Html Comment Box編の後半部分の説明を参考にしました。

HTML is loading comments...