chore: nextjs add readme to use consent ui

examples/nextjs-spa/README.md

@@ -41,6 +41,22 @@ export.
 Now you can see Ory Elements in action by opening http://localhost:3000 in your
 browser!
 
+#### OAuth2 Login/Consent page
+
+This example provides a working Login/Consent page using the Ory Elements UserAuthCard and UserConsentCard.
+
+To use the Consent page, the NextJS application will need a Ory API Token set as an environment variable.
+
+```
+export NEXT_ADMIN_ORY_API_KEY=ory_pat_xxxxx
+```
+
+The `NEXT_PUBLIC_ORY_SDK_URL` will be used for admin API calls as well since Ory Network projects expose both endpoint under the same URL.
+
+Take a look at the Ory Documentation to configure your Ory Network project to use this NextJS application as a custom consent UI. 
+https://www.ory.sh/docs/oauth2-oidc/custom-login-consent/flow#consent
+
+
 ### Using and Modifying the Example
 
 If you want to re-use this example in your own project, you can do so by

examples/nextjs-spa/src/app/api/consent/route.ts

@@ -1,9 +1,8 @@
 import { oryIdentity, oryOAuth } from "@/pkg/sdk"
-import type { NextApiRequest, NextApiResponse } from "next"
 import { redirect } from "next/navigation"
-import { NextResponse } from "next/server"
+import { NextRequest, NextResponse } from "next/server"
 
-export async function GET(req: NextApiRequest, res: NextApiResponse) {
+export async function GET(req: NextRequest, res: NextResponse) {
   const { searchParams } = new URL(req.url || "")
 
   const consent_challenge = searchParams.get("consent_challenge") || ""
@@ -94,7 +93,7 @@ export async function GET(req: NextApiRequest, res: NextApiResponse) {
     })
 }
 
-export async function POST(req: Request, res: NextApiResponse) {
+export async function POST(req: NextRequest, res: NextResponse) {
   // The challenge is a hidden input field, so we have to retrieve it from the request body
   const body = await req.json()
   const challenge = body.consent_challenge