Configurar disqus no next.js com tailwind

Neste tutorial, vou mostrar como configurar o Disqus no Next.js..

Passo 1: Crie uma conta no Disqus Antes de começar, você precisará criar uma conta no Disqus. Acesse o site do Disqus e siga as instruções para criar uma nova conta.

Passo 2: Crie um novo site no Disqus Após criar sua conta, faça login e vá para o painel de administração. Clique em "Add Disqus to Site" e siga as instruções para criar um novo site. Você precisará fornecer um nome para o site e a URL do seu aplicativo.

Passo 3: Instale o pacote Disqus React No diretório do seu projeto, abra o terminal e execute o seguinte comando para instalar o pacote Disqus React:

npm install disqus-react

Após instalar o pacote, vamos criar o componente, criaremos um arquivo chamado DisqusComments.tsx, e adicionaremos o código.

'use client';
import { DiscussionEmbed } from 'disqus-react';

const DisqusComments = ({ post }) => {

  const disqusShortname = 'your-key';
  const disqusConfig = {
    url: post.slug,
    identifier: post.slug, // Single post id
    title: post.title, // Single post title
  };

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

export default DisqusComments;

Agora basta adicionar a sua página.

<DisqusComments post={post} />

Se você usa next-themes para o funcionamento correto do thema, vamos adicionar no global.csss

#disqus_thread {
  color-scheme: none;
}

E modificar nosso componente.

...
import { useTheme } from 'next-themes';

const DisqusComments = ({ post }) => {

  const { theme } = useTheme();
  ...
  return (
    <div className="bg-main-light dark:bg-main text-zinc-600 dark:zinc-100">
      <DiscussionEmbed shortname={disqusShortname} config={disqusConfig} key={theme} />
    </div>
  );
...