Next.js

Custom elements run in the browser, so render the widget from a client component:

app/whats-new.jsx

'use client'
import 'shipdot'

export function WhatsNew() {
  return <ship-dot src="/shipdot.json" />
}

app/layout.jsx

import { WhatsNew } from './whats-new'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <WhatsNew />
        </header>
        {children}
      </body>
    </html>
  )
}

The shipdot module is safe to import during server rendering: it only registers the element in the browser.

Run shipdot build before next build so public/shipdot.json exists. With TypeScript, add import type {} from 'shipdot/react' once for JSX types.

Full example: examples/next.