Next.js on Vercel

Source Code

This is a step by step guide on how to receive webhooks from qstash in your Next.js app.

1. Create a new nextjs app named `qstash-receiver`

   There are great tutorials on how to setup Next.js on Vercel, so I won’t go into details here.

   npx create-next-app qstash-receiver
   cd qstash-receiver
   

2. Install qstash

   npm install @upstash/qstash@latest
   

3. Write your function

   Pages Serverless Function

   /pages/api/qstash-serverless.ts

   import type { NextApiRequest, NextApiResponse } from "next";
   import { verifySignature } from "@upstash/qstash/dist/nextjs";
   
   async function handler(req: NextApiRequest, res: NextApiResponse) {
     console.log(req.headers);
   
     await new Promise((r) => setTimeout(r, 1000));
   
     console.log("Success");
     console.log(typeof req.body, { body: req.body });
     res.status(200).json({ name: "John Doe", body: req.body });
   }
   
   export default verifySignature(handler);
   
   export const config = {
     api: {
       bodyParser: false,
     },
   };
   

   /pages/api/qstash-serverless.ts

   import type { NextApiRequest, NextApiResponse } from "next";
   import { verifySignature } from "@upstash/qstash/dist/nextjs";
   
   async function handler(req: NextApiRequest, res: NextApiResponse) {
     console.log(req.headers);
   
     await new Promise((r) => setTimeout(r, 1000));
   
     console.log("Success");
     console.log(typeof req.body, { body: req.body });
     res.status(200).json({ name: "John Doe", body: req.body });
   }
   
   export default verifySignature(handler);
   
   export const config = {
     api: {
       bodyParser: false,
     },
   };
   

   /pages/api/qstash-edge.ts

   import { NextRequest, NextResponse } from "next/server";
   import { verifySignatureEdge } from "@upstash/qstash/dist/nextjs";
   
   async function handler(req: NextRequest) {
       console.log(req.headers);
       await new Promise((r) => setTimeout(r, 1000));
       console.log("Success");
       console.log(typeof req.body, { body: req.body });
       return NextResponse.json({ name: "John Doe", body: req.body });
   }
   
   export default verifySignatureEdge(handler);
   export const config = {
       runtime: "edge",
       api: {
       bodyParser: false,
       },
   };
   

   /app/api/qstash-serverless/route.ts

   import { NextRequest, NextResponse } from "next/server";
   import { verifySignatureAppRouter } from "@upstash/qstash/dist/nextjs";
   
   async function handler(_req: NextRequest) {
     await new Promise((r) => setTimeout(r, 1000));
   
     console.log("Success");
     return NextResponse.json({ name: "John Doe " });
   }
   
   export const POST = verifySignatureAppRouter(handler);
   

   /app/api/qstash-edge/route.ts

   import { NextRequest, NextResponse } from "next/server";
   import { verifySignatureEdge } from "@upstash/qstash/dist/nextjs";
   
   async function handler(_req: NextRequest) {
     await new Promise((r) => setTimeout(r, 1000));
   
     console.log("Success");
     return NextResponse.json({ name: "John Doe" });
   }
   
   export const POST = verifySignatureEdge(handler);
   export const runtime = "edge";
   

   verifySignature or verifySignatureEdge will try to load QSTASH_CURRENT_SIGNING_KEY and QSTASH_NEXT_SIGNING_KEY from the environment. If one of them is missing, an error is thrown. We will set these in step 5.

4. Deploy to Vercel

   I’m deploying using Vercel’s CLI, but you could also push your project to a remote repo and deploy that way. If you have never used the cli, please run npx vercel login before. See here

   You can accept all the default settings.

   $ npx vercel
   
   Vercel CLI 24.2.5
   ? Set up and deploy “~/github/upstash/qstash-examples/vercel-nextjs”? [Y/n] y
   ? Which scope do you want to deploy to? Andreas Thomas
   ? Link to existing project? [y/N] n
   ? What’s your project’s name? vercel-nextjs
   ? In which directory is your code located? ./
   Auto-detected Project Settings (Next.js):
   - Build Command: next build
   - Output Directory: Next.js default
   - Development Command: next dev --port $PORT
   ? Want to override the settings? [y/N] n
   🔗  Linked to chronark/vercel-nextjs (created .vercel)
   🔍  Inspect: https://vercel.com/chronark/vercel-nextjs/FZScmeKCWr5snn6P8voyv3W28npf [904ms]
   ✅  Production: https://vercel-nextjs-two-sandy.vercel.app [copied to clipboard] [37s]
   📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
   💡  To change the domain or build command, go to https://vercel.com/chronark/vercel-nextjs/settings
   

5. Set Signing Keys in Vercel

   Go to your project’s settings and set the following environment variables:

6. Redeploy to use the new environment variables

   To make the added environment variables take effect, you must redeploy your project.

   $ npx vercel --prod
   Vercel CLI 24.2.5
   🔍  Inspect: https://vercel.com/chronark/vercel-nextjs/3wPxyEPwdcMrncSNqFNcDD41rjxB [3s]
   ✅  Production: https://vercel-nextjs-two-sandy.vercel.app [copied to clipboard] [39s]
   

7. Publish a message

   Go to your project’s logs and then publish a new message.

   curl --request POST "https://qstash.upstash.io/v2/publish/https://vercel-nextjs-two-sandy.vercel.app/api/qstash" \
        -H "Authorization: Bearer <QSTASH_TOKEN>" \
        -H "Content-Type: application/json" \
        -d "{ \"hello\": \"world\"}"
   

   {"messageId":"msg_5GJrFa5aMFxDYsDygAnW9YW8cmRm"}
   

   In the logs you should see something like this:

   [POST] /api/qstash
   If this is printed, the signature has already been verified
   

That’s it, you have successfully created a secure Next.js API route, that receives and verifies incoming webhooks from qstash.

Learn more about publishing a message to qstash here