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 @getpara/graz@alpha @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi viem @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js

Setup Postinstall Script

Add the Para setup script to your package.json to ensure all required packages are properly configured:

package.json
{
  // ... other package.json fields
  "scripts": {
    "postinstall": "npx setup-para"
  }
}

Create a Providers Component

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
"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.

Wrap Your App with Providers

Update your root layout to wrap your application with the Providers component:

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>
  );
}

You can learn more about the ParaProvider and its definition in the .

Create a Connect Wallet Component

Now you can create a component that uses Para hooks to manage wallet connection:

app/components/connect-button.tsx
"use client";

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

export function ConnectButton() {
  const { openConnectModal, openWalletModal } = useModal();
  const account = useAccount();
  
  return (
    <div>
      {account.isConnected && account.embedded.wallets?.length ? (
        <div>
          <p>Connected: {account.embedded.wallets[0].address}</p>
          <button onClick={openWalletModal}>
            Manage Wallet
          </button>
        </div>
      ) : (
        <button onClick={openConnectModal}>
          Connect Wallet
        </button>
      )}
    </div>
  );
}

You can learn more about the useModal and useAccount hooks in the .

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.