Next.js+TypeScript集成EmailJS时环境变量不生效问题求助

核心问题排查 #

• 首先确认环境变量文件名是否正确：Next.js仅会自动加载带前缀点的环境变量文件，你需要将env.local重命名为.env.local，且该文件必须放在项目根目录，与package.json、next.config.js同级，不能放置在pages/、src/等子目录内。
• 确认是否重启了开发服务：每次修改.env.local内容后，必须终止当前正在运行的npm run dev/yarn dev/pnpm dev进程，重新执行启动命令，新的环境变量才会被加载生效。
• 确认你使用的是Pages Router还是App Router：你当前代码中使用的getStaticProps仅在Pages Router下生效，App Router不支持该API。

Pages Router场景修复步骤 #

1. 按照上述要求修正.env.local文件并重启服务后，先在getStaticProps中添加打印校验，确认服务端是否能正常读取环境变量（该打印仅会出现在运行开发服务的终端，不会出现在浏览器控制台）：

export async function getStaticProps() {
  const service = process.env.SERVICE_ID
  const template = process.env.TEMPLATE_ID
  const user = process.env.USER_ID
  // 终端中查看是否输出正确的变量值
  console.log('EmailJS环境变量校验：', service, template, user)
  if (!service || !template || !user) {
    throw new Error('EmailJS环境变量未正确加载，请检查.env.local配置')
  }
  return {
    props: {
      service,
      template,
      user
    }
  }
}

2. 若终端打印正常，可在组件中添加props校验，避免运行时报错：

export default const ContactUs = (props: {service: string; template: string; user: string}) => {
  // 前置校验，避免调用时参数为空
  if (!props.service || !props.template || !props.user) {
    return <div>配置加载中，请稍后重试</div>
  }
  // 原有sendEmail逻辑保持不变
}

App Router场景修复步骤 #

App Router下不支持getStaticProps，你需要根据组件类型调整实现：

1. 若组件为客户端组件（含点击等交互逻辑），给环境变量添加NEXT_PUBLIC_前缀，修改.env.local内容：

NEXT_PUBLIC_SERVICE_ID=service_123
NEXT_PUBLIC_TEMPLATE_ID=template_123
NEXT_PUBLIC_USER_ID=user_123

2. 组件顶部添加'use client'标记，直接读取环境变量即可：

'use client'
import emailjs from '@emailjs/browser'
import { useState } from 'react'

export default const ContactUs = () => {
  const [result, setResult] = useState(false)
  const sendEmail = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    emailjs.sendForm(
      process.env.NEXT_PUBLIC_SERVICE_ID!, 
      process.env.NEXT_PUBLIC_TEMPLATE_ID!, 
      e.target as HTMLFormElement, 
      process.env.NEXT_PUBLIC_USER_ID!
    )
    .then((result) => {
      console.log(result.text)
    }, (error) => {
      console.log(error.text)
    })
    e.target.reset()
    setResult(true)
  }
  return (<div>...</div>) 
}

内容的提问来源于stack exchange，提问作者Joaquin Palacios