Search code examples
next.jsdeploymentenvironment-variablesnetlifyvercel

Next.js problem with .env after doploy (Notlify/Vercel)

I have problem with my app in next.js afert deploy. On desktop, after start server npm run dev everything working perfect with API. Bu after deploy (I trying Netlify and Vercel) I get error that API don't receive my keys from .env. I trying with YOUR_PUBLIC_KEY and NEXT_PUBLIC_YOUR_PUBLIC_KEY but it it the same error.

My .env.local:

YOUR_SERVICE_ID="abc"
YOUR_TEMPLATE_ID="def"
YOUR_PUBLIC_KEY="ghy"

NEXT_PUBLIC_YOUR_SERVICE_ID="abc"
NEXT_PUBLIC_YOUR_TEMPLATE_ID="def"
NEXT_PUBLIC_YOUR_PUBLIC_KEY="ghy"

My component:

import Image from "next/image";
import Link from "next/link";
import React, { useRef } from "react";
import { AiOutlineMail } from "react-icons/ai";
import { FaGithub, FaLinkedinIn } from "react-icons/fa";
import { HiOutlineChevronDoubleUp } from "react-icons/hi";
import ContactImg from "../public/assets/contact.jpg";
import emailjs from "@emailjs/browser";

const Contact = () => {
  const form = useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs
      .sendForm(
        process.env.NEXT_PUBLIC_YOUR_SERVICE_ID,
        process.env.NEXT_PUBLIC_YOUR_TEMPLATE_ID,
        form.current,
        process.env.NEXT_PUBLIC_YOUR_PUBLIC_KEY
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
    e.target.reset();
  };

  return (
...
)
}

export default Contact;

My package.json:

{
  "name": "portfolio-nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emailjs/browser": "^3.10.0",
    "aos": "^3.0.0-beta.6",
    "dotenv": "^16.0.3",
    "gh-pages": "4.0.0",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-google-recaptcha": "^2.1.0",
    "react-icons": "4.3.1"
  },
  "devDependencies": {
    "autoprefixer": "10.4.7",
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6",
    "postcss": "8.4.13",
    "tailwindcss": "3.0.24"
  }
}

And index.js:

import Head from "next/head";
import Contact from "../components/Contact";
import Main from "../components/Main";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Test form app</title>
        <meta
          name="description"
          content="test app with api to send email."
        />
        <link rel="icon" href="/fav.png" />
      </Head>
      <Main />
      <Contact />
    </div>
  );
}

I trying changing .env path, .env name,

Solution

  • I resolve this problem: I must change next.config.js like below:

    /** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

const webpack = require("webpack");

const { parsed: myEnv } = require("dotenv").config({
  path: "/",
});

module.exports = {
  webpack(config) {
    config.plugins.push(new webpack.EnvironmentPlugin(myEnv));
    return config;
  },
};

module.exports = nextConfig;