SDK/FRAMEWORKS
Next.js
The SDK runs in the browser, so use it in client components. Works with the App Router and the Pages Router.
On this page
1. Add your keys #
.env.local
NEXT_PUBLIC_EDITHPRO_CLIENT_ID=ep_live_abc123NEXT_PUBLIC_EDITHPRO_WORKSPACE_ID=ws_64f2a1b3
The client ID is public, so the NEXT_PUBLIC_ prefix is fine.
2. App Router #
app/providers.tsx
// app/providers.tsx'use client';import { EdithProProvider } from '@edithpro/react'; export function Providers({ children }: { children: React.ReactNode }) { return ( <EdithProProvider clientId={process.env.NEXT_PUBLIC_EDITHPRO_CLIENT_ID!} workspaceId={process.env.NEXT_PUBLIC_EDITHPRO_WORKSPACE_ID!} > {children} </EdithProProvider> );}
app/layout.tsx
import { Providers } from './providers'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body><Providers>{children}</Providers></body> </html> );}
Any component that uses EdithProButton or useEdithPro() needs 'use client' at the top.
Pages Router #
pages/_app.tsx
import type { AppProps } from 'next/app';import { EdithProProvider } from '@edithpro/react'; export default function MyApp({ Component, pageProps }: AppProps) { return ( <EdithProProvider clientId={process.env.NEXT_PUBLIC_EDITHPRO_CLIENT_ID!} workspaceId={process.env.NEXT_PUBLIC_EDITHPRO_WORKSPACE_ID!} > <Component {...pageProps} /> </EdithProProvider> );}
Add both your production domain and your preview domains (for example Vercel previews) in Dashboard › Developer › Domains.
Was this page helpful? @edithpro/sdk 1.0.5 · Edit this page