Next.js Giscus 사용 방법

1<script
2  src="https://giscus.app/client.js"
3  data-repo="HyunJinNo/mdx-blog"
4  data-repo-id="R_kgDOQ9dfZA"
5  data-category="Announcements"
6  data-category-id="DIC_kwDOQ9dfZM4C285K"
7  data-mapping="pathname"
8  data-strict="0"
9  data-reactions-enabled="1"
10  data-emit-metadata="0"
11  data-input-position="bottom"
12  data-theme="preferred_color_scheme"
13  data-lang="ko"
14  data-loading="lazy"
15  crossorigin="anonymous"
16  async
17></script>

1npm i @giscus/react

1/* @/features/comment/ui/Comment.tsx */
2
3"use client";
4
5import Giscus from "@giscus/react";
6
7export const Comment = () => {
8  return (
9    <div className="mt-20">
10      <Giscus
11        id="comments"
12        repo="HyunJinNo/mdx-blog"
13        repoId="R_kgDOQ9dfZA"
14        category="Announcements"
15        categoryId="DIC_kwDOQ9dfZM4C285K"
16        mapping="pathname"
17        strict="0"
18        reactionsEnabled="1"
19        emitMetadata="0"
20        inputPosition="bottom"
21        theme="preferred_color_scheme"
22        lang="ko"
23        loading="lazy"
24      />
25    </div>
26  );
27};

1import { PostMetadata } from "@/entities/post";
2import { Comment } from "@/features/comment";
3import { convertDateFormat } from "@/shared/lib/utils";
4import Image from "next/image";
5
6export async function generateMetadata({
7  params,
8}: {
9  params: Promise<{ post: string }>;
10}) {
11  const { post } = await params;
12  const mod = await import(`@/content/${post}.mdx`);
13  const metadata: PostMetadata = mod.metadata;
14
15  return {
16    title: metadata.title,
17    description: metadata.description,
18  };
19}
20
21export default async function MdxLayout({
22  params,
23  children,
24}: {
25  params: Promise<{ post: string }>;
26  children: React.ReactNode;
27}) {
28  const { post } = await params;
29  const mod = await import(`@/content/${post}.mdx`);
30  const metadata: PostMetadata = mod.metadata;
31
32  // Create any shared layout or styles here
33  return (
34    <main className="flex w-full flex-col">
35      <header className="mb-8 flex flex-col">
36        <h1 className="mb-2 text-3xl font-semibold text-black">
37          {metadata.title}
38        </h1>
39        <p className="mb-6 text-lg">{metadata.description}</p>
40        <div className="text-custom-gray flex flex-col gap-4 text-sm">
41          <span>
42            Posted{" "}
43            <time className="font-medium">
44              {convertDateFormat(metadata.date)}
45            </time>
46          </span>
47          <div className="relative aspect-video">
48            <Image
49              className="rounded-xl border border-gray-100 bg-gray-100 object-cover"
50              src={metadata.imagePath}
51              alt="Preview Image"
52              fill={true}
53            />
54          </div>
55          <div className="flex flex-row items-center justify-between">
56            <span>By HyunJinNo</span>
57            <span>10 min read</span>
58          </div>
59        </div>
60      </header>
61      {children}
62      <Comment />
63    </main>
64  );
65}