How to create a Jokes App using Humor Jokes and Memes API and Next.Js

We all love a good laugh, and there’s nothing like a hilarious joke to brighten up your day. But what if you could have a never-ending supply of jokes at your fingertips, always on hand to make you laugh? Well, now you can, with the help of the Humor-Jokes-and-Memes API and Next.Js. In this article, we’ll show you how to create a jokes app using these two tools, so you can always have a smile on your face.

Getting the API Keys

To get started with the Humor Jokes and Memes API, you’ll need to sign up for a free RapidAPI account and generate an API key. To do this, follow the steps below:

Step 1: Go to the RapidAPI website and search for Humor Jokes and Memes or directly go to this link.

Step 2: Click on the “Sign up” button on the top right corner and create an account on RapidAPI.

Step 3: Click “Subscribe to Test” and choose a free plan to test the API.

Step 4: Now if you scroll down you can see the X-RapidAPI-Key in the header parameters. We’ll use this API key to make the API calls.

Please note that the free plan is limited to 10 API calls per day.

Setting up the API

The API is now ready to use. Let’s take a look at some of the requests and parameters it supports.

Requests:

On the left side, you can see the different options for post and get requests that this API supports. For this example, we will use the random-joke and random-meme requests, but you can use any request you want - the process is almost the same.

Parameters:

There are many optional parameters that this API supports. Some of them are:

• exclude-tags: This is the comma separated list of tags that the jokes must not have.
• min-rating: The minimum rating between 0 and 10 the result should have.
• keywords: A comma separated list of keywords.
• include-tags: A comma separated list of tags that the joke must have.
• number: The number of results to retrieve between 1 and 10.

After choosing the optional parameters you can copy the code to fetch the jokes and memes from the API. To do this, go to the code snippet in the right and choose your preferred language from the dropdown. For this example, we are going to use (JavaScript) fetch but you can choose any language. After choosing the language, copy the code snippet. We are going to use that later in our app.

We will only be using ‘random-joke’ and ‘random-meme’ in this example, so we will need to copy the code snippet for both of them separately.

Code snippet for ‘random-joke’ in JavaScript fetch:

const options = {
  method: 'GET',
  headers: {
    'X-RapidAPI-Key': 'YOUR_API_KEY',
    'X-RapidAPI-Host': 'humor-jokes-and-memes.p.rapidapi.com'
  }
};

fetch('https://humor-jokes-and-memes.p.rapidapi.com/jokes/random?max-length=200&include-tags=one_liner&min-rating=7&exclude-tags=nsfw&keywords=rocket', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

Code snippet for ‘random-meme’ in JavaScript fetch:

const options = {
  method: 'GET',
  headers: {
    'X-RapidAPI-Key': 'YOUR_API_KEY',
    'X-RapidAPI-Host': 'humor-jokes-and-memes.p.rapidapi.com'
  }
};

fetch('https://humor-jokes-and-memes.p.rapidapi.com/memes/random?keywords=rocket&number=3&media-type=image&keywords-in-image=false&min-rating=4', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

Creating a Next.js App

Before you can create a Next.js app, you’ll need to have Node.js and npm installed on your computer. Node.js is a JavaScript runtime that lets you run JavaScript code on your computer. npm is a package manager for Node.js that lets you install Node.js packages.

After installing Node.js and npm, you can create a new Next.js app with the following command:

npx create-next-app jokes-app

This will create a new directory called jokes-app that contains the files needed to run your Next.js app. Navigate to the jokes-app directory using the below command:

cd jokes-app

To start the development server, run the following command:

npm run dev

This will start a development server that you can access at http://localhost:3000.

Creating the UI

The first step is to create the user interface for the app. This will include a heading, two buttons (one to generate a joke, the other to generate a meme), and an output box to display the results.

To create the UI, add the following code to your index.js file:

import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function JokeApp() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Jokes App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to Jokes App
        </h1>

        <p className={styles.description}>
          Find the funniest jokes and memes
        </p>

        <div class={styles.actionBtn}>
          <button className={styles.jokeBtn}> Generate Joke </button>
          <button className={styles.memeBtn}> Generate Meme </button>
        </div>
        <div className={styles.grid}>
            <span className={styles.card}>
            </span>
        </div>
      </main>
    </div>
  )
}

