01
Install the packages
pnpm add @pact/react @pact/web @pact/runtime02
Install the bootstrap
This is the enforcement boundary. Keep it server-rendered and before optional code.
typescript
import { renderPactBootstrap } from '@pact/web'
const pactBootstrap = renderPactBootstrap({
siteKey: 'site_live_your_key',
src: '/pact.js',
apiBase: '/v1',
})
// Render pactBootstrap as trusted HTML at the start of <head>.
// It must appear before analytics, advertising, or other optional code.03
Wire Next.js
tsx
import { PACT_BOOTSTRAP } from '@pact/web'
import { Providers } from './providers'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<script id="pact-bootstrap" data-tenant="site_live_your_key"
data-src="/pact.js" data-api="/v1"
dangerouslySetInnerHTML={{ __html: PACT_BOOTSTRAP }} />
</head>
<body><Providers>{children}</Providers></body>
</html>
)
}04
app/providers.tsx
tsx
'use client'
import { PactProvider } from '@pact/react'
export function Providers({ children }: { children: React.ReactNode }) {
return <PactProvider>{children}</PactProvider>
}