英文:
How to use Env variables on server components and also client components in nextjs
问题
I am using nextjs app Dir. I need to send emails which I am sending with nodemailer, and I am required to use server components since you cannot send with clientside.
I am using typescript in this project and I have some issues using a function that is server side to a client side.
What I done
- I created a function that sends email and accepts parameters with types, the important one being
toEmail
one which should be a string only. I used 'use server', because I had other errors where the solution was to make it a server component.
'use server'
import nodemailer from 'nodemailer';
const transporter = nodemailer.createTransport({
service: 'gmail',
secure: false,
auth: {
user: process.env.EMAIL,
pass: process.env.EMAIL_PASSWORD,
},
});
export const sendEmail = async (toEmail: string, subject: string, html: string) => {
await transporter.sendMail({
from : process.env.EMAIL_ADMIN_QUOTE_RECEIVER,
to: toEmail,
subject: subject,
html: html
});
};
- Secondly, I created the client component that gets the state and finally the one that sends the email. However, Because I want to use env variables, the
toEmail
parameter cannot acceptstring | undefined
, because it should be strictly a string. If I log theprocess.env.EMAIL_ADMIN_QUOTE_RECEIVER
in the console, I get the result in the server console, but in the browser is undefined.... This component is a 'use client' component.
Here is the function:
const handleSendQuote = async (event: FormEvent) => {
event.preventDefault();
const emailHTML = render(<NewQuoteReceived
name={fullName}
dateRequired={dateRequired}
vechNeeded={vechiclesRequired}
serviceReq={service}
phone={phoneNumber}
email={email}
details={details} />)
await sendEmail(process.env.EMAIL_ADMIN_QUOTE_RECEIVER, 'New quote received', emailHTML);
alert('Sent');
clearState();
}
英文:
I am using nextjs app Dir. I need to send emails which I am sending with nodemailer, and I am required to use server components since you cannot send with clientside.
I am using typescript in this project and I have some issues using a function that is server side to a client side.
What I done
- I created a function that sends email and accepts parameters with types, the important one being
toEmail
one which should be a string only.
I used'use server'
, because I had other errors where the solution was to make it a server component.
'use server'
import nodemailer from 'nodemailer';
const transporter = nodemailer.createTransport({
// host: 'smtp.ethereal.email',
// port: 587,
service: 'gmail',
secure: false,
auth: {
user: process.env.EMAIL,
pass: process.env.EMAIL_PASSWORD,
},
});
export const sendEmail = async (toEmail: string, subject: string, html: string) => {
await transporter.sendMail({
from : process.env.EMAIL_ADMIN_QUOTE_RECEIVER,
to: toEmail,
subject: subject,
html: html
});
};
```;
2. Secondly, I created the client component that gets the state and finally the one that sends the email. However, Because I want to use env variables, the `toEmail` parameter cannot accept `string | undefined`, because it should be strictly a string. If i log the `process.env.EMAIL_ADMIN_QUOTE_RECEIVER` in the console, I get the result in the server console, but in the browser is undefined....
This component is a 'use client' component
Here is the function:
const handleSendQuote = async (event: FormEvent) => {
event.preventDefault();
const emailHTML = render(<NewQuoteReceived
name={fullName} dateRequired={dateRequired}
vechNeeded={vechiclesRequired} serviceReq={service}
phone={phoneNumber} email={email}
details={details} />)
await sendEmail(process.env.EMAIL_ADMIN_QUOTE_RECEIVER, 'New quote received', emailHTML);
alert('Sent');
clearState();
}
</details>
# 答案1
**得分**: 1
1) "Does `toEmail` really need to be an argument in your `sendEmail` function? Seems like it's going to be the same value all the time, and you can hard-code it on the backend."
2) "If you really want to expose your environment variable to the client side, you should prefix it with `NEXT_PUBLIC_`:
https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#exposing-environment-variables-to-the-browser"
<details>
<summary>英文:</summary>
1) Does `toEmail` really need to be an argument in your `sendEmail` function? Seems like it's going to be the same value all the time, and you can hard-code it on the backend.
2) If you really want to expose your environment variable to the client side, you should prefix it with `NEXT_PUBLIC_`:
https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#exposing-environment-variables-to-the-browser
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论