Add Ory Hydra login and consent features to Next.js examples and Next.js package

Preflight checklist

• I could not find a solution in the existing issues, docs, nor discussions.
• I agree to follow this project's Code of Conduct.
• I have read and am following this repository's Contribution Guidelines.
• I have joined the Ory Community Slack.
• I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

No response

Describe your problem

Hello Ory team,

I would like to request the addition of the Ory Hydra login and consent features to the following Next.js projects in the Ory Elements monorepo:

Next.js App Router example
Next.js Pages Router example
Next.js package

Describe your ideal solution

Ory Hydra is a powerful OAuth2 and OpenID Connect provider, and integrating its login and consent flow into these Next.js examples and package would:

• Provide developers with a ready-to-use implementation for managing user authentication and consent.
• Simplify OAuth2/OIDC workflows in Next.js applications.
• Ensure better security and compliance with best practices.

This implementation has already been done in the Ory Kratos Self-Service UI Node project. Having the same functionality in the Next.js examples and package would improve consistency across Ory’s ecosystem and provide a better developer experience.

Workarounds or alternatives

The feature should include:

• A login and consent flow example in both the App Router and Pages Router examples.
• Documentation and guidance on how to customize the login and consent flows.
• Integration with the Next.js package for easier adoption.

This enhancement would make it easier for developers using Ory Elements to implement Ory Hydra in their Next.js projects.

Version

@ory/nextjs: v1.0.0

Additional Context

No response

Start by reviewing examples/nextjs-app-router, examples/nextjs-pages-router, and packages/nextjs, then compare the existing Ory Kratos Self-Service UI Node implementation. Define the integration boundaries and documentation needed for login and consent in both router examples. Done means both examples demonstrate the flows and the Next.js package supports the intended adoption path.