[{"data":1,"prerenderedAt":637},["ShallowReactive",2],{"\u002Fintegrations\u002Fnextjs":3},{"id":4,"title":5,"body":6,"description":629,"extension":630,"icon":631,"meta":632,"navigation":85,"path":633,"seo":634,"stem":635,"__hash__":636},"integrations\u002Fintegrations\u002Fnextjs.md","Add comments to a Next.js site",{"type":7,"value":8,"toc":622},"minimark",[9,17,575,582,587,618],[10,11,12,16],"p",{},[13,14,15],"code",{},"\u003Ccrow-comments>"," is a web component, so it renders from Server Components as it is, with no client component or npm package.",[18,19,21,26,39,43,263,267,273,368,372,381],"steps",{"level":20},"3",[22,23,25],"h3",{"id":24},"create-a-widget","Create a widget",[10,27,28,33,34,38],{},[29,30,32],"a",{"href":31},"\u002Flogin","Sign in to Crowment",", create a comment widget for your site's domain and copy its app key from ",[35,36,37],"strong",{},"Install & Embed",".",[22,40,42],{"id":41},"load-the-script-in-the-root-layout","Load the script in the root layout",[44,45,51],"pre",{"className":46,"code":47,"filename":48,"language":49,"meta":50,"style":50},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import Script from 'next\u002Fscript'\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    \u003Chtml lang=\"en\">\n      \u003Cbody>\n        {children}\n        \u003CScript src=\"https:\u002F\u002Fembeds.crowment.com\u002Fcomments.js\" strategy=\"afterInteractive\" \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n","app\u002Flayout.tsx","tsx","",[13,52,53,80,87,138,147,173,184,196,232,242,252,258],{"__ignoreMap":50},[54,55,58,62,66,69,73,77],"span",{"class":56,"line":57},"line",1,[54,59,61],{"class":60},"s7zQu","import",[54,63,65],{"class":64},"sTEyZ"," Script ",[54,67,68],{"class":60},"from",[54,70,72],{"class":71},"sMK4o"," '",[54,74,76],{"class":75},"sfazB","next\u002Fscript",[54,78,79],{"class":71},"'\n",[54,81,83],{"class":56,"line":82},2,[54,84,86],{"emptyLinePlaceholder":85},true,"\n",[54,88,90,93,96,100,104,107,111,114,117,120,123,127,129,132,135],{"class":56,"line":89},3,[54,91,92],{"class":60},"export",[54,94,95],{"class":60}," default",[54,97,99],{"class":98},"spNyl"," function",[54,101,103],{"class":102},"s2Zo4"," RootLayout",[54,105,106],{"class":71},"({",[54,108,110],{"class":109},"sHdIc"," children",[54,112,113],{"class":71}," }:",[54,115,116],{"class":71}," {",[54,118,110],{"class":119},"swJcz",[54,121,122],{"class":71},":",[54,124,126],{"class":125},"sBMFI"," React",[54,128,38],{"class":71},[54,130,131],{"class":125},"ReactNode",[54,133,134],{"class":71}," })",[54,136,137],{"class":71}," {\n",[54,139,141,144],{"class":56,"line":140},4,[54,142,143],{"class":60},"  return",[54,145,146],{"class":119}," (\n",[54,148,150,153,156,159,162,165,168,170],{"class":56,"line":149},5,[54,151,152],{"class":71},"    \u003C",[54,154,155],{"class":119},"html",[54,157,158],{"class":98}," lang",[54,160,161],{"class":71},"=",[54,163,164],{"class":71},"\"",[54,166,167],{"class":75},"en",[54,169,164],{"class":71},[54,171,172],{"class":71},">\n",[54,174,176,179,182],{"class":56,"line":175},6,[54,177,178],{"class":71},"      \u003C",[54,180,181],{"class":119},"body",[54,183,172],{"class":71},[54,185,187,190,193],{"class":56,"line":186},7,[54,188,189],{"class":71},"        {",[54,191,192],{"class":64},"children",[54,194,195],{"class":71},"}\n",[54,197,199,202,205,208,210,212,215,217,220,222,224,227,229],{"class":56,"line":198},8,[54,200,201],{"class":71},"        \u003C",[54,203,204],{"class":125},"Script",[54,206,207],{"class":98}," src",[54,209,161],{"class":71},[54,211,164],{"class":71},[54,213,214],{"class":75},"https:\u002F\u002Fembeds.crowment.com\u002Fcomments.js",[54,216,164],{"class":71},[54,218,219],{"class":98}," strategy",[54,221,161],{"class":71},[54,223,164],{"class":71},[54,225,226],{"class":75},"afterInteractive",[54,228,164],{"class":71},[54,230,231],{"class":71}," \u002F>\n",[54,233,235,238,240],{"class":56,"line":234},9,[54,236,237],{"class":71},"      \u003C\u002F",[54,239,181],{"class":119},[54,241,172],{"class":71},[54,243,245,248,250],{"class":56,"line":244},10,[54,246,247],{"class":71},"    \u003C\u002F",[54,249,155],{"class":119},[54,251,172],{"class":71},[54,253,255],{"class":56,"line":254},11,[54,256,257],{"class":119},"  )\n",[54,259,261],{"class":56,"line":260},12,[54,262,195],{"class":71},[22,264,266],{"id":265},"add-the-comment-section-to-your-post-page","Add the comment section to your post page",[10,268,269,270,122],{},"In the page that renders a post, for example ",[13,271,272],{},"app\u002Fblog\u002F[slug]\u002Fpage.tsx",[44,274,276],{"className":46,"code":275,"language":49,"meta":50,"style":50},"export default async function PostPage() {\n  return (\n    \u003C>\n      \u003Carticle>{\u002F* your post *\u002F}\u003C\u002Farticle>\n      \u003Ccrow-comments app-key=\"YOUR_APP_KEY\">\u003C\u002Fcrow-comments>\n    \u003C\u002F>\n  )\n}\n",[13,277,278,297,303,308,329,355,360,364],{"__ignoreMap":50},[54,279,280,282,284,287,289,292,295],{"class":56,"line":57},[54,281,92],{"class":60},[54,283,95],{"class":60},[54,285,286],{"class":98}," async",[54,288,99],{"class":98},[54,290,291],{"class":102}," PostPage",[54,293,294],{"class":71},"()",[54,296,137],{"class":71},[54,298,299,301],{"class":56,"line":82},[54,300,143],{"class":60},[54,302,146],{"class":119},[54,304,305],{"class":56,"line":89},[54,306,307],{"class":71},"    \u003C>\n",[54,309,310,312,315,318,322,325,327],{"class":56,"line":140},[54,311,178],{"class":71},[54,313,314],{"class":119},"article",[54,316,317],{"class":71},">{",[54,319,321],{"class":320},"sHwdD","\u002F* your post *\u002F",[54,323,324],{"class":71},"}\u003C\u002F",[54,326,314],{"class":119},[54,328,172],{"class":71},[54,330,331,333,336,339,341,343,346,348,351,353],{"class":56,"line":149},[54,332,178],{"class":71},[54,334,335],{"class":125},"crow-comments",[54,337,338],{"class":98}," app-key",[54,340,161],{"class":71},[54,342,164],{"class":71},[54,344,345],{"class":75},"YOUR_APP_KEY",[54,347,164],{"class":71},[54,349,350],{"class":71},">\u003C\u002F",[54,352,335],{"class":125},[54,354,172],{"class":71},[54,356,357],{"class":56,"line":175},[54,358,359],{"class":71},"    \u003C\u002F>\n",[54,361,362],{"class":56,"line":186},[54,363,257],{"class":119},[54,365,366],{"class":56,"line":198},[54,367,195],{"class":71},[22,369,371],{"id":370},"teach-typescript-the-tag","Teach TypeScript the tag",[10,373,374,375,377,378,122],{},"Without this, TypeScript reports that ",[13,376,335],{}," does not exist on ",[13,379,380],{},"JSX.IntrinsicElements",[44,382,387],{"className":383,"code":384,"filename":385,"language":386,"meta":50,"style":50},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import type { DetailedHTMLProps, HTMLAttributes } from 'react'\n\ndeclare module 'react' {\n  namespace JSX {\n    interface IntrinsicElements {\n      'crow-comments': DetailedHTMLProps\u003CHTMLAttributes\u003CHTMLElement>, HTMLElement> & {\n        'app-key': string\n        'page-id'?: string\n        'lang'?: string\n        'sso-token'?: string\n      }\n    }\n  }\n}\n","crowment.d.ts","ts",[13,388,389,420,424,441,451,461,499,514,528,541,554,559,564,570],{"__ignoreMap":50},[54,390,391,393,396,398,401,404,407,410,413,415,418],{"class":56,"line":57},[54,392,61],{"class":60},[54,394,395],{"class":60}," type",[54,397,116],{"class":71},[54,399,400],{"class":64}," DetailedHTMLProps",[54,402,403],{"class":71},",",[54,405,406],{"class":64}," HTMLAttributes",[54,408,409],{"class":71}," }",[54,411,412],{"class":60}," from",[54,414,72],{"class":71},[54,416,417],{"class":75},"react",[54,419,79],{"class":71},[54,421,422],{"class":56,"line":82},[54,423,86],{"emptyLinePlaceholder":85},[54,425,426,429,432,434,436,439],{"class":56,"line":89},[54,427,428],{"class":98},"declare",[54,430,431],{"class":98}," module",[54,433,72],{"class":71},[54,435,417],{"class":75},[54,437,438],{"class":71},"'",[54,440,137],{"class":71},[54,442,443,446,449],{"class":56,"line":140},[54,444,445],{"class":98},"  namespace",[54,447,448],{"class":125}," JSX",[54,450,137],{"class":71},[54,452,453,456,459],{"class":56,"line":149},[54,454,455],{"class":98},"    interface",[54,457,458],{"class":125}," IntrinsicElements",[54,460,137],{"class":71},[54,462,463,466,468,470,472,474,477,480,482,485,488,491,494,497],{"class":56,"line":175},[54,464,465],{"class":71},"      '",[54,467,335],{"class":75},[54,469,438],{"class":71},[54,471,122],{"class":71},[54,473,400],{"class":125},[54,475,476],{"class":71},"\u003C",[54,478,479],{"class":125},"HTMLAttributes",[54,481,476],{"class":71},[54,483,484],{"class":125},"HTMLElement",[54,486,487],{"class":71},">,",[54,489,490],{"class":125}," HTMLElement",[54,492,493],{"class":71},">",[54,495,496],{"class":71}," &",[54,498,137],{"class":71},[54,500,501,504,507,509,511],{"class":56,"line":186},[54,502,503],{"class":71},"        '",[54,505,506],{"class":75},"app-key",[54,508,438],{"class":71},[54,510,122],{"class":71},[54,512,513],{"class":125}," string\n",[54,515,516,518,521,523,526],{"class":56,"line":198},[54,517,503],{"class":71},[54,519,520],{"class":75},"page-id",[54,522,438],{"class":71},[54,524,525],{"class":71},"?:",[54,527,513],{"class":125},[54,529,530,532,535,537,539],{"class":56,"line":234},[54,531,503],{"class":71},[54,533,534],{"class":75},"lang",[54,536,438],{"class":71},[54,538,525],{"class":71},[54,540,513],{"class":125},[54,542,543,545,548,550,552],{"class":56,"line":244},[54,544,503],{"class":71},[54,546,547],{"class":75},"sso-token",[54,549,438],{"class":71},[54,551,525],{"class":71},[54,553,513],{"class":125},[54,555,556],{"class":56,"line":254},[54,557,558],{"class":71},"      }\n",[54,560,561],{"class":56,"line":260},[54,562,563],{"class":71},"    }\n",[54,565,567],{"class":56,"line":566},13,[54,568,569],{"class":71},"  }\n",[54,571,573],{"class":56,"line":572},14,[54,574,195],{"class":71},[10,576,577,578,581],{},"The widget follows client-side navigation (",[13,579,580],{},"router.push",", links, back and forward) by itself and loads the new page's thread.",[583,584,586],"h2",{"id":585},"next-steps","Next steps",[588,589,590,601,611],"ul",{},[591,592,593,594,598,599,38],"li",{},"Sign your users in to the comments with ",[29,595,597],{"href":596},"\u002Fdocs\u002Fen\u002Fsite-owners\u002Fintegrations\u002Fsingle-sign-on","single sign-on",": sign a token in a Server Component and pass it as ",[13,600,547],{},[591,602,603,604,606,607,38],{},"Keep threads attached when URLs change with ",[13,605,520],{},": see ",[29,608,610],{"href":609},"\u002Fdocs\u002Fen\u002Fsite-owners\u002Fgetting-started\u002Finstallation","Which thread a page shows",[591,612,613,614,38],{},"Switch on ",[29,615,617],{"href":616},"\u002Fdocs\u002Fen\u002Fsite-owners\u002Fmoderation\u002Frules-and-lifecycle","AI moderation",[619,620,621],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":50,"searchDepth":82,"depth":89,"links":623},[624,625,626,627,628],{"id":24,"depth":89,"text":25},{"id":41,"depth":89,"text":42},{"id":265,"depth":89,"text":266},{"id":370,"depth":89,"text":371},{"id":585,"depth":82,"text":586},"Add a comment section with AI moderation to a Next.js App Router site with next\u002Fscript and one web component.","md","i-simple-icons-nextdotjs",{},"\u002Fintegrations\u002Fnextjs",{"title":5,"description":629},"integrations\u002Fnextjs","ktZH2R6xuMjuvZx0NNUj-3kmGPaO7GW27uzyQdKtS7I",1792581803640]