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.

---

Further reading

• web.dev: Optimize LCP
• Zenndra: Medium portfolio widget for any site