BUILD AND SELL an API with Next.js, Vercel, and RapidAPI

In this guide, I will show you how to build and sell APIs using Next.js, Prisma, and RapidAPI. Whether you have an excellent idea for data that would make sense as an API or are just interested in learning how to build APIs, this guide is for you.

This guide will demonstrate how to build the API using serverless API endpoints inside Next.js. With this approach, we can easily deploy the API to Vercel, which offers reliable and scalable serverless functions. I'll guide you through each process step, from setting up the development environment to creating API endpoints and integrating Prisma for database management.

You can click on the GitHub repository with the source code for this guide, so you can follow along and build your API from scratch.

GitHub repository for the API source code

PlanetScale for SQL Database

I also use PlanetScale as my SQL serverless database. It is a cloud-native database platform that provides a fully-managed and scalable database solution for modern applications. Register for a free account and construct your database directly on the platform.

PlanetScale - a serverless database

The final section is an updated or modified version of my previous guide, which detailed how to construct an Express API with TypeScript, PlanetScale, and web scraping with Cheerio. You can follow these guides as follows:

• Integrate Express, RapidAPI, and Xata into your TypeScript API Development (Part 1)
• Integrate Express, RapidAPI, and Xata into your TypeScript API Development (Part 2)

Initially, after setting up a free account with PlanetScale, you can choose any SQL database or use PostgreSQL. Later, I will demonstrate how the configuration changes when utilizing Prisma as our Object-relational mapping (ORM). Nonetheless, I will create a new database on the platform, which we'll refer to as "throne-of-glass-2".

Building a new database in PlanetScale

Integrating Prisma with Next.js for PlanetScale Database Configuration

In this section, we'll generate the "throne-of-glass-2" database on PlanetScale, which employs branches. Initially, we'll be on the default "main" branch, where we can modify the code or schema as required. To achieve this, we'll integrate Prisma within Next.js.

To begin, let's proceed with setting up a new Next.js project. For this example, we'll utilize TypeScript and look for the appropriate command that supports TypeScript. You can enter the command in your VS Code terminal to do this.

sh
Copy
npx create-next-app@latest --typescript

To commence, you can give a name to your project, like "throne-of-glass-api" and proceed with the installation. Once it's complete, I'll launch it within the same VS Code window to start the integration of Prisma with Next.js.

While the installation progresses, we can search for "prisma next.js" and locate a helpful tutorial on the Vercel page for setting up this integration. We can then follow the instructions, beginning with creating a new app.

Supportive guide for setting up integration

Step 1

We'll now proceed with setting up our Next.js starter project. To open the folder within the current window, I'll enter the following command:

sh
Copy
code -r throne-of-glass-api/ 

Step 2

Next, the setup involves configuring Prisma and establishing a connection to your PostgreSQL database. You can begin by installing the Prisma CLI via npm:

sh
Copy
npm install prisma --save-dev

Step 3

You can now utilize the Prisma CLI to create a basic Prisma setup by running the following command:

sh
Copy
npx prisma init

Executing this command will trigger a Prisma initialization process, enabling us to configure it to work with our database. This action will generate the following files in a new prisma directory:

• schema.prisma: Your primary Prisma configuration file, which includes the database schema.
• .env: A dotenv file utilized for defining the database connection URL and other sensitive information as environment variables.

Regardless of the type of database you're employing, it's essential to update the connection string accordingly. I'll illustrate how to accomplish this with PlanetScale shortly.

Step 4

You may also notice that the .env file is represented in green, indicating that we must add it to the .gitignore file. We'll take care of this and ensure that the environment variable file never gets checked in; it should then turn gray.

Copy
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local
.env

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

Step 5

Another thing to observe is the presence of a directory named Prisma that contains the file schema.prisma. This file serves as the configuration for our database and the location where we specify our schema.

By default, it is configured to function with PostgreSQL. If you use PostgreSQL, you can modify the environment variable in the .env file.

prisma
Copy
generator client {
    provider = "prisma-client-js"
}
datasource db {
    provider = "postgresql"
    url      = env("DATABASE URL")
}

