[오류] Next.js에서 neon database 연결 안되는 문제

React19 useActionState hooks를 사용해서 Form 처리를 하던 중, useActionState를 연결하니 에러가 발생했다…

Next.js는 process.env로 정의된 환경 변수를 기본적으로 서버 측에서만 사용할 수 있기 때문이라고 한다.

환경 변수는 클라이언트에서 직접 접근할 수 없기 때문에, 이를 클라이언트에서 사용하려면 Next.js 설정 파일인 next.config.js에서 설정해줘야 한다고 한다!

아래처럼 추가해주면 정상적으로 동작하게 된다.

// next.config.ts
const nextConfig = {
	...
  env: {
    NEON_DATABASE_URL: process.env.NEON_DATABASE_URL,
  },
};

---

참고

use next.config.js environment variable from t3-env in nextjs