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
To keep the access token and my user id hidden I used enviromental variables.
.envfile in the source code is there to show the structure of the file. To store my secrets localy I used the file
.env.localwhich 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
revalidatevalue of 30 minutes.
You can find the commit with the implementation on GitHub
The final product
Check it out the final product here: Gallery