# @saketsawrav/instagram-feed

> Drop-in Instagram feed for Next.js — fetches posts and proxies images server-side, no third-party widgets

Latest version **0.2.0** (published 2026-06-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @saketsawrav/instagram-feed
pnpm add @saketsawrav/instagram-feed
yarn add @saketsawrav/instagram-feed
bun add @saketsawrav/instagram-feed
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2026-06-30 |
| First published | 2026-06-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | saketsawrav |
| Keywords | instagram, nextjs, feed, embed, image-proxy |

## Links

- npm: https://www.npmjs.com/package/@saketsawrav/instagram-feed
- Repository: https://github.com/lifesciencetrust/nextjs-instagram-feed
- Homepage: https://github.com/lifesciencetrust/nextjs-instagram-feed#readme
- Issues: https://github.com/lifesciencetrust/nextjs-instagram-feed/issues
- npm.io page: https://npm.io/package/@saketsawrav/instagram-feed

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2026-06-30
- 0.1.0 — 2026-06-30

## README

# @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

```bash
npm install @saketsawrav/instagram-feed
```

## Quick Start (Next.js)

### 1. Create the feed API route

```ts
// 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

```ts
// 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

```tsx
'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:

```ts
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

---
_Source: https://npm.io/package/@saketsawrav/instagram-feed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._