Next.js에서 Disqus 댓글 시스템 통합하기: npm 패키지 없이 심플하게!

 

 

 우리 모두 블로그나 웹사이트를 운영하면서 한 번쯤은 댓글 시스템이 필요하다는 걸 느껴본 적 있죠? 하지만 이런 댓글 기능을 직접 구현하려면 상당히 번거롭고 귀찮은 작업들이 많아요. 😩 특히 서버 세팅이나 복잡한 설치 과정을 생각하면 머리가 아프죠. 오늘은 그런 복잡함 없이, npm 패키지 설치 없이 Next.js와 React 환경에서 Disqus 댓글 시스템을 깔끔하게 통합하는 방법을 알려드릴게요! 🎉

 

 

 

 

🚀 한눈에 보는 Disqus 통합 과정

단계	설명	필요 작업
1단계	Disqus 계정 생성 및 사이트 등록	Disqus 가입 후 shortname 받기
2단계	Embed 코드 준비	Disqus에서 제공하는 코드 커스터마이징
3단계	Next.js 컴포넌트 생성	React로 Embed 코드 구현
4단계	페이지에서 컴포넌트 호출	적절한 URL, ID 전달

1단계: Disqus 계정 생성

Disqus 공식 사이트에 접속해서 계정을 만드세요. 그리고 여러분의 사이트를 등록하면 shortname이라는 고유 키를 받게 돼요. 이게 Disqus 시스템을 여러분 사이트와 연결해주는 핵심 키랍니다.

2단계: Disqus Embed 코드 준비

Disqus에서 제공하는 기본 코드를 커스터마이징해 사용합니다. 아래는 코드 예시예요.
이 코드는 댓글을 표시할 위치와 페이지 정보를 설정합니다.

<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
        this.page.url = 'YOUR_PAGE_URL'; // 여기에 페이지 URL 입력
        this.page.identifier = 'YOUR_PAGE_IDENTIFIER'; // 여기에 페이지 고유 ID 입력
    };

    (function() {
        var d = document, s = d.createElement('script');
        s.src = 'https://YOUR_SHORTNAME.disqus.com/embed.js'; // shortname 교체
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>댓글을 보려면 JavaScript를 활성화해주세요.</noscript>

💡 주의: YOUR_PAGE_URL, YOUR_PAGE_IDENTIFIER, YOUR_SHORTNAME은 각각 실제 값으로 교체해야 해요.

3단계: Next.js에 React 컴포넌트로 구현하기

이제 위 코드를 React 컴포넌트로 변환해볼게요! Next.js에서 사용하기 쉽게 구성해봤어요.

import React, { useEffect } from 'react';

const DisqusComments: React.FC<{ url: string; identifier: string }> = ({ url, identifier }) => {
    useEffect(() => {
        if (typeof window !== 'undefined') {
            const script = document.createElement('script');
            script.src = `https://YOUR_SHORTNAME.disqus.com/embed.js`; // shortname 교체
            script.setAttribute('data-timestamp', String(+new Date()));
            document.body.appendChild(script);
        }
    }, []);

    return (
        <div>
            <div id="disqus_thread"></div>
            <script
                dangerouslySetInnerHTML={{
                    __html: `
                        var disqus_config = function () {
                            this.page.url = '${url}';
                            this.page.identifier = '${identifier}';
                        };
                    `,
                }}
            />
        </div>
    );
};

export default DisqusComments;

👀 핵심 포인트

1. useEffect를 사용해 컴포넌트가 클라이언트에서만 실행되도록 설정했어요.
2. dangerouslySetInnerHTML을 사용해 JavaScript 코드를 삽입했는데, 이 부분은 꼭 필요한 경우에만 쓰는 게 좋아요. (XSS 주의!)

4단계: 컴포넌트 사용하기

아래처럼 DisqusComments 컴포넌트를 여러분의 페이지에서 불러와 사용하면 됩니다.

const MyPage: React.FC = () => {
    const pageUrl = 'http://example.com/my-page'; // 실제 페이지 URL
    const pageIdentifier = 'my-page-id'; // 실제 페이지 ID

    return (
        <div>
            <h1>제목</h1>
            <p>내용이 여기에 들어갑니다...</p>
            <DisqusComments url={pageUrl} identifier={pageIdentifier} />
        </div>
    );
};

export default MyPage;

 

 

 

 

💡 저의 생각: 이 방법이 좋은 이유와 단점

👍 장점

1. 설치가 필요 없음: npm 패키지를 따로 설치하지 않아도 돼서 프로젝트가 깔끔해져요.
2. 심플한 통합: 몇 줄의 코드만으로 댓글 시스템이 완성됩니다.
3. 범용성: React와 Next.js 외 다른 프레임워크에서도 쉽게 응용 가능해요.

👎 단점

1. SEO 문제: Disqus는 JavaScript 기반이라 초기 서버 렌더링에서 댓글 내용이 검색 엔진에 노출되지 않을 수 있어요.
2. XSS 위험: dangerouslySetInnerHTML을 사용할 땐 항상 신중해야 해요.
3. 외부 의존성: Disqus 서버에 문제가 생기면 댓글 기능도 영향을 받을 수 있습니다.

 

 

 

🤔 결론

 Disqus 통합은 간단하면서도 강력한 댓글 시스템을 제공해요. 특히 댓글 관리 기능까지 무료로 제공되니, 중소 규모의 블로그나 프로젝트에 적합하다고 생각합니다. 하지만 SEO나 보안 이슈를 고려해 장기적으로는 직접 댓글 시스템을 구축하거나 다른 대안을 탐색하는 것도 좋아요.

 

댓글을 통해 사용자와 소통하는 경험, 생각보다 훨씬 유용하고 재밌어요! 🎉 Disqus로 깔끔한 댓글 시스템, 한 번 시도해보세요!