However, if you plan to use PlanetScale instead, note that the configuration will be slightly altered. Specifically, there are two different properties you need to add: referentialIntegrity and previewFeatures to enable the referentialIntegrity.

These two lines differ from the configuration when working with PostgreSQL. I will show you the specific changes needed for PlanetScale.

prisma
Copy
datasource db {
    provider             = "mysql"
    url                  = env("DATABASE_URL")
    referentialIntegrity = "prisma"
}
generator js {
    provider        = "prisma-client-js"
    previewFeatures = ["referentialIntegrity"]
}

Step 6

To complete the setup, we need to add the connection string for the database. To do this, we will navigate to our primary branch and select the Connect option.

Setting up a connection string

PlanetScale automatically generates a Prisma schema by default. If it isn't selected, you can choose Prisma and then copy the generated connection string to be pasted into the .env file.

Copy
DATABASE URL= 'mysqL://feobiauoukub: pscale_pw_×HSHq3_HY9VzoaNIHOcDL8ADdqBrIqPfVuZDObg9oEgenhp89etn6yii.
us-east-4.psdb.cloud/throne-of-glass-2?sslaccept=strict'

Step 7

To create the "Throne of Glass Wiki" API, we first need to define its schema. We can do this by extracting information from the "Throne of Glass" fandom website, where we'll find information on the main character, "Aelin". We'll extract all the relevant information about "Aelin" and store it in our database.

Navigating Throne of Glass Wiki API

Step 8

The following code defines a table called tog_character with the properties id, name, species, and image. It uses the Prisma ORM to interact with a MySQL database, and includes referential integrity checks.

prisma
Copy
datasource db {
    provider             = "mysql"
    url                  = env("DATABASE_URL")
    referentialIntegrity = "prisma"
}
generator js {
    provider        = "prisma-client-js"
    previewFeatures = ["referentialIntegrity"]
}
model tog_character {
    id      Int     @id @default(autoincrement())
    name    String  @db.VarChar(255)
    species String  @db.VarChar(255)
    image   String? @db.VarChar(255)
}

Now we can run the following command in the Prisma CLI to push the schema to our PlanetScale database:

sh
Copy
npx prisma db push

Step 9

Once the deployment of the schema to PlanetScale is complete, we can verify it by navigating to the schema section in PlanetScale. The next step is to create a seed file named seed.ts in the directory. We can paste the existing source code into the seed file. Although it is not the main focus of this guide, we will briefly explain it.

The source code includes an array of character names we want to extract information. We also have a loadCharacters function that will retrieve character information for each page and then create them in the database using Prisma.

At the top of the code, we use Cheerio and Axios to scrape information from individual web pages. If you want to learn more about how this works, we have a comprehensive explanation in a previous guide that uses TypeScript within Node.js and Express app, but the concept is the same.

In summary, this code extracts information for each character and saves it into our database using Prisma. Here is the complete code that we are referring to.

