create-next-mdx-blog-app 2.1.6 → 2.1.8

package/README.md

@@ -61,7 +61,7 @@ npx create-next-mdx-blog-app .
 ### Package Information
 
 - **Package Name**: `create-next-mdx-blog-app`
-- **Version**: `2.1.5`
+- **Version**: `2.1.8`
 - **License**: MIT
 - **Homepage**: [https://www.npmjs.com/package/create-next-mdx-blog-app](https://www.npmjs.com/package/create-next-mdx-blog-app/)
 
@@ -216,6 +216,35 @@ The project includes an interactive AI-powered chatbot optimised for readers of
 ### API Route
 `src/app/api/chat/route.ts` — Next.js edge route. Accepts the `UIMessages` array, converts it to `CoreMessages` via `convertToModelMessages`, streams a response using `streamText` with the three blog tools, and returns `result.toTextStreamResponse()`.
 
+## 📬 Newsletter Subscription
+The project ships with an integrated **newsletter signup form** powered by [Resend](https://resend.com). Visitors can subscribe from the home page or from the bottom of any article; new subscribers are added to a Resend **Audience** and immediately receive a welcome email.
+
+### Components & Routes
+- `src/components/NewsletterSignup.tsx` — reusable client component with `matrix` (article pages, glass-card + green) and `neutral` (home page, white/black/silver shadcn) visual variants.
+- `src/app/api/newsletter/subscribe/route.ts` — Node-runtime POST handler; validates the email with Zod and forwards it to the Resend SDK.
+- `src/utils/functions/newsletter/subscribeToNewsletter.ts` — server-side helper that adds the contact to your Resend Audience and triggers the welcome email.
+- `src/utils/functions/newsletter/welcomeEmailTemplate.ts` — builds the subject + HTML/text bodies for the confirmation email.
+- `src/utils/functions/resend_client/ResendClient.ts` — server-only Resend client factory.
+
+### Setup Steps
+1. Create a Resend account at [resend.com](https://resend.com).
+2. **API Key** — go to **API Keys → Create API Key** and grant it access to **Sending** and **Audiences**. Copy the key into `RESEND_API_KEY` in `.env.local`.
+3. **Audience** — go to **Audiences → Create Audience**, give it a name, and copy the generated UUID into `RESEND_AUDIENCE_ID` in `.env.local`.
+4. Restart `npm run dev` after editing `.env.local` so Next.js picks up the new variables.
+
+### Environment Variables
+| Variable | Required for |
+|---|---|
+| `RESEND_API_KEY` | Authenticating with the Resend API |
+| `RESEND_AUDIENCE_ID` | The Resend Audience that new subscribers are added to |
+
+### ⚠️ ***Important: A verified sending domain on Resend is required for the email-sending feature to fully work.***
+Out of the box the welcome email is sent from **`onboarding@resend.dev`**, which is Resend's sandbox sender. **`onboarding@resend.dev` is only allowed to deliver to the email address that owns your Resend account** — sending to any other recipient will be rejected by Resend.
+
+> 🚨 ***You MUST set up and verify your own sending domain on Resend (Resend dashboard → Domains → Add Domain, then complete the SPF / DKIM DNS records) before the newsletter can deliver welcome emails to real subscribers.*** Once your domain is verified, update the `WELCOME_EMAIL_FROM` constant in `src/utils/functions/newsletter/subscribeToNewsletter.ts` to an address on that domain (for example `newsletter@yourdomain.com`).
+
+If the domain step is skipped, the contact will still be added to your Resend Audience, but the welcome email will silently fail (the failure is logged to the server console as `[newsletter] Resend emails.send returned an error: ...`).
+
 ## 🧩 Constants, Functions, & Types
 In this project, you will find custom constants, functions, and types in the `/src/utils/` directory. Certain constants serve as placeholders in this demo application.
 
@@ -241,6 +270,8 @@ cp .env.example .env.local
 | `GITHUB_TOKEN` | GitHub API authentication for `<GitHubGist>` — optional but raises rate limit from 60 to 5,000 req/hr |
 | `GITHUB_USERNAME` | Your GitHub username, used to construct the mdxgists.net URL (defaults to `CodingAbdullah`) |
 | `GIST_BASE_URL` | Base URL for mdxgists.net links (defaults to `https://mdxgists.net`) |
+| `RESEND_API_KEY` | Newsletter signup — authenticates with the Resend API (see the **Newsletter Subscription** section below) |
+| `RESEND_AUDIENCE_ID` | Newsletter signup — the Resend Audience that new subscribers are added to |
 
 ```
 # .env.local
@@ -250,6 +281,8 @@ ANTHROPIC_API_KEY=
 GITHUB_TOKEN=
 GITHUB_USERNAME=
 GIST_BASE_URL=
+RESEND_API_KEY=
+RESEND_AUDIENCE_ID=
 ```
 
 ## 🌩️ AWS
@@ -267,7 +300,7 @@ docker build -t mdx-medium-blog .
 ``
 
 ``
-docker run -e SUPABASE_URL=your_supabase_url \ -e SUPABASE_ANON_KEY=your_supabase_anon_key \ -e ANTHROPIC_API_KEY=your_anthropic_api_key \ -e GITHUB_TOKEN=your_github_token \ -e GITHUB_USERNAME=your_github_username \ -e GIST_BASE_URL=https://mdxgists.net \ -p 3000:3000 mdx-medium-blog
+docker run -e SUPABASE_URL=your_supabase_url \ -e SUPABASE_ANON_KEY=your_supabase_anon_key \ -e ANTHROPIC_API_KEY=your_anthropic_api_key \ -e GITHUB_TOKEN=your_github_token \ -e GITHUB_USERNAME=your_github_username \ -e GIST_BASE_URL=https://mdxgists.net \ -e RESEND_API_KEY=your_resend_api_key \ -e RESEND_AUDIENCE_ID=your_resend_audience_id \ -p 3000:3000 mdx-medium-blog
 ``
 
 ## 🔄 CRUD Operations and Supabase Actions

package/bin/create.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 const path = require('path');
 const fs = require('fs');
 const degit = require('degit');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-mdx-blog-app",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "description": "A production-ready technical blog starter kit built with Next.js, MDX, Supabase, and TypeScript.",
   "author": {
     "name": "Abdullah Muhammad",
@@ -40,46 +40,47 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@inquirer/prompts": "^8.3.2",
+    "degit": "^2.8.4",
+    "execa": "^9.6.1"
+  },
+  "devDependencies": {
     "@ai-sdk/anthropic": "^3.0.64",
     "@ai-sdk/react": "^3.0.143",
     "@codesandbox/sandpack-react": "^2.20.0",
+    "@eslint/eslintrc": "^3",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
     "@next/mdx": "^16.2.1",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-slot": "^1.2.4",
     "@supabase/supabase-js": "^2.101.0",
+    "@tailwindcss/postcss": "^4",
     "@types/mdx": "^2.0.13",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vercel/analytics": "^2.0.1",
     "ai": "^6.0.141",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "degit": "^2.8.4",
-    "execa": "^9.6.1",
+    "eslint": "^10",
+    "eslint-config-next": "16.2.1",
     "gray-matter": "^4.0.3",
-    "@inquirer/prompts": "^8.3.2",
     "lucide-react": "^1.7.0",
     "next": "^16.2.1",
     "next-mdx-remote": "^6.0.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-syntax-highlighter": "^16.1.1",
+    "resend": "^6.12.2",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "tsx": "^4.21.0",
-    "zod": "^4.3.6"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^25.5.0",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^10",
-    "eslint-config-next": "16.2.1",
     "tailwindcss": "^4",
+    "tsx": "^4.21.0",
     "tw-animate-css": "^1.4.0",
-    "typescript": "6.0.2"
+    "typescript": "6.0.2",
+    "zod": "^4.3.6"
   }
 }