Para with Next.js - Para Docs

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 . You can learn to create your account and get your API key from the Developer Portal.

Installation

Install the Para React SDK and React Query:

npm install @getpara/react-sdk @tanstack/react-query graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi@^2 viem @farcaster/mini-app-solana @farcaster/miniapp-sdk @farcaster/miniapp-wagmi-connector @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js @stellar/stellar-sdk --save-exact

yarn add @getpara/react-sdk @tanstack/react-query graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi@^2 viem @farcaster/mini-app-solana @farcaster/miniapp-sdk @farcaster/miniapp-wagmi-connector @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js @stellar/stellar-sdk --exact

pnpm add @getpara/react-sdk @tanstack/react-query graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi@^2 viem @farcaster/mini-app-solana @farcaster/miniapp-sdk @farcaster/miniapp-wagmi-connector @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js @stellar/stellar-sdk --save-exact

```bash bun
bun add @getpara/react-sdk @tanstack/react-query graz @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosmjs/stargate @cosmjs/tendermint-rpc @leapwallet/cosmos-social-login-capsule-provider long starknet wagmi@^2 viem @farcaster/mini-app-solana @farcaster/miniapp-sdk @farcaster/miniapp-wagmi-connector @solana-mobile/wallet-adapter-mobile @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-walletconnect @solana/web3.js @stellar/stellar-sdk --exact

Using wagmi v3? See additional dependencies required.

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:

The import "@getpara/react-sdk/styles.css" is required for the Para modal to display correctly. Without this import, the modal will not be visible.

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

If you’re using a legacy API key (one without an environment prefix) you must provide a value to the paraClientConfig.environment. You can retrieve your updated API key from the Para Developer Portal at https://developer.getpara.com/

Wrap Your App with Providers

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

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 .

The ParaProvider utilizes libraries like Wagmi, Graz, and Solana Wallet Adapter, to power wallet connections. Meaning you can use any of the hooks provided by these libraries when within the ParaProvider context. You can learn more about using external wallets in the .

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

Learn more about the hooks used in this example:

- Control the Para modal programmatically
- Access the current wallet data
- Get account connection status and details

Testing? Use BETA testing credentials for fast development. Check out the to learn about test emails and phone numbers.

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.

​Prerequisites

​Installation

​Configure Providers

​Create a Connect Button

​Example

​Next Steps

Prerequisites

Installation

Configure Providers

Create a Connect Button

Example

Next Steps