Skip to main content

​
Prerequisites

1

Create Next.js Application

Run the following command to init your Next.js project
  • npm
  • pnpm
  • yarn
  • bun
  npx create-next-app@latest
2

Install

Now install the @unkey/ratelimit package
  • npm
  • pnpm
  • yarn
  • bun
  npm install @unkey/ratelimit
3

Add Root Key to env

Add your root key to your .env file
UNKEY_ROOT_KEY="YOUR_KEY"
4

Creating a protected route

Create a new route and add the following code
/app/protected/route.ts
import { NextResponse } from 'next/server';
import { Ratelimit } from "@unkey/ratelimit";

const limiter = new Ratelimit({
  namespace: "next-example",
  limit: 2,
  duration: "30s",
  rootKey: process.env.UNKEY_ROOT_KEY
});

export const POST = (async (req) => {
  const identifier = getUserId(); // or ip or anything else you want
  const ratelimit = await limiter.limit(identifier)
  if (!ratelimit.success){
   return new NextResponse("Please try again later", {status: 429});
  }

  return new NextResponse('Hello!');
});
5

Running it

  • npm
  • pnpm
  • yarn
  • bun
  npm run dev
6

Try it out

Go to https://app.unkey.com and create a new key. Then verify it with our new server:
curl -XPOST 'http://localhost:3000/protected'
You will need to curl a few times to see the ratelimiting error. Once you do, you, you will need to wait to perform the action again.

​
What is next?

Now that you’ve seen the power of Unkey, check out some resources below to continue your journey.

Discord

Join our Discord to chat with us and the community

Unkey API Reference

Learn about our API that helps you manage APIs, keys, ratelimits and analytical data.

Next.js SDK

Check out our Next.js SDK and how they fit into your Next application.