> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> How to install and set up the Stytch Next.js SDK in your application.

For a full walk-through of how to get up and running with a sign-up and login flow using Stytch, check out our [Quickstart Guide](/get-started/quickstart).

<Steps>
  <Step title="Install Packages">
    Install Next.js package:

    ```bash theme={null}
    npm install @stytch/nextjs
    ```
  </Step>

  <Step title="Create the Stytch client">
    Initialize the Stytch client, passing in your Project's `public_token` from the [Project Overview](https://stytch.com/dashboard) of the Stytch Dashboard.

    ```jsx theme={null}
    import { createStytchClient } from '@stytch/nextjs';

    const stytch = createStytchClient(
      process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN,
    );
    ```
  </Step>

  <Step title="Wrap your application in <StytchProvider>">
    Next, pass the Stytch client to the `<StytchProvider>` component at the root of your application, making it accessible to all child components.

    ```jsx layout.jsx theme={null}
    import { createStytchClient, StytchProvider } from '@stytch/nextjs';

    const stytch = createStytchClient(
      process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN,
    );

    export default function RootLayout({ children }) {
      return (
        <html>
          <body>
            <StytchProvider stytch={stytch}>{children}</StytchProvider>
          </body>
        </html>
      );
    }
    ```
  </Step>

  <Step title="Add your login flow">
    You have now initialized the Stytch client, and can add the [Stytch Login component](/api-reference/consumer/frontend-sdks/nextjs/prebuilt-ui/login/configuration) to get a robust, end-to-end login flow working with just a simple config.
  </Step>
</Steps>
