Routing
Next.js offers two options for routing within your application, the newer App Router and traditional Pages Router; Stytch is compatible with both.
App Router
Make sure you import from source instead of a /dist folder, e.g. @stytch/nextjs/b2b rather than @stytch/nextjs/dist/b2b.
With an App Router setup, you'll wrap your application in <StytchProvider> in layout.tsx.
The example below utilizes our prebuilt UI components; for headless methods, you'll utilize createStytchB2BHeadlessClient() rather than createStytchB2BUIClient().
// Prebuilt UI components
import { StytchB2BProvider } from '@stytch/nextjs/b2b';
import { createStytchB2BUIClient } from '@stytch/nextjs/b2b/ui';
import React from 'react';
const stytch = createStytchB2BUIClient('PUBLIC_TOKEN');
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<StytchB2BProvider stytch={stytch}>
<html lang="en">
<title>Stytch Next.js App Router Example</title>
<meta
name="description"
content="An example Next.js App Router application using Stytch"
/>
<body>
<Header />
<main>
<div className="container">{children}</div>
</main>
</body>
</html>
</StytchB2BProvider>
);
}Pages Router
With a Pages Router setup, you'll wrap your application in <StytchProvider> in app.tsx.
The example below utilizes our prebuilt UI components; for headless methods, you'll utilize createStytchB2BHeadlessClient() rather than createStytchB2BUIClient().
// Prebuilt UI components
import { StytchB2BProvider } from '@stytch/nextjs/b2b';
import { createStytchB2BUIClient } from '@stytch/nextjs/b2b/ui';
import React from 'react';
const stytch = createStytchB2BUIClient('PUBLIC_TOKEN');
function MyApp({ Component, pageProps }: AppProps) {
return (
<StytchB2BProvider stytch={stytch}>
<Component {...pageProps} />
</StytchB2BProvider>
);
}
export default MyApp;