React and Next.js

Use the Nuni component in React, Next.js, Remix, React Router and TanStack Start.

npm install @nuniapp/react

Render <Nuni /> once, as high as possible in the tree. It is a client component, so it works in Next.js Server Component layouts.

import { Nuni } from "@nuniapp/react"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Nuni project="nuni_..." />
      </body>
    </html>
  )
}

import { Nuni } from "@nuniapp/react"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Nuni project="nuni_..." />
    </>
  )
}

import { Nuni } from "@nuniapp/react"

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
    <Nuni project="nuni_..." />
  </StrictMode>
)

import { Nuni } from "@nuniapp/react"

export default function App() {
  return (
    <>
      <Outlet />
      <Nuni project="nuni_..." />
    </>
  )
}

Client-side navigation is detected automatically; comments switch with the page.

The component takes the same options as init().