A guide to integrate Para into your Next.js application.
This guide will walk you through the process of integrating the ParaProvider
with the ParaModal
into your Next.js application,providing a seamless way to manage user authentication and wallets.
If you haven’t already set up your Next.js app, you can get started by creating a new project via the Next.js official docs.
To use Para, you need an API key. This key authenticates your requests to Para services and is essential for integration.
Don’t have an API key yet? Request access to the Developer Portal to create API keys, manage billing, teams, and more.
(Optional) Adding Transpile Configuration
Depending on your Next.js version or your build/TypeScript settings, you may want or need to transpile external modules
(like @getpara/*
).
In your next.config.js
, enable the transpilation:
This will ensure that the Para SDK is properly transpiled for your CJS or ESM build configuration.
Now that you’ve installed the necessary dependencies, let’s set up the Para SDK in your Next.js project using the
recommended ParaProvider
approach.
First, create a Providers component that will wrap your application with both the QueryClientProvider (required for Para) and the ParaProvider:
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.
The ParaProvider
and the ParaModal
are client side only components. Use the "use client"
directive at the top of your file to ensure that this component is rendered on the client side. If using an older version of Next.js use the next/dynamic
import to dynamically import the Providers
component with ssr: false
.
Next, wrap your root layout with the Providers component. This is typically done in the app/layout.tsx
file in a Next.js app using the App Router or if using the Pages Router, in the _app.tsx
file.
Now you can include the ParaModal
component in any client component within your application and use the ParaProvider
hooks to control it:
The ParaModal will automatically connect to the ParaProvider context, so you don’t need to pass any additional props for functionality. You only need to customize its appearance.
Beta Testing Credentials In the BETA
Environment, you can use any email ending in @test.getpara.com
(like
dev@test.getpara.com) or US phone numbers (+1) in the format (area code)-555-xxxx
(like (425)-555-1234). Any OTP
code will work for verification with these test credentials. These credentials are for beta testing only. You can
delete test users anytime in the beta developer console to free up user slots.
To provide the best experience for your users, you can customize the appearance of the Para Modal to match your application’s branding.
When rendering the ParaModal component, you can pass props to customize its appearance:
For a full list of available ParaModalProps
, refer to the customization guide:
Standalone Para Modal Setup
While the ParaProvider approach is recommended, you can also use the ParaModal as a standalone component. This approach requires you to create and manage a Para client instance manually.
You can create the Para client instance in a dedicated file:
Because Next.js supports server-side rendering (SSR), you need to ensure the modal runs on the client side:
For practical implementation of the Para SDK in Next.js applications, explore our Examples Hub repository. It contains a variety of examples showcasing how to integrate the Para SDK with different Para configurations and use cases.
If you encounter issues during the integration or usage of the Para Modal in Next.js applications, refer to our Next.js troubleshooting guide. It provides solutions to common problems and helps you resolve any issues you may face.
After integrating Para, you can explore other features and integrations to enhance your Para experience.
A guide to integrate Para into your Next.js application.
This guide will walk you through the process of integrating the ParaProvider
with the ParaModal
into your Next.js application,providing a seamless way to manage user authentication and wallets.
If you haven’t already set up your Next.js app, you can get started by creating a new project via the Next.js official docs.
To use Para, you need an API key. This key authenticates your requests to Para services and is essential for integration.
Don’t have an API key yet? Request access to the Developer Portal to create API keys, manage billing, teams, and more.
(Optional) Adding Transpile Configuration
Depending on your Next.js version or your build/TypeScript settings, you may want or need to transpile external modules
(like @getpara/*
).
In your next.config.js
, enable the transpilation:
This will ensure that the Para SDK is properly transpiled for your CJS or ESM build configuration.
Now that you’ve installed the necessary dependencies, let’s set up the Para SDK in your Next.js project using the
recommended ParaProvider
approach.
First, create a Providers component that will wrap your application with both the QueryClientProvider (required for Para) and the ParaProvider:
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.
The ParaProvider
and the ParaModal
are client side only components. Use the "use client"
directive at the top of your file to ensure that this component is rendered on the client side. If using an older version of Next.js use the next/dynamic
import to dynamically import the Providers
component with ssr: false
.
Next, wrap your root layout with the Providers component. This is typically done in the app/layout.tsx
file in a Next.js app using the App Router or if using the Pages Router, in the _app.tsx
file.
Now you can include the ParaModal
component in any client component within your application and use the ParaProvider
hooks to control it:
The ParaModal will automatically connect to the ParaProvider context, so you don’t need to pass any additional props for functionality. You only need to customize its appearance.
Beta Testing Credentials In the BETA
Environment, you can use any email ending in @test.getpara.com
(like
dev@test.getpara.com) or US phone numbers (+1) in the format (area code)-555-xxxx
(like (425)-555-1234). Any OTP
code will work for verification with these test credentials. These credentials are for beta testing only. You can
delete test users anytime in the beta developer console to free up user slots.
To provide the best experience for your users, you can customize the appearance of the Para Modal to match your application’s branding.
When rendering the ParaModal component, you can pass props to customize its appearance:
For a full list of available ParaModalProps
, refer to the customization guide:
Standalone Para Modal Setup
While the ParaProvider approach is recommended, you can also use the ParaModal as a standalone component. This approach requires you to create and manage a Para client instance manually.
You can create the Para client instance in a dedicated file:
Because Next.js supports server-side rendering (SSR), you need to ensure the modal runs on the client side:
For practical implementation of the Para SDK in Next.js applications, explore our Examples Hub repository. It contains a variety of examples showcasing how to integrate the Para SDK with different Para configurations and use cases.
If you encounter issues during the integration or usage of the Para Modal in Next.js applications, refer to our Next.js troubleshooting guide. It provides solutions to common problems and helps you resolve any issues you may face.
After integrating Para, you can explore other features and integrations to enhance your Para experience.