@saketsawrav/instagram-feed

@saketsawrav/instagram-feed

Drop-in Instagram feed for Next.js apps. Fetches recent posts and proxies images server-side — no third-party widgets, no client-side scraping, no API keys required.

Features

• Fetches posts via Instagram's public web profile API
• Post captions included out of the box
• Server-side image proxy (avoids Instagram's cross-origin blocking)
• In-memory caching with configurable TTL (default: 1 hour)
• Ready-made Next.js route handler factories
• Framework-agnostic core — use the fetcher anywhere Node.js runs
• Zero runtime dependencies

Install

npm install @saketsawrav/instagram-feed

Quick Start (Next.js)

1. Create the feed API route

// app/api/instagram/route.ts
import { createFeedHandler } from '@saketsawrav/instagram-feed/nextjs';

export const GET = createFeedHandler({ username: 'your_username' });

2. Create the image proxy route

// app/api/instagram/image/route.ts
import { createImageProxyHandler } from '@saketsawrav/instagram-feed/nextjs';

export const GET = createImageProxyHandler({ username: 'your_username' });

3. Fetch posts from your component

'use client';

import { useEffect, useState } from 'react';
import type { InstagramPost } from '@saketsawrav/instagram-feed';

export default function InstagramGrid() {
  const [posts, setPosts] = useState<InstagramPost[]>([]);

  useEffect(() => {
    fetch('/api/instagram')
      .then((res) => res.json())
      .then(setPosts)
      .catch(() => {});
  }, []);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
      {posts.map((post) => (
        <a
          key={post.shortcode}
          href={`https://www.instagram.com/p/${post.shortcode}/`}
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            src={`/api/instagram/image?shortcode=${post.shortcode}`}
            alt=""
            style={{ width: '100%', aspectRatio: '1', objectFit: 'cover' }}
            loading="lazy"
          />
        </a>
      ))}
    </div>
  );
}

Configuration

Both createFeedHandler and createImageProxyHandler accept the same options:

Option	Type	Default	Description
username	string	required	Instagram username to fetch
count	number	9	Number of posts to return
cacheTtlMs	number	3600000 (1h)	In-memory cache TTL in ms
igAppId	string	built-in	Instagram app ID for API calls

Framework-Agnostic Usage

The core fetcher works in any Node.js environment:

import { fetchInstagramPosts } from '@saketsawrav/instagram-feed';

const posts = await fetchInstagramPosts({ username: 'your_username', count: 6 });
console.log(posts);
// [{ shortcode: 'abc123', thumbnailUrl: 'https://...', caption: 'Post caption text...' }, ...]

Available exports from @saketsawrav/instagram-feed

Export	Description
fetchInstagramPosts()	Fetch posts for a username (returns InstagramPost[])
getInstagramImageUrl()	Get the full-res image URL for a shortcode
proxyInstagramImage()	Fetch and stream an image from Instagram CDN
InstagramPost	Type: { shortcode: string; thumbnailUrl: string; caption: string | null }
InstagramFeedOptions	Type: configuration options

Available exports from @saketsawrav/instagram-feed/nextjs

Export	Description
createFeedHandler()	Returns a Next.js GET handler for the feed
createImageProxyHandler()	Returns a Next.js GET handler for image proxy

Why server-side?

Instagram blocks cross-origin image requests from browsers. This package solves that by:

1. Fetching post metadata server-side (no browser CORS issues)
2. Proxying images through your own API route (your domain serves the images)
3. Caching both metadata and image URLs in memory (one Instagram API call per TTL window)

License

MIT