Interactive Playgrounds & Subscriptions

To transform your portfolio from a static showcase into an authority site, we’ll add an Interactive Code Playground using Sandpack and a Newsletter Subscription using Mailchimp via Server Actions.

1. Interactive Playgrounds (Sandpack)

Instead of just showing code blocks, let your readers edit and run them live inside your MDX.

Installation:

npm install @codesandbox/sandpack-react

Step A: The Playground Component (CodePlayground.tsx)

This Client Component provides a live VS Code-like experience.

"use client";
import { Sandpack } from "@codesandbox/sandpack-react";
 
export default function CodePlayground({ code }: { code: string }) {
  return (
    <div className="my-8">
      <Sandpack 
        template="react" 
        theme="dark"
        files={{ "/App.js": code }}
        options={{ showNavigator: true, showTabs: true }}
      />
    </div>
  );
}

Step B: Using in MDX Now, pass this component to your MDXRemote components map.

# Live React Example
Check out how this component works in real-time:
 
<CodePlayground code={`
export default function App() {
  return <h1>Hello from the MDX Playground!</h1>
}
`} />

2. Newsletter Subscription (Mailchimp)

Capture leads and keep your audience engaged by adding a subscription box at the bottom of your blog posts.

Step A: The Server Action (subscribe.ts) Securely send emails to Mailchimp using their API.

// src/app/blog/subscribe.ts
"use server";
 
export async function subscribe(formData: FormData) {
  const email = formData.get('email');
  const API_KEY = process.env.MAILCHIMP_API_KEY;
  const LIST_ID = process.env.MAILCHIMP_LIST_ID;
 
  // Fetch logic for Mailchimp API...
  console.log(`Subscribing ${email} to list ${LIST_ID}`);
  
  return { success: true };
}

Step B: The UI Component (Newsletter.tsx) A simple, theme-aware form using our SCSS Mixins.

export default function Newsletter() {
  return (
    <section className={styles.newsletter}>
      <h3>Join the Newsletter</h3>
      <form action={subscribe}>
        <input type="email" name="email" placeholder="you@example.com" required />
        <button type="submit">Join</button>
      </form>
    </section>
  );
}

3. Analytics & Growth

Once your site is interactive, monitor which playgrounds are being used and which blog posts drive the most subscriptions.

• Vercel Speed Insights: Monitor Real User Monitoring (RUM) to see how interactive elements affect performance.
• A/B Testing: Use Vercel Edge Config to test different CTA copies for your newsletter.

Summary of your Next.js Stack:

• Rendering: App Router (SSR/ISR)
• Styling: SCSS Modules + CSS Variables
• Content: MDX + Sandpack Playgrounds
• Backend: Server Actions (No API routes needed)
• Deployment: Vercel + Edge Functions