ts
Copy
import axios from 'axios';
import cheerio from 'cheerio';
import 'dotenv/config';
import { Prisma, PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
const getCharacterInfo = async (
    characterName: string
): Promise<Prisma.tog_characterCreateInput> => {
    const { data } = await axios.get(`https://throneofglass.fandom.com/wiki/${characterName}`);
    const $ = cheerio.load(data);
    let name = $('div[data-source="full name"] > div.pi-data-value.pi-font').text();
    const species = $('div[data-source="species"] > div.pi-data-value.pi-font').text();
    const image = $('.image.image-thumbnail > img').attr('src');
    if (!name) {
        const parts = characterName.split('/');
        const last = parts[parts.length - 1];
        name = last.replace('_', ' ');
    }
    const characterInfo: Prisma.tog_characterCreateInput = {
        name,
        species,
        image,
    };
    return characterInfo;
};
const loadCharacters = async () => {
    try {
        const characterInfoPromises = characterNames.map(characterName =>
            getCharacterInfo(characterName)
        );
        const characters: Prisma.tog_characterCreateInput[] = await Promise.all(
            characterInfoPromises
        );
        console.log('🚀 ~ file: seed.ts ~ line 138 ~ loadCharacters ~ characters', characters);
        // save them to the db
        console.log("Let's seed it");
        await prisma.tog_character.createMany({ data: characters });
    } catch (error) {
        console.error(error);
    }
};
const characterNames = [
    'Abraxos',
    'Aedion_Ashryver',
    'Aelin_Galathynius',
    'Anneith',
    'Ansel_of_Briarcliff',
    'Asterin_Blackbeak',
    'Blackbeak_Matron',
    'Borte',
    'Briar_Blackbeak',
    'Bronwen_Vanora',
    'Cadre',
    'Cairn',
    'Chaol_Westfall',
    'Connall',
    'Cresseida_Blueblood',
    'Crochan_Witches',
    'Cyrene',
    'Deanna',
    'Dorian_Havilliard',
    'Dorian_Havilliard_I',
    'Dresenda',
    'Duke_Perrington',
    'Edda_Blackbeak',
    'Elena_Galathynius_Havilliard',
    'Elgan',
    'Elide_Lochan',
    'Endymion_Whitethorn',
    'Erawan',
    'Essar',
    'Evangeline',
    'Fae',
    'Faline_Blackbeak',
    'Falkan_Ennar',
    'Fallon_Blackbeak',
    'Farasha',
    'Farnor',
    'Fendir',
    'Fenrys_Moonbeam',
    'Fleetfoot',
    'Galan_Ashryver',
    'Gavriel',
    'Ghislaine_Blackbeak',
    'Glennis_Crochan',
    'Hasar',
    'Hellas',
    'Human',
    'Ilias',
    'Ilken',
    'Imogen_Blackbeak',
    'Kaltain_Rompier',
    'Kaya_Blackbeak',
    'Keva',
    'Kharankui',
    'Kyllian',
    'Lady_of_the_Great_Deep',
    'Linnea_Blackbeak',
    'Lorcan_Salvaterre',
    'Lord_Westfall',
    'Lumas',
    'Lysandra',
    'Maeve',
    'Mala_Fire-Bringer',
    'Manon_Blackbeak',
    'Murtaugh_Allsbrook',
    'Nesryn_Faliq',
    'Ren_Allsbrook',
    'Rolfe',
    'Rowan_Whitethorn',
    'Ruk',
    'Sartaq',
    'Sellene_Whitethorn',
    'Sorrel_Blackbeak',
    'Temis',
    'The_Bane',
    'The_Lord_of_the_North',
    'The_Silent_Assassins',
    'The_Thirteen',
    'Thea_Blackbeak',
    'Three-Faced_Goddess',
    'Vernon_Lochan',
    'Vesta_Blackbeak',
    'Weylan_Darrow',
    'Yellowlegs_Matron',
    'Yeran',
    'Yrene_Westfall',
];
loadCharacters();

Step 10

To install different packages, execute the command below in your terminal:

sh
Copy
npm install axios cheerio dotenv

After installing these packages, create a seed command in the package.json file to run the application. Before you can access your database from Next.js using Prisma, you need to install Prisma Client in your app. You can install it via npm with the following command:

sh
Copy
npm install @prisma/client

You also need to install ts-node as a dependency, which you can do with the following command:

sh
Copy
npm install ts-node –save-dev

Since the seed file will run outside of Next.js, we'll use ts-node to run it. To do this, add the following to your package.json file:

json
Copy
"scripts": {
  "seed": "ts-node prisma/seed.ts"
}

This will enable you to run the seed command using the following command in your terminal:

sh
Copy
npm run seed

Step 11

In this step, you will need to configure the ts-node module in the tsconfig.json file to specify the module system it should use. You can add a configuration object for ts-node with the compilerOptions property set to module: Node16. Here is the complete code:

json
Copy
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
  "ts-node": {
    "compilerOptions": {
      "module": "Node16"
    }
  }
}

The following command will be used to run the seed and populate the database with all the characters:

sh
Copy
npm run seed

After running the above command, we can use the following command in the PlanetScale console to see all the data:

sh
Copy
select * from tog_character;

The data has been created. You can now add some initial dummy data using Prisma Studio by running the following command:

