coonlink-openpanel-dev
v26.1.2
Published
Reusable OpenPanel proxy integration for Next.js projects
Readme
coonlink-openpanel-dev
Reusable OpenPanel proxy setup for Next.js projects.
What it gives you
- Loads the SDK through your own domain
- Sends browser requests to
/api/op - Proxies tracking requests from your app to your configured upstream API
- Keeps the env shape consistent across projects
Expected environment variables
OPENPANEL_CLIENT_ID=your-client-id
OPENPANEL_EVENTS_ENDPOINT=https://analysisapi.example.com
NEXT_PUBLIC_URL_CANONICAL=https://your-app.example.comOPENPANEL_EVENTS_ENDPOINT must be the upstream API base URL, not /track.
Usage in a Next.js app
app/layout.tsx
import { OpenPanelAnalytics, getOpenPanelConfigFromEnv } from 'coonlink-openpanel-dev'
const openPanelConfig = getOpenPanelConfigFromEnv()
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en">
<body>
{openPanelConfig ? <OpenPanelAnalytics config={openPanelConfig} /> : null}
{children}
</body>
</html>
)
}app/api/[...op]/route.ts
import { createOpenPanelProxyRouteHandlersFromEnv } from 'coonlink-openpanel-dev/server'
export const { GET, POST } = createOpenPanelProxyRouteHandlersFromEnv()Client components
'use client'
import { useOpenPanel } from 'coonlink-openpanel-dev/client'
export function ExampleButton() {
const op = useOpenPanel()
return (
<button type="button" onClick={() => op.track('example_click')}>
Track event
</button>
)
}