<crow-comments> is a web component, so it renders from Server Components as it is, with no client component or npm package.
Sign in to Crowment, create a comment widget for your site's domain and copy its app key from Install & Embed.
import Script from 'next/script'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script src="https://embeds.crowment.com/comments.js" strategy="afterInteractive" />
</body>
</html>
)
}
In the page that renders a post, for example app/blog/[slug]/page.tsx:
export default async function PostPage() {
return (
<>
<article>{/* your post */}</article>
<crow-comments app-key="YOUR_APP_KEY"></crow-comments>
</>
)
}
Without this, TypeScript reports that crow-comments does not exist on JSX.IntrinsicElements:
import type { DetailedHTMLProps, HTMLAttributes } from 'react'
declare module 'react' {
namespace JSX {
interface IntrinsicElements {
'crow-comments': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & {
'app-key': string
'page-id'?: string
'lang'?: string
'sso-token'?: string
}
}
}
}
The widget follows client-side navigation (router.push, links, back and forward) by itself and loads the new page's thread.
sso-token.page-id: see Which thread a page shows.