sh
Copy
npx prisma studio

Step 12

To create API endpoints in Next.js, we will follow these steps:

• Inside the pages/api directory, create a new directory called characters.
• Inside the characters directory, create an index.ts file.
• Define the API endpoint handler as an asynchronous function that takes a req parameter of type NextApiRequest and a res parameter of type NextApiResponse.
• Inside the handler function, return a response with a status of 200 and a JSON object with a msg property set to "Hello World".
• Export the handler function as the default export of the index.ts file.

Run the application using the following command:

sh
Copy
 npm run dev

Step 13

After populating the data in the table, it can be viewed in Prisma Studio, a helpful add-on. With the data ready, we can create API endpoints in Next.js. To do so, we'll create a new folder named characters inside the API directory of our pages folder.

In this folder, we'll add an index.ts file to define the handle API endpoint as an async() function with a req parameter of NextApiRequest and a res parameter of NextApiResponse.

Within the handle function, we'll return a res.status of 200 and a json object with a msg property of "Hello World". Finally, we'll need to export handler as the default.

Once we've completed these steps, we can test the endpoint by killing Prisma Studio and running the following command:

sh
Copy
npm run dev

We can then visit http://localhost:3000/api/characters in our browser to verify that the API endpoint is functioning properly.

Getting back API response

Step 14

To streamline the testing process, we can utilize the RapidAPI Client within VS Code instead of constantly switching between the browser and our code editor.

We'll create a new endpoint within the RapidAPI Client to do this. Additionally, we can use the keyboard shortcut command+shift+p, search RapidAPI and then select create new requests from the clipboard. This lets us quickly paste the URL we've copied and click Send to test our API endpoint.

Creating Endpoint with RapidAPI Client

There are a few other convenient features available within the RapidAPI Client. For example, using various libraries, you can generate code snippets for calling an endpoint.

Here's an example of what the code would look like for calling our API endpoint using Axios:

ts
Copy
import axios from "axios";
const options = {
  method: 'GET',
  url: 'http://localhost:3000/api/characters'
};
axios.request(options)
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.error(error);
  });

Step 15

Another useful feature of the RapidAPI Client is the ability to generate type definitions for the response data. We can select JSON to and click on TypeScriptto do this. This will generate type definitions based on the actual data returned from the API endpoint.

Returning to the index.ts file, now that we've connected to our database using Prisma, we need to configure the Prisma Client. However, specific steps are required to set up the Prisma Client with Next.js. We can refer to a document called Best practices for instantiating PrismaClient with Next.js.

Guide for Setting up Prisma Client with Next.js

To avoid creating multiple Prisma connections, we can move the Prisma configuration to a separate file called prisma.ts in a newly created Utils directory. This will allow us to reference the same Prisma Client throughout our application whenever needed. We can import the Prisma Client from this Utils directory.

ts
Copy
import { PrismaClient } from '@prisma/client';
declare global {
  // allow global 'var' declarations
  // eslint-disable-next-line no-var
  var prisma: PrismaClient | undefined;
}
export const prisma = global.prisma || new PrismaClient({
  log: ['query']
});
if (process.env.NODE_ENV === 'production') {
  global.prisma = prisma;
}

Now, we can import the new prisma created by going back into the utils directory and then into the prisma file. With this imported, we can use the Prisma Client to query our data. The simplest query we can make is to retrieve all the characters.

We can create constant named characters and use await to get the response from prisma. Next, we need to specify the table we want to access, which in this case is tog_character, and then we can call findMany to retrieve all the data. Finally, we can return our characters.

ts
Copy
import { NextApiRequest, NextApiResponse } from 'next';
import { prisma } from '../../../utils/prisma';
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const characters = await prisma.tog_character.findMany();
  return res.status(200).json(characters);
};
export default handler;

After saving this file, we can run our application again using the command:

sh
Copy
npm run dev

Step 16

After returning to the RapidAPI Client, we can resend the request and expect to receive all of the data. However, we also want to implement some configurations to allow query parameters to limit the number of characters received or add a skip.

