feat: renovated with-attachments example (#193)

Author: gabrielmfern

with-attachments/.env.example

@@ -0,0 +1 @@
+RESEND_API_KEY=re_xxxxxxxxxxxx

with-attachments/.eslintrc.js

@@ -0,0 +1,28 @@
+# next.js
+.env*
+.next
+next-env.d.ts
+/.next/
+/out/
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# env files (can opt-in for committing if needed)
+.env*
+!.env.example
+
+# misc
+.DS_Store
+*.pem
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

with-attachments/.gitignore

@@ -0,0 +1,20 @@
+import { resend } from '../../../lib/resend';
+
+export async function POST() {
+  const response = await resend.emails.send({
+    from: 'Acme <[email protected]>',
+    to: ['[email protected]'],
+    subject: 'Receipt for your payment',
+    html: '<p>Thanks for the payment</p>',
+    attachments: [
+      {
+        path: 'https://resend.com/static/sample/invoice.pdf',
+        filename: 'sample-invoice.pdf',
+      },
+    ],
+  });
+
+  return Response.json(response, {
+    status: response.error ? 500 : 200,
+  });
+}

with-attachments/.prettierignore

@@ -0,0 +1,3 @@
+import { Resend } from 'resend';
+
+export const resend = new Resend(process.env.RESEND_API_KEY);

with-attachments/.prettierrc.js

@@ -6,24 +6,18 @@
   "scripts": {
     "build": "next build",
     "dev": "next dev",
-    "start": "next start",
-    "lint": "eslint --fix --ext .ts ./src",
-    "format": "prettier --write ."
+    "start": "next start"
   },
   "dependencies": {
-    "next": "14.2.30",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "resend": "latest"
+    "next": "16.0.3",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "resend": "6.5.2"
   },
   "devDependencies": {
-    "@types/node": "20.11.20",
-    "@types/react": "18.3.27",
-    "@types/react-dom": "18.3.7",
-    "@typescript-eslint/eslint-plugin": "7.1.0",
-    "eslint": "8.56.0",
-    "eslint-config-next": "14.1.1",
-    "prettier": "3.2.5",
-    "typescript": "5.3.3"
+    "@types/node": "24.10.1",
+    "@types/react": "19.2.6",
+    "@types/react-dom": "19.2.3",
+    "typescript": "5.9.3"
   }
 }

with-attachments/app/api/send/route.ts

@@ -7,7 +7,7 @@ This example show how to send Resend emails with attachments.
 ### 1. Install the dependencies
 
 ```bash
-yarn dev
+yarn install
 ```
 
 ### 2. Create a `.env` file at the root and add your Resend API
@@ -22,28 +22,26 @@ RESEND_API_KEY=re_8m9gwsVG_6n94KaJkJ42Yj6qSeVvLq9xF
 yarn dev
 ```
 
-### 4. Update the `from` and `to` in the `send.ts`
+### 4. Update the `from` and `to` in the `app/api/send/route.ts`
 
-You can update the `from` and `to` here so send from your own domain and to your email address. The `to` must be a verified `domain` in your account.
+You can update the `from` and `to` here so sending is done from your own domain and to your email address. The `to` must be a verified domain in your account.
 
 ```tsx
 const data = await resend.emails.send({
-  from: '[email protected]',
-  to: '[email protected]',
-  subject: 'Receipt for Your Payment',
+  from: 'Acme <[email protected]>',
+  to: ['[email protected]'],
+  subject: 'Receipt for your payment',
+  html: '<p>Thanks for the payment</p>',
   attachments: [
     {
-      content: invoiceBuffer,
-      path: 'path/to/file/invoice.pdf',
-      filename: 'invoice.pdf',
+      path: 'https://acme.com/static/sample/invoice.pdf',
+      filename: 'sample-invoice.pdf',
     },
   ],
-  html: '<h1>Thanks for the payment</h1>',
-  text: 'Thanks for the payment',
 });
 ```
 
-### 4. Send a POST request to `/api/send`
+### 5. Send a POST request to `/api/send`
 
 ```bash
 curl --location --request POST 'http://localhost:3000/api/send'