Watch a live product demo 👀 See how Sanity powers richer commerce experiences

Instagram Feed Widget - How to Implement in Next.js With Sanity

9 replies
Last updated: Oct 28, 2021
hi, im using nextjs with sanity, my client wants to implement this widget. How can we achieve this?
Oct 28, 2021, 10:04 AM
What does the widget do? Is it something you need to put in a specific place on your website?
Oct 28, 2021, 10:12 AM
If not, I’d just put it directly into your code in Next. Not sure on how you’ve got things set up, but I’d put this in something like the
Layout.js
component or similar.
Oct 28, 2021, 10:12 AM
This will show instagram feed. I was thinking put it directly in code, but since my pages are rendered like so page [...slug] im getting error. I only want to render this on the homepage, but its modular rendered. So I guess need to make a component inside studio then rendered it in module on frontend
Oct 28, 2021, 10:19 AM
But do not have any solution yet..
Oct 28, 2021, 10:19 AM
In that case yeah I would just create a component inside studio called
InstagramFeed
or something, and anywhere that component is called you just render out your widget code above
Oct 28, 2021, 10:20 AM
You might want to limit it in studio so it can only be used once on the page
Oct 28, 2021, 10:20 AM
Yes, you right! I'm was fully concentrated on Sanity. But for this case its fairly easy to do it this way! thanks man
Oct 28, 2021, 10:26 AM
Happy to help 🙂
Oct 28, 2021, 10:27 AM
Tip: Use Next.js Script tag for better performance: https://nextjs.org/docs/basic-features/script
Oct 28, 2021, 11:19 AM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing