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;