I was curious about integrating rapidapi with Nextjs. And Success with trying beer api in rapidapi with next js. First of all install next js app with this command.

npx create-next-app beers

after nextjs installation finish install axios package with this command

npm install axios

and create folder utils and inside create fetchApi.js file to for us to fetch data from rapid API. And add following code to fetchApi.js

import axios from "axios"
export const baseUrl = "https://beer-live.p.rapidapi.com"

export const fetchApi = async (url) => {
  const { data } = await axios.get(url, {
    headers: {
      "x-rapidapi-host": "beer-live.p.rapidapi.com",
      "x-rapidapi-key": "YOUR_RAPID_API_KEY",
    },
  })
  return data
}

You can add your rapid api key from here

After adding fetch api you can now start to call. First we will create a components folder inside root of nextjs app. And we will create a Beers.jsx file inside the components folder. And will add this code

const Beer = ({ beer: { title, ort } }) => {
  return (
    <>
      <tbody>
        <tr>
          <td>{title}</td>
          <td>{ort}</td>
        </tr>
      </tbody>
    </>
  )
}

export default Beer

now we can call our api from pages/index.js like this

import { baseUrl, fetchApi } from "../utils/fetchApi"
import Beer from "../components/Beer"
export default function Home({ beersHessen }) {
  return (
    <>
      <div>
        <h1>Home</h1>
        <table>
          <thead>
            <tr>
              <th>Name of Beer</th>
              <th>City</th>
            </tr>
          </thead>
          {beersHessen.map((beer) => (
            <Beer beer={beer} key={beer.id} />
          ))}
        </table>
      </div>
    </>
  )
}

export async function getStaticProps() {
  const beersHessen = await fetchApi(`${baseUrl}/brews/hessen`)

  return {
    props: {
      beersHessen,
    },
  }
}

We have fetched data from rapidapi. Beers from hessen state I choose. According to beers api documentation.

Here is a github repo with beers top example too. Feel free to use as you wish. And Please do not forget to give a star on github repo.