Instagram integration

Next.js
Instagram API
Gallery
To show of my Instagram posts I decided to implement a gallery on my website. I searched for a bit but I couldn't find a good solution.

The Instagram API

I used the Instagram Basic Display API, but I was a bit confused on how to get the access token required for making the requests.
I found a package called instagram-gallery that gives some simple steps on how to get the access token.

Getting the access token

The package documentation gave these steps:
  • Log in to Facebook Developer
  • Create an app that uses Instagram basic display
  • Add a test user in the roles section
  • Accept the tester invitation on Instagram (Settings > Apps and Websites > Tester Invites)
  • Go back to the Facebook Developer portal and you should be able to generate a token for the account

Enviromental variables

To keep the access token and my user id hidden I used enviromental variables.
The .env file in the source code is there to show the structure of the file. To store my secrets localy I used the file .env.local which is ignored by git by default.
Because I use Vercel to host my website I had to add the enviromental variables to the Vercel dashboard.

Fetching and displaying the posts

Displaying the posts was pretty simple. Because Next.js supports server side rendering I could just use a Server Component which has access to the enviromental variables.
To fetch the posts I used the Media endpoint.
To avoid sending too many requests I used a revalidate value of 30 minutes.

Source code

You can find the commit with the implementation on GitHub

The final product

Check it out the final product here: Gallery