Skip to main content

Troubleshooting build issues with 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.

Using the App Router​

If you are using the new Next13 App Router (or App Directory), 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 file and add 'use client'; as the first line. Then, within this same file, create a custom component (e.g. PrivyProviderWrapper) that accepts React children as props, and renders these children, wrapped by the PrivyProvider:

src/components/privy-provider-wrapper.tsx
'use client';
import { PrivyProvider } from "@privy-io/react-auth";

export default function PrivyProviderWrapper({
  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 your PrivyProvider wrapper in your RootLayout​

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

src/app/layout.tsx
import PrivyProviderWrapper from "../components/privy-provider-wrapper";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <PrivyProviderWrapper>
            {children}
        </PrivyProviderWrapper>
      </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!