resend / resend-nextjs-app-router-example Goto Github PK
View Code? Open in Web Editor NEWThis example shows how to use Resend with Next.js (App Router)
Home Page: https://resend.com/docs/send-with-nextjs
License: MIT License
This example shows how to use Resend with Next.js (App Router)
Home Page: https://resend.com/docs/send-with-nextjs
License: MIT License
how include the link from style for the components and return or obtain or include
<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
export const RegisterEmail = ({ urlRedirect, userName }) => (
<html>
<head>
<meta charSet="UTF-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://unpkg.com/[email protected]/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div>
<div className={"bg-gray-200"}>
{/* Resto del contenido */}
</div>
</div>
</body>
</html>
);```
1. Email Retrieval and Parsing
nodemailer
or mail-parser
that provides reliable email retrieval and parsing capabilities.[email protected]
mailbox.2. AI Analysis
3. Response and Action Handling
4. User API Key Management
5. Exfreight Communication Automation
Additional Considerations
By carefully considering these aspects and implementing the outlined steps, you can create a highly effective and efficient system for automating Exfreight communications using Resend and AI.
Hello! ๐๐ป
I'm really enjoying your product! I wanted to bring to your attention a small observation regarding the example on https://resend.com/docs/send-with-nextjs. It seems that the type assertion as React.ReactElement
is missing in line 14. I just wanted to let you know that the example repository is accurate, but the snippet in the quick start guide has a TypeScript issue.
Keep up the great work!
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
This repository currently has no open or pending branches.
package.json
Either change/add a endpoint to retrieve a contact by their email
resend.contacts.get({
meail: email,
audienceId: '78261eea-8f8b-4381-83c6-79fa7120f1cf',
});
or
update the response of create a new contact by adding a prop saying if it was new or not
data: { object: 'contact', id: 'd609e3c4-4bcc-4bcc-9ccb-0b074a91442c' , new: true/false},
my workaround is saving the ID in my database, but it would be grate having this feature
Thanks
ReactServerComponentsError:
You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
The error was caused by importing 'resend/build/src/index.js' in './app/api/resend/route.ts'.
Resend doesn't work in next js routes
From the example at Resend Next.js Example, we do:
react: EmailTemplate({ firstName: "John" })
Here, the EmailTemplate
React component is passed as a callable, with the firstName
prop sent as a JS / TS object key-value pair. In VS Code, it gives the below error:
Argument of type '{ from: string; to: string[]; subject: string; react: ReactNode; }' is not assignable to parameter of type 'CreateEmailOptions'.
Type '{ from: string; to: string[]; subject: string; react: ReactNode; }' is not assignable to type 'Required<Pick<CreateEmailBaseOptions, "text">> & Partial<Pick<CreateEmailBaseOptions, "react" | "html">> & { ...; }'.
Property 'text' is missing in type '{ from: string; to: string[]; subject: string; react: ReactNode; }' but required in type 'Required<Pick<CreateEmailBaseOptions, "text">>'.
This error is fixed by passing it as a component instead of the callable, like so:
react: <EmailTemplate firstName="Dev" />
Choose a robust email library: Select a well-established email library like nodemailer or mail-parser that provides reliable email retrieval and parsing capabilities.
Configure email server settings: Ensure you have the correct email server credentials and settings to access the [email protected] mailbox.
Implement email fetching: Create a function to fetch emails from the mailbox, potentially using filters or criteria to target specific emails.
Extract relevant data: Parse the fetched emails to extract key information such as email address, domain, subject line, and body content (HTML or plain text).
2. AI Analysis
Select an AI platform: Choose a reputable AI platform like Google Cloud AI, Amazon Comprehend, or Microsoft Azure AI that offers email analysis and spam detection features.
Train the AI model: Train your AI model on a comprehensive dataset of labeled emails that represent the various categories you want to classify (e.g., quote requests, booking confirmations, shipment updates, spam). The quality and diversity of your training data will significantly impact the model's accuracy.
Implement classification and spam detection: Create functions to classify emails into categories and detect spam using the trained AI model.
3. Response and Action Handling
Define response logic: Establish clear rules and logic for how to respond to different email categories and handle spam. This might involve sending pre-defined responses, dynamically generating responses using AI templates, or filtering spam emails.
Integrate with Resend API: Use the Resend API to send emails programmatically based on the response logic you've defined.
Handle actions: Implement actions associated with specific email categories, such as triggering quote generation, booking shipments using the Exfreight API, or updating shipment status.
4. User API Key Management
Implement user authentication: Set up a secure user authentication system (e.g., username/password, OAuth) to verify user identities.
Generate API keys: When a user successfully authenticates and requests API access, use the Resend API to create an API key with appropriate permissions based on the user's role or requirements.
Store API keys securely: Store the generated API keys in a secure manner, such as a database or key management system, and associate them with the corresponding users.
Enforce access control: Implement access control mechanisms to ensure that users can only perform actions allowed by their API key permissions.
5. Exfreight Communication Automation
Integrate with Exfreight API: Use the Exfreight V2 API to interact with their services programmatically, retrieving shipment updates, booking confirmations, and generating documents.
Set up event triggers: Establish triggers for specific events within your TMS or Exfreight API interactions, such as shipment status changes, booking confirmations, or document generation.
Generate emails: When trigger events occur, use the Resend API to generate and send emails containing relevant information from the Exfreight API responses.
Personalize content: Consider using AI to personalize email content based on recipient and shipment details, making the communication more relevant and engaging.
Additional Considerations
Security: Implement robust security measures to protect user API keys, prevent unauthorized access, and ensure data privacy.
Error handling: Design comprehensive error handling mechanisms to gracefully address potential issues with API calls, AI analysis, or email sending.
Testing and monitoring: Thoroughly test your automated workflows and monitor their performance to identify and resolve any problems.
User interface: If applicable, create a user-friendly interface for managing API keys, configuring automation rules, and monitoring the system's activity.
By carefully considering these aspects and implementing the outlined steps, you can create a highly effective and efficient system for automating Exfreight communications using Resend and AI.
Following the instructions from the Next.js introduction, when I paste in the data
block as it is in the example:
const data = await resend.emails.send({
from: 'Acme <[email protected]>',
to: ['[email protected]'],
subject: 'Hello world',
react: EmailTemplate({ firstName: 'John' }),
});
I get an error that the text
property is missing. Adding it to the list removes the error.
Argument of type '{ from: string; to: string[]; subject: string; react: ReactNode; }' is not assignable to parameter of type 'CreateEmailOptions'.
Type '{ from: string; to: string[]; subject: string; react: ReactNode; }' is not assignable to type 'Required<Pick<EmailRenderOptions, "text">> & Partial<Pick<EmailRenderOptions, "react" | "html">> & CreateEmailBaseOptions'.
Property 'text' is missing in type '{ from: string; to: string[]; subject: string; react: ReactNode; }' but required in type 'Required<Pick<EmailRenderOptions, "text">>'.ts(2345)
index.d.ts(159, 5): 'text' is declared here.
api/send/route.ts
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST() {
try {
const { data, error } = await resend.emails.send({
from: "Acme <[email protected]>",
to: ["[email protected]"],
subject: "Hello world",
text: "Hello world",
});
if (error) {
return Response.json({ error }, { status: 500 });
}
return Response.json({ data });
} catch (error) {
return Response.json({ error }, { status: 500 });
}
}
Returns error:
Failed to load resource: the server responded with a status of 405 ()
"next": "^14.2.4",
"react": "^18",
"resend": "^3.2.0",
The README needs a fix instead of Step 4 being to open in the browser (perform a GET) you need to
curl -X POST http://localhost:3000/api/send
Getting this error when using the app router in next 13
You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
The error was caused by importing 'resend/build/src/index.js' in './app/api/resend/route.js'.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.