After that, add the below code to the ‘styles/Home.module.css’ file:

.container {
  padding: 0 2rem;
}

.actionBtn{
  width: auto;
}

.memeBtn{
  width: 150px;
  height: 30px;
  margin-left: 20px;
  border: 0ch;
  background-color: rgb(22, 22, 22);
  color: white;
  border-radius: 4px;
}

.memeBtn:hover{
  background-color: rgb(0, 0, 173);
  color: white;
}

.jokeBtn{
  width: 150px;
  height: 30px;
  margin-left: 20px;
  border: 0ch;
  background-color: rgb(22, 22, 22);
  color: white;
  border-radius: 4px;
}

.jokeBtn:hover{
  background-color: rgb(0, 0, 173);
  color: white;
}

.main {
  min-height: 100vh;
  padding: 4rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title a {
  color: #0070f3;
  text-decoration: none;
}

.title a:hover,
.title a:focus,
.title a:active {
  text-decoration: underline;
}

.title {
  margin: 0;
  line-height: 1.15;
  font-size: 4rem;
}

.title,
.description {
  text-align: center;
}

.description {
  margin: 2rem 0;
  line-height: 1.5;
  font-size: 1.5rem;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 800px;
}

.card {
  margin: 2rem;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
  width: 650px;
  height: 320px;
}

.card:hover,
.card:focus,
.card:active {
  color: #0070f3;
  border-color: #0070f3;
}

.card h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.card p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}

Adding Jokes and Memes feature

We are now going to fetch jokes and memes from the API and display them in our Output box. For that, we are going to create two new functions, ‘generateJoke’ and ‘generateMeme’ and will paste the code snippet that we copied from the RapidAPI in these functions

Update the code of index.js file with the below content:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { useState } from 'react'

export default function JokeApp() {
  const [result, setResult] = useState('Your joke/meme will be shown here...')

  function generateJoke(){
    const options = {
      method: 'GET',
      headers: {
        'X-RapidAPI-Key': 'YOUR_API_KEY',
        'X-RapidAPI-Host': 'humor-jokes-and-memes.p.rapidapi.com'
      }
    };


    fetch('https://humor-jokes-and-memes.p.rapidapi.com/jokes/search?exclude-tags=nsfw&min-rating=7&include-tags=one_liner&number=1&max-length=200', options)
      .then(response => response.json())
      .then(response => setResult(response.jokes[0].joke))
      .catch(err => console.error(err));
  }




  function generateMeme(){
    const options = {
      method: 'GET',
      headers: {
        'X-RapidAPI-Key': 'YOUR_API_KEY',
        'X-RapidAPI-Host': 'humor-jokes-and-memes.p.rapidapi.com'
      }
    };


    fetch('https://humor-jokes-and-memes.p.rapidapi.com/memes/random?keywords=rocket&number=3&media-type=image&keywords-in-image=false&min-rating=4', options)
      .then(response => response.json())
      .then(response => setResult(<Image src={response.url} width="100%" height="100%" layout="responsive"></Image>))
      .catch(err => console.error(err));


  }

  return (
    <div className={styles.container}>
      <Head>
        <title>Jokes App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to Jokes App
        </h1>

        <p className={styles.description}>
          Find the funniest jokes and memes
        </p>

        <div class={styles.actionBtn}>
          <button className={styles.jokeBtn} onClick={generateJoke}> Generate Joke </button>
          <button className={styles.memeBtn} onClick={generateMeme}> Generate Meme </button>
        </div>
        <div className={styles.grid}>
            <span className={styles.card}>
              <p>{result}</p>
            </span>
        </div>
      </main>
    </div>
  )
}

In this article, we have learned how to create a Jokes App using Humor Jokes and Memes API and Next.Js. You can find the complete source code for this article on https://github.com/ddsky/jokes-app-rapid-api-tutorial.