Before starting, you’ll need a Para API key which you can obtain from the Para Developer Portal. You can learn to create your account and get your API key from the Developer Portal.
Create a providers component that will wrap your application. Note the "use client" directive at the top - this is required for Next.js App Router:
app/providers.tsx
Copy
Ask AI
"use client";import { QueryClient, QueryClientProvider } from "@tanstack/react-query";import { Environment, ParaProvider } from "@getpara/react-sdk";import "@getpara/react-sdk/styles.css";const queryClient = new QueryClient();export function Providers({ children,}: Readonly<{ children: React.ReactNode;}>) { return ( <QueryClientProvider client={queryClient}> <ParaProvider paraClientConfig={{ apiKey: "YOUR_API_KEY", // Replace with your actual API key env: Environment.BETA, }} config={{ appName: "YOUR_APP_NAME", // Replace with your app name }} > {children} </ParaProvider> </QueryClientProvider> );}
Para offers two hosted environments: Environment.BETA (alias Environment.DEVELOPMENT) for testing, and
Environment.PROD (alias Environment.PRODUCTION) for live use. Select the environment that matches your current
development phase.