The first step is to check that the HTTP request method is GET request. If it is not, we will return a 405 error status. This ensures that only GET requests are accepted. Afterward, we can enable query parameters to allow users to specify the limit of characters they want to receive. For example, the endpoint http://localhost:3000/api/characters?limit=5 will limit the number of characters to five.

To retrieve the limit value, we need to access it through req.query.limit since all the query parameters can be obtained from the query property of the request object. Similarly, we'll get the skip value as well.

Before proceeding further, we must validate the limit to ensure it is valid. We'll convert it to a string first since limit can be a string or a string array. If limit is an array, we'll return the first element; else, we'll just return limit. This will ensure that limit is a string, not an array.

We'll do the same for skip and replace all the limit instances with a skip in the code. To ensure that these values are indeed numbers and not strings, we will create a take variable and assign it the value of parseInt(limitStr). This is because prisma uses take to refer to the limit.

If take is not a number (determined by using the isNaN function), we will return an error message with a status(400) and an err message stating that the list parameter must be a valid number. We will follow the same steps for skipStr.

Finally, we need to create a configuration object for the query, considering the user-inputted query parameters such as take and skip. We can initialize an empty object called queryConfig and add properties based on the query parameters.

If limitStr is passed in, we add queryConfig.take and set it equal to take. Similarly, if skipStr is passed in, we add queryConfig.skip and set it equal to skip. To resolve TypeScript errors, we can define a type for our Queryconfig. Finally, we pass queryConfig to our findMany() method.

ts
Copy
import { tog_character } from '@prisma/client'
import type { NextApiRequest, NextApiResponse } from 'next'
import { prisma } from '../../../utils/prisma'
type ErrorResponse = {
    err: string
}
type QueryConfig = {
    take?: number,
    skip?: number
}
const handler = async (req: NextApiRequest, res: NextApiResponse<tog_character[] | ErrorResponse>) => {
    if (req.method !== 'GET') {
        res.status(405);
    }
    try {
        const limit = req.query.limit;
        const limitStr = Array.isArray(limit) ? limit[0] : limit;
        const skip = req.query.skip;
        const skipStr = Array.isArray(skip) ? skip[0] : skip;
        const queryConfig: QueryConfig = {};
        if (limitStr) {
            const take = parseInt(limitStr);
            if (isNaN(take)) {
                return res.status(400).json({ err: "Please enter a valid number for the limit parameter" })
            }
            queryConfig.take = take;
        }
        if (skipStr) {
            const skip = parseInt(skipStr);
            if (isNaN(skip)) {
                return res.status(400).json({ err: "Please enter a valid number for the skip parameter" })
            }
            queryConfig.skip = skip;
        }
        const characters = await prisma.tog_character.findMany(queryConfig)
        return res.status(200).json(characters)
    } catch (err) {
        console.error(err);
        res.status(500).json({ err: "Aghhhhh" });
    }
}
export default handler;

It's time to test the query. We expect it to return all the input that we have provided. Now we can add a limit property of 5 by visiting http://localhost:3000/api/characters?limit=5.

Similarly, we can add a skip property of 10 by visiting http://localhost:3000/api/characters?limit=5&skip=10. The query is working fine, as the user can query all the characters, limit the number of characters, and skip a certain number of characters.

Testing the query in RapidAPI Client

Step 17

We'll create a new file called [Id].ts for a dynamic route. A dynamic route allows us to extract a portion of the URL path following a certain character, such as a number or an ID, and use that extracted value to query a database and retrieve relevant information.

We'll create an async function called handler with req as the NextApiRequest and res as the NextApiResponse. This function will only handle GET requests to use the same check as before.

Next, we'll extract the id from the path by accessing req.query.id. Then, we'll use res.json() to output the id to see if we've correctly extracted it.

ts
Copy
import { NextApiRequest, NextApiResponse } from 'next';
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method !== 'GET') {
    return res.status(405);
  }
  
  const id = req.query.id;
  res.json({ id });
};
export default handler;

We can update the previous request in the Visual Studio Code editor and enter the URL http://localhost:3000/api/characters/2 to access a specific character with the ID of 2. Then we can run the test again and verify that the ID value of 2 is returned.

