feat: Add Resend with Next.js (App Router) example

.env.example

@@ -0,0 +1,3 @@
+RESEND_API_KEY=""
+EMAIL_FROM=""
+EMAIL_TO=""

.gitignore

@@ -0,0 +1,3 @@
+.env
+.next
+node_modules

README.md

@@ -0,0 +1,27 @@
+# Resend with Next.js (App Router)
+
+This example shows how to use Resend with [Next.js](https://nextjs.org).
+
+## Instructions
+
+1. Define environment variables in `.env` file.
+
+2. Install dependencies:
+
+  ```sh
+npm install
+# or
+yarn
+  ```
+
+3. Run Next.js locally:
+
+  ```sh
+npm run dev
+  ```
+
+4. Open URL in the browser:
+
+  ```
+http://localhost:3000
+  ```

app/api/send/route.ts

@@ -0,0 +1,22 @@
+import { NextResponse } from 'next/server';
+import EmailTemplate from '../../../components/EmailTemplate';
+import { Resend } from 'resend';
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+export async function GET() {
+  try {
+    const data = await resend.sendEmail({
+      from: process.env.EMAIL_FROM || '',
+      to: process.env.EMAIL_TO || '',
+      subject: "hello world",
+      react: EmailTemplate({ firstName: "John", product: "Resend" }),
+    });
+
+    return NextResponse.json(data);
+  }
+  catch (error) {
+    console.error(error);
+    return NextResponse.json({ error });
+  }
+}

components/EmailTemplate.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default function EmailTemplate(props) {
+  const { firstName, product } = props
+
+  return (
+    <div>
+      <h1>Welcome, {firstName}!</h1>
+      <p>Thanks for trying {product}. We’re thrilled to have you on board.</p>
+    </div>
+  )
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,7 @@
+function throwError(envVar) {
+  throw `Abort: You need to define ${envVar} in the .env file.`
+}
+
+if (!process.env.RESEND_API_KEY) return throwError('RESEND_API_KEY');
+if (!process.env.EMAIL_FROM) return throwError('EMAIL_FROM');
+if (!process.env.EMAIL_TO) return throwError('EMAIL_TO');

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "resend-nextjs-app-router-example",
+  "private": true,
+  "scripts": {
+    "dev": "next dev"
+  },
+  "dependencies": {
+    "next": "^13.4.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "resend": "^0.14.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.2.1",
+    "@types/react": "18.2.6",
+    "typescript": "5.0.4"
+  }
+}

tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}