Skip to main content

Next.js Pages Router Quickstart

This quickstart will guide you through the process of setting up Ory Elements with the Pages Router in a Next.js application.

info

The code used in the following quickstart is available in the Pages Router example GitHub repository

Prerequisites​

  1. Install the @ory/elements-react and @ory/nextjs package in your Next.js application.

    npm install @ory/elements-react @ory/nextjs

  2. Add the configuration for Ory Elements in your Next.js application. Create a new file named ory.config.ts in the root of your project and add the following code:

    ory.config.ts

    See full code on GitHub

  3. Add the middleware to your Next.js application. Create a new file named middleware.ts in the root of your project and add the following code:

    middleware.ts

    See full code on GitHub

  4. Configure browser redirects in your Ory Console. Navigate to Branding > Browser redirects and set the Global redirect URL to /ui/welcome. This ensures users are redirected to the correct page after completing authentication flows.

    Browser Redirects Configuration

  5. Create a new folder named components in the root of your project. Inside the components folder, create a new file named custom-card-header.tsx and add the following code:

    components/custom-card-header.tsx

    See full code on GitHub

    This component is used by the Verification and Settings pages to customize the card header.

  6. Create a new folder named pages in the root of your project. Inside the pages folder, create a new folder named auth. Inside the auth folder, create the following files:

    • login.tsx
    • registration.tsx
    • recovery.tsx
    • verification.tsx

    Additionally, create a settings folder in the pages directory:

    • settings.tsx

    Each of these files will contain the respective Ory Elements component for the self-service flow.

    pages/auth/login.tsx

    See full code on GitHub

  7. Use your own Ory Network project by setting the ORY_SDK_URL environment variable in your .env file:

    .env

    See full code on GitHub

    You can find your Ory Network project URL in the Get started section of the Ory Console.

  8. Run the application and create your first user by navigating to /auth/registration. After registration, you can log in at /auth/login. You can also access the other self-service flows at the following URLs:

    • Recovery: /auth/recovery
    • Verification: /auth/verification
    • Settings: /settings
    npm run dev

    Open your browser and navigate to http://localhost:3000/auth/registration to create your first user.

Next steps​

Now that you have set up Ory Elements with the Pages Router in your Next.js application, you can further customize the components, add your own styles, and integrate them into your application as needed. You can also explore the Ory Elements documentation for more information on how to use the components and customize them to fit your needs. See Theming for more details on how to customize look and feel of the components.