---
title: About
description: Integrate SuperTokens with Next.js for authentication, session verification, and route protection.
sidebar:
  order: 1
---

<UITypeSwitch />

<VariantContent storageKey="ui-type" value="prebuilt">


Integrating SuperTokens with a Next.js app involves:
- Calling the frontend and backend init functions
- Adding a website page to display the auth related widgets (on `/auth` by default)
- Creating a serverless function to expose the auth related APIs which will be consumed by the frontend widgets (on `/api/auth/` by default)
- Protecting website routes: Displaying them only when a user is logged in, else redirecting them to the login page
- Performing session verification:
    - In your APIs
    - In `getServerSideProps`

## Try an example app
Download and run an example Next.js app quickly using the following command:

```bash
npx create-supertokens-app@latest --frontend=next --recipe=emailpassword
```

</VariantContent>

<VariantContent storageKey="ui-type" value="custom">


Integrating SuperTokens with a Next.js app involves:
- Calling the frontend and backend init functions
- Building the various auth flows as per the [custom UI setup guide](/quickstart#1-integrate-the-frontend-sdk).
- Creating a serverless function to expose the auth related APIs which will be consumed by the frontend widgets (on `/api/auth/` by default)
- Protecting website routes: Displaying them only when a user is logged in, else redirecting them to the login page
- Performing session verification:
    - In your APIs
    - In `getServerSideProps`

## Try an example app

Download and run an example Next.js app quickly using the following command:

```bash
npx create-supertokens-app@latest --frontend=next --recipe=emailpassword
```

:::note[This example app uses our pre-built UI]
:::

</VariantContent>