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
:
'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:
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.
Still have questions? Reach out to [email protected] – we're here to help!