Updating request

Step 18

To convert the ID string to a number, we'll use the same approach as before. First, we check if the id variable is an array and extracts the item if necessary. Then, we create a new variable called IdNum and apply parseInt(idStr) to convert the idStr string to a number.

Next, we'll use an if statement to check if IdNum is not a number (NaN). If not, we'll return an error message with a status code of 400 and a JSON response that says, Please enter a valid number for the character ID. This is a basic form of validation to ensure the user inputs a valid ID.

ts
Copy
import { NextApiRequest, NextApiResponse } from 'next';
import { prisma } from '../../../utils/prisma';
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method !== 'GET') {
    return res.status(405);
  }
  
  const id = req.query.id;
  const idStr = Array.isArray(id) ? id[0] : id || '';
  const idNum = parseInt(idStr);
  if (isNaN(idNum)) {
    return res.status(400).json({ err: 'Please enter a valid number for character id' });
  }
  const character = await prisma.tog_character.findUnique({
    where: {
      id: idNum
    }
  });
    
  res.json(character);
};
export default handler;

Step 19

The updated code can now be tested by making a new request in VS Code with the updated URL to get a specific character. Changing the ID in the URL should return a different character in the response. For example, a GET request to http://localhost:3000/api/characters/1 should return the first character in the database, while changing the ID to 2 in the URL should return the second character, and so on.

Now that all API endpoints are functional, we can deploy it and host the application on Vercel. Once this is done, register the API on RapidAPI and monetize it. To get started, we can use the GitHub CLI to create a repository for the "throne-of-glass-api-2" project by running the following command:

sh
Copy
gh repo create

After creating the repository, we can search for and locate it on GitHub.

Step 20

The next step is to set up hosting for the repository on Vercel. If a free Vercel account does not exist yet, one can be created, and then a new project can be created within Vercel.

Hosting repository on Vercel

To import the repository from GitHub into Vercel, we can log in to Vercel and click on the "Import Project" button. We can then select "Import Git Repository" and choose the repository we want to import. Vercel will handle the rest of the process, including the build and deployment.

