如何在 Next.js 中在服务器组件和客户端组件中使用环境变量

huangapple
go评论104阅读模式
英文:

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

  1. 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.
  1. 'use server'
  2. import nodemailer from 'nodemailer';
  4. const transporter = nodemailer.createTransport({
  5.     service: 'gmail',
  6.     secure: false,
  7.     auth: {
  8.         user: process.env.EMAIL,
  9.         pass: process.env.EMAIL_PASSWORD,
  10.     },
  11. });
  13. export const sendEmail = async (toEmail: string, subject: string, html: string) => {
  14.     await transporter.sendMail({
  15.         from :      process.env.EMAIL_ADMIN_QUOTE_RECEIVER,
  16.         to:         toEmail,
  17.         subject:    subject,
  18.         html:       html
  19.     });
  20. };
  1. 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:

  1. const handleSendQuote = async (event: FormEvent) => {
  2.     event.preventDefault();
  4.     const emailHTML = render(<NewQuoteReceived 
  5.         name={fullName}                         
  6.         dateRequired={dateRequired}
  7.         vechNeeded={vechiclesRequired}          
  8.         serviceReq={service}
  9.         phone={phoneNumber}                     
  10.         email={email} 
  11.         details={details} />)
  12.       
  13.     await sendEmail(process.env.EMAIL_ADMIN_QUOTE_RECEIVER, 'New quote received', emailHTML);
  14.     alert('Sent');
  15.      
  16.     clearState();
  17. }
英文:

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

  1. 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 &#39;use server&#39;, because I had other errors where the solution was to make it a server component.
  1. &#39;use server&#39;
  2. import nodemailer from &#39;nodemailer&#39;;
  5. const transporter = nodemailer.createTransport({
  6. //   host: &#39;smtp.ethereal.email&#39;,
  7. //   port: 587,
  8.     service: &#39;gmail&#39;,
  9.     secure: false,
  10.         auth: {
  11.             user: process.env.EMAIL,
  12.             pass: process.env.EMAIL_PASSWORD,
  13.         },
  14. });
  17. export const sendEmail = async (toEmail: string, subject: string, html: string) =&gt; {
  18.     await transporter.sendMail({
  19.         from :      process.env.EMAIL_ADMIN_QUOTE_RECEIVER,
  20.         to:         toEmail,
  21.         subject:    subject,
  22.         html:       html
  23.     });
  24. };
  25. ```;
  29. 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.... 
  30. This component is a &#39;use client&#39; component
  32. Here is the function:

const handleSendQuote = async (event: FormEvent) => {
event.preventDefault();

  1. const emailHTML = render(&lt;NewQuoteReceived 
  2.     name={fullName}                         dateRequired={dateRequired}
  3.     vechNeeded={vechiclesRequired}          serviceReq={service}
  4.     phone={phoneNumber}                     email={email} 
  5.     details={details} /&gt;)
  6.   
  7.   
  8. await sendEmail(process.env.EMAIL_ADMIN_QUOTE_RECEIVER, &#39;New quote received&#39;, emailHTML);
  9. alert(&#39;Sent&#39;);
  10.  
  11. clearState();

}

  2. </details>
  5. # 答案1
  6. **得分**: 1
  8. 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."
  10. 2) "If you really want to expose your environment variable to the client side, you should prefix it with `NEXT_PUBLIC_`:
  12. https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#exposing-environment-variables-to-the-browser"
  14. <details>
  15. <summary>英文:</summary>
  17. 1) Does `toEmail` really need to be an argument in your `sendEmail` function? Seems like it&#39;s going to be the same value all the time, and you can hard-code it on the backend.
  19. 2) If you really want to expose your environment variable to the client side, you should prefix it with `NEXT_PUBLIC_`:
  21. https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#exposing-environment-variables-to-the-browser
  23. </details>

huangapple
  • 本文由 发表于 2023年5月26日 00:01:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/76334261.html
  • next.js
  • next.js13
  • react-server-components
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定