Add a Live Medium Writing Widget to Any Homepage

Visitors decide in seconds if you ship ideas. A stale “Blog” link hurts credibility; three real essay titles with dates does the opposite.

This builds a writing widget—not a full embed—ideal for homepages and landing pages.

Tool outcome: A cached API route /api/writing + a 3-card UI you can drop into any stack.

Widget vs full embed

Pattern	Where	Goal
Widget	Homepage	Tease; link to Medium or on-site posts
Full embed	`/writing/[slug]`	Keep readers on your domain

For full posts see embed Medium articles.

Server route (Next.js App Router example)

// app/api/writing/route.js
export const revalidate = 1800; // 30 min

const API = 'https://api.zenndra.com';

export async function GET() {
 const headers = { Authorization: `Bearer ${process.env.ZENNDRA_API_KEY}` };
 const handle = process.env.MEDIUM_USERNAME;

 const idRes = await fetch(`${API}/user/id_for/${handle}`, { headers, next: { revalidate: 86400 } });
 const { user_id } = await idRes.json();

 const listRes = await fetch(`${API}/user/${user_id}/articles`, { headers, next: { revalidate: 1800 } });
 const { articles } = await listRes.json();

 const latest = (articles ?? []).slice(0, 3).map((a) => ({
 id: a.id,
 title: a.title,
 url: a.url,
 published_at: a.published_at,
 preview: a.preview ?? '',
 }));

 return Response.json(latest);
}

Never call third-party APIs from the browser with your secret key—always proxy server-side.

React cards

export function WritingWidget({ posts }) {
 return (
 <section aria-labelledby="writing-heading">
 <h2 id="writing-heading">Writing</h2>
 <ul className="writing-grid">
 {posts.map((p) => (
 <li key={p.id}>
 <time dateTime={p.published_at}>
 {new Date(p.published_at).toLocaleDateString()}
 </time>
 <a href={p.url}>{p.title}</a>
 {p.preview && <p>{p.preview}</p>}
 </li>
 ))}
 </ul>
 <a href="/writing">View all →</a>
 </section>
 );
}

Performance tips

Fetch at build or edge with TTL—do not block LCP.
Use consistent card height; real dates beat “Updated 2022.”
Optional: pull hero image from article metadata when you want a magazine layout.

Keywords

medium portfolio widget, show medium posts on website, medium latest articles api, developer homepage writing section.

URL: https://dev.to/zenndraapi/add-a-live-medium-writing-widget-to-any-homepage-49oh

⇱ Add a Live Medium Writing Widget to Any Homepage - DEV Community