Appearance

Troubleshooting NextJS ​

If you're using a framework like NextJS and are running into build errors, check out some common errors below, and how to resolve them.

App router ​

If you are using the new app router, you may encounter issues when attempting to wrap your app with the PrivyProvider. If so, follow the instructions below to set up your app with Privy:

1. Create a wrapper component for the PrivyProvider ​

Since the PrivyProvider is a third-party React Context, it can only be used client-side, with the 'use client'; directive. Check out these docs from NextJS for more information.

First, create a new component file and add 'use client'; as the first line. Then, within this same file, create a custom component (e.g. Providers) that accepts React children as props, and renders these children, wrapped by the PrivyProvider:

tsx
// components/providers.tsx
'use client';

import {PrivyProvider} from '@privy-io/react-auth';

export default function Providers({children}: {children: React.ReactNode}) {
  return <PrivyProvider appId="insert-your-privy-app-id">{children}</PrivyProvider>;
}

This wrapper component ensures that the PrivyProvider is only ever rendered client-side, as required by NextJS.

2. Wrap your app with the providers component in your RootLayout ​

Next, in your app's Root Layout, wrap the layout's children with your providers component, like so:

tsx
import Providers from '../components/providers';

export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Within your RootLayout, make sure you are using the wrapper component you created in step (1), not the raw PrivyProvider exported by the SDK.

That's it! You can check out a complete example of Privy integrated into a NextJS app using the App Router here.

INFO

Still have questions? Reach out to [email protected] – we're here to help!