Fetching Instagram Followers Count with NextJs

Social media has become an indispensable part of our daily lives, and Instagram is one of the leading platforms in this digital landscape. Whether you're a brand, influencer, or simply someone who wants to keep track of their online presence, knowing your Instagram followers count is crucial. In this blog post, I'll show how to fetch the Instagram followers count using Next.js (I'll be using Next.Js 13), a powerful and versatile JavaScript framework for building modern web applications.

How to fetch Instagram followers count using NextJs (Unofficial API)

To fetch the Instagram followers count using Next.js, you can use the following steps:

1. Create a new Next.js project if you haven't already:

npx create-next-app my-next-app
cd my-next-app

Replace my-next-app with your preferred project name.

2. Install the necessary packages for making HTTP requests. We'll use axios for this example:

npm install axios

3. Create a file called utils.js inside the lib folder (create the folder if it doesn't exist) to store the function that will fetch the Instagram followers count:

import axios from 'axios';

export async function getInstagramFollowersCount(username) {
  try {
    const response = await axios.get(`https://www.instagram.com/${username}/?__a=1`);
    const followersCount = response.data.graphql.user.edge_followed_by.count;
    return followersCount;
  } catch (error) {
    console.error('Error fetching Instagram followers count:', error);
    return null;
  }
}

you can also use https://www.instagram.com/${username}/?__a=1&__d=1 if any error occurs.

4. Now, you can use this function in any of your Next.js pages. For example, in pages/index.js, you can call this function during server-side rendering using getServerSideProps:

import { getInstagramFollowersCount } from '../lib/utils';

export async function getServerSideProps() {
  const followersCount = await getInstagramFollowersCount('your_username_here');
  return {
    props: {
      followersCount
    }
  };
}

export default function Home({ followersCount }) {
  return (
    <div>
      <h1>Instagram Followers Count</h1>
      <p>Followers: {followersCount}</p>
    </div>
  );
}

Replace your_username_here with the Instagram username you want to fetch the followers count for.

5. Start your Next.js development server:

npm run dev

Now, when you visit http://localhost:3000, you'll see the fetched Instagram followers count.

How to fetch Instagram followers count using NextJs (Instagram Graph API)

To fetch the Instagram followers count using the official Instagram Graph API, you'll need to follow these steps:

1. Create a Facebook App: Go to the Facebook Developer portal and create a new app.
2. Set up Instagram Basic Display API: In your Facebook App, go to "Products" on the left sidebar, and click "Set Up" on the Instagram Basic Display tile. Follow the instructions to set up your app.
3. Generate an Instagram User Access Token: Follow the official guide to generate a User Access Token.
4. Convert the short-lived token to a long-lived token: Exchange the short-lived token for a long-lived token using the following request:

GET /oauth/access_token
  ?grant_type=ig_exchange_token
  &client_secret={app-secret}
  &access_token={short-lived-access-token}

Replace {app-secret} with your Facebook App secret, and {short-lived-access-token} with the short-lived access token you generated in step 3. For more information, check the official documentation. 5. Fetch the Instagram followers count using the long-lived access token: Create a new function in your Next.js project, such as in lib/utils.ts:

import axios from 'axios';

export async function getInstagramFollowersCount(accessToken) {
  try {
    const response = await axios.get(`https://graph.instagram.com/me?fields=followers_count&access_token=${accessToken}`);
    const followersCount = response.data.followers_count;
    return followersCount;
  } catch (error) {
    console.error('Error fetching Instagram followers count:', error);
    return null;
  }
}

6. Use the function in your Next.js pages. For example, in pages/index.tsx, you can call this function during server-side rendering using getServerSideProps:

import { getInstagramFollowersCount } from '../lib/utils';

export async function getServerSideProps() {
  const accessToken = 'your_long_lived_access_token_here';
  const followersCount = await getInstagramFollowersCount(accessToken);
  return {
    props: {
      followersCount
    }
  };
}

export default function Home({ followersCount }) {
  return (
    <div>
      <h1>Instagram Followers Count</h1>
      <p>Followers: {followersCount}</p>
    </div>
  );
}

Replace your_long_lived_access_token_here with your long-lived access token from step 4.

With these steps, you should be able to fetch the Instagram followers count using the official Instagram Graph API.