resend / resend-nextjs-app-router-example Goto Github PK

View Code? Open in Web Editor NEW

98.0 98.0 23.0 38 KB

This example shows how to use Resend with Next.js (App Router)

Home Page: https://resend.com/docs/send-with-nextjs

License: MIT License

TypeScript 88.39% JavaScript 11.61%

resend-nextjs-app-router-example's People

Contributors

Stargazers

Watchers

resend-nextjs-app-router-example's Issues

How use all styles from tailwind css

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>
);```

sweep: impliment this stuff OR you can make the html templates bitchin

1. Email Retrieval and Parsing

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.

Missing 'as React.ReactElement' on https://resend.com/docs/send-with-nextjs

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!

Dependency Dashboard

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.

Detected dependencies

npm

package.json

Check this box to trigger a request for Renovate to run again on this repository

retrieve a contact by email

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

Resend doesn't work in next js routes

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

The example where in we pass the `EmailTemplate` component to the `react` key, gives an error.

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" />

Sweep: Do this

Email Retrieval and Parsing

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.

Required property 'text' is missing from docs example

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.

Copying example `route.ts` returns 405 error

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",

To test you need to `curl -X POST http://localhost:3000/api/send`

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 error from Next 13 app router

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'.

resend / resend-nextjs-app-router-example Goto Github PK

resend-nextjs-app-router-example's People

Contributors

Stargazers

Watchers

Forkers

resend-nextjs-app-router-example's Issues

Detected dependencies

Recommend Projects

Recommend Topics

Recommend Org

Jobs