Para with Next.js
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.
Prerequisites
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.
Installing Dependencies
Setting Up the Para SDK
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.
Create a Providers Component”>
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.
Wrap Your App with Providers”
Next, wrap your root layout with the Providers component:
Add the Para Modal
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.
Customizing the Para Modal
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:
Alternative Approach: Standalone Para Modal
Examples
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 Next.js:
Troubleshooting
If you encounter issues during the integration or usage of the Para Modal in Next.js, here are some common problems and their solutions:
Next Steps
After integrating Para, you can explore other features and integrations to enhance your Para experience.