Next, we need to add an environment variable for the database in Vercel. We can do this by going to the Vercel dashboard, selecting our project, and navigating to the "Settings" tab. Under the "Environment Variables" section, we can add a new variable with the key DATABASE_URL and the value copied from our `.env file.

After this, we can deploy our application to Vercel, which will handle the hosting process. Once the application is hosted on Vercel, we can register it in Rapid API Hub by creating a new API and providing the necessary information, such as the API name, description, endpoint URL, and authentication method. We can then add endpoints to the API and define the pricing and plan options.

The Vercel dashboard will display a Visit API button allowing users to access and test the API easily.

Deploying application to Vercel

Step 21

Before we proceed, we need to check the new API routes in our document list. So let's write a command in our terminal:

sh
Copy
git add *

After these files have been added, we can run the following command:

sh
Copy
git commit -m "Initial commit"

To push this stuff up, I can run the following command:

sh
Copy
git push

It's worth noting that one of the benefits of connecting our GitHub repository to Vercel is that the platform will automatically initiate a build process whenever we push new code to the repository. This can save us time and ensure that the latest version of the code is always being deployed.

Once the build process is complete, we can test the API endpoints to ensure everything functions as expected.

Checking Deployment status

To update our environment variable in the project settings, we will update the DATABASE_URL with the value that we copied from our .env file earlier, which is "mysql://feObiauOukub:pscale_pw_xHS4q3_HY9VzoaN1HOcDL8ADdqBrlqP/VuZDQbg90Eg@nhp89etn6yii.us-east-4.psdb.cloud/throne-of-glass-2?sslaccept=strict".

Updating environment variable

To update the changes made to the environment variable, we need to redeploy the application. We can achieve this by calling the redeploy command on the existing deployment and initiating a new build.

After deployment, we can test the API by navigating to http://throne-of-glass-api2.vercel.app/api/characters, and we should get a response. We can also change our limits to 5 and add a skip parameter of 50 by navigating to http://throne-of-glass-api2.vercel.app/api/characters?limit=5&skip=50.

Getting API response after re-deploying environment variable

Step 22

To fix the characters function in Vercel, we must update another function by defining the Prisma. We can access the functions and add an import statement for prisma from directories such as utils and prisma in our [id].ts

ts
Copy
import { NextApiRequest, NextApiResponse } from 'next';
import { prisma } from '../../../utils/prisma';
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method !== 'GET') {
    return res.status(405);
  }
  
  const id = req.query.id;
  const idStr = Array.isArray(id) ? id[0] : id || '';
  const idNum = parseInt(idStr);
  if (isNaN(idNum)) {
    return res.status(400).json({ err: 'Please enter a valid number for character id' });
  }
  const character = await prisma.tog_character.findUnique({
    where: {
      id: idNum
    }
  });
    
  res.json(character);
};
export default handler;

Let's run this in our terminal to push the prisma reference, which will go ahead again and kick off a build for that whole process :

sh
Copy
git add *
git commit -m "Updated missing prisma reference"
git push

Now you can see that the API is hosted on Vercel. The API is ready to use, and it's ready to add to RapidAPI Hub so that we can go ahead and sell this project.

API working correctly

Publishing on RapidAPI

Let us proceed to create an API project in RapidAPI Studio named "Throne of Glass API 2". We chose this name as it has been used before.

The description for this project will be "This API provides information on the characters of the Throne of Glass series". We will select the category "Entertainment" and the team as "personal" before creating this API project.

Adding project on RapidAPI Studio

Update API information on Hub Listing

We will now proceed to the Hub Listing section, where users can view our API. Here, we can add relevant information such as the website, terms of use, and a README to provide users with more information about the API. It is important to ensure that the API is set to Public for easy accessibility to users.

We will now add the Base URL in the RapidAPI Studio for the Throne of Glass API 2. The Throne of glass API endpoint we had is the link at Vercel, "http://throne-of-glass-api-2.vercel.app". We will paste this link as the Base URL and save the changes.

Creating Endpoint

To create endpoints in the API project, we will first add an endpoint named "Get all characters" with a description that specifies it's used to retrieve all characters with the option to limit the number of responses and skip a certain number of characters. For the GET method, we'll set the URL as "/api/characters".

We will also define two parameters for this endpoint, namely "limit" and "skip". Furthermore, Rapid API Studio offers a code snippet that can be customized for various programming languages like Node.js and Axios, which developers can use to make requests to this endpoint. Finally, we can save the changes made.

Defining endpoints on RapidAPI Studio

We can proceed with creating a new API endpoint called "Get character by ID" with a description of "Get an individual character". This endpoint will require a " id " path parameter of type "string". We'll set the endpoint URL as/api/characters/{id}.

Monetizing API

To enable monetization for our API, we need to select the appropriate tier and set a request limit. In this case, we can choose the free tier and set a 10-requests-per-hour limit. This means that after ten requests in an hour, the API will no longer be available until the next hour.

If we upgrade to the pro tier, we can increase the request limit to 100 requests per hour and set a subscription price of $10 per month.

Setting up Pricing options

To further control the usage of the API, we can also set a quota limit on the number of requests per day or month. For example, we can set the quota limit for the free tier to 500 requests per month with a hard limit, which means that requests will be blocked once the limit is reached.

We can set the limit to 5,000 requests per month for the pro tier. However, the limits can be adjusted to match the specific requirements of the API.

Viewing the API Appearance on RapidAPI Hub

Let's proceed to the Rapid API Hub to look at this API's appearance. You will see two endpoints available, namely Get a character by id and Get all characters.

You can test these endpoints to check the response that you receive. Other users would view the API listing and then submit requests with their API keys by sending them to the complete URL on the RapidAPI Hub.

Publishing on RapidAPI Hub

Wrap Up

Building and selling an API with Next.js, Vercel, and RapidAPI is a straightforward process that can provide a significant opportunity for developers to monetize their skills and expertise.

By leveraging these powerful tools and platforms, developers can quickly build and deploy high-quality APIs that can help solve real-world problems for businesses and individuals alike.