This guide will walk you through integrating Para SDK into your Next.js application, providing seamless user authentication and wallet management.
This guide uses the Next.js App Router. For Pages Router, refer to the for setup instructions.

​
Prerequisites

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.

Setup Developer Portal

​
Installation

Install the Para React SDK and React Query: 
npm install @getpara/react-sdk@alpha @tanstack/react-query --save-exact

​
Configure Providers

Create a providers component and wrap your application with it. Note the "use client" directive at the top - this is required for Next.js App Router: 
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { 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
        }}
        config={{
          appName: "YOUR_APP_NAME", // Replace with your app name
        }}>
        {children}
      </ParaProvider>
    </QueryClientProvider>
  );
}

​
Create a Connect Button

Now you can create a component that uses Para hooks to manage wallet connection:
connect-button.tsx
"use client";

import { useModal, useAccount, useWallet } from "@getpara/react-sdk";

export function ConnectButton() {
  const { openModal } = useModal();
  const { data: wallet } = useWallet();
  const { isConnected } = useAccount();

  return (
    <button onClick={() => openModal()}>
      {isConnected ? `Connected: ${wallet?.address?.slice(0, 6)}...${wallet?.address?.slice(-4)}` : "Connect Wallet"}
    </button>
  );
}
Testing? Use BETA testing credentials for fast development. Check out the to learn about test emails and phone numbers.

​
Example

Next.js Example

​
Next Steps

Success you’ve set up Para with Next.js! Now you can expand your application with wallet connections, account management, and more.

Use React Hooks

Sign Messages & Transactions

Customize Your Setup