Runtime Error

Next.js App router 기반 Chat GPT 만들기

회원가입 마무리

작성

수정됨

// db/index.ts 코드 내용
import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';
import * as schema from './schema';

const sql = neon(process.env.DATABASE_URL!);
const db = drizzle(sql, {schema});

export default db;

// action/signup.ts 내용
"use client";

import bcrypt from "bcryptjs";
import { getUserByEmail } from "@/data/user";
import { SignUpSchema } from "@/schemas/auth";
import { user } from "@/db/schema";
import db from "@/db";
import { redirect } from "next/navigation";

export const signUp = async(_:any, formData:FormData) => {
    //1. 필드 중요성
    const validatedFields = SignUpSchema.safeParse({
        name: formData.get("name"),
        email: formData.get("email"),
        password: formData.get("password")
    })

    if(!validatedFields.success){
        return {
            errorMessages: "잘못된 입력값이 있습니다.",
        };
    }
    //2. 존재하는 사용자인지 체크
    const {email, name, password} = validatedFields.data;

    //4. 성공 여부 반환
    try {
        const existingUser = await getUserByEmail(email);
    
        if(existingUser){
            return {
                errorMessages: "이미 가입된 사용자입니다.",
            };
        }
    
        const hasehdPassword = await bcrypt.hash(password, 10);
        //3. db에 insert
        await db.insert(user).values({name, email, password: hasehdPassword});

    } catch(error) {
        console.error(error)
        return {errorMessage: "알 수 없는 오류가 발생했습니다."};
    }
    redirect("/login");
};

회원가입 마무리 코드를 다 입력하고 저장한 뒤에 사이트를 확인했는데, 이런 오류가 납니다. DATABASE URL이 잘못됐나 싶어서 다시 확인해봤지만 이상이 없었습니다. 이전 강의인 회원가입 유효성 검사 기능 제작까지 문제가 없었는데, 문제 해결이 되지 않아 질문 남겨봅니다....

react typescript next.js tailwindcss zustand chatgpt

답변 2

코딩먹방

지식공유자

signup.ts 는 서버 액션이기 때문에 'use client' 가 아니라 'use server'를 작성해주셔야 합니다!

추가적으로 에러가 나는 이유에 대해 좀 더 설명드리면

db.insert(user).values({name, email, password: hasehdPassword});

위와 같이 db 를 사용할 땐 데이터 베이스에 접근해야하기 때문에 DATABASE_URL 이 필요하게 됩니다.

그리고 Next.js 에서는 클라이언트에서 환경 변수에 접근할 때, "NEXT_PUBLIC_" 을 앞에 붙여줘야 가져올 수 있는데요. DATABASE_URL 의 경우 데이터 베이스 연결을 위한 환경변수이기 때문에 서버에서만 사용하기 위해 NEXT_PUBLIC을 붙이지 않았고 그렇기에 현재 'use client'라고 선언되어 있는 파일에서 환경 변수를 가져올 수 없어 에러가 나는 것입니다.

앞으로 동일한 에러가 발생할 때에 DATABASE_URL 에 문제가 없다면 클라이언트에서 서버에서만 접근할 수 있는 환경 변수에 접근하지 않았는지(ex: db 를 조작하는 코드) 1차적으로 의심 해보시길 추천 드립니다.

참고: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 이다민님.

지금 발생한 오류는 데이터베이스 연결을 설정하는 과정에서 DATABASE_URL 환경 변수가 올바르게 설정되지 않았기 때문에 발생하는 것으로 보입니다. 이 문제를 해결하기 위해 몇 가지 점검 사항과 함께 관련 정보를 제공드리겠습니다.

문제의 원인

Next.js 환경에서 데이터베이스 연결을 수행할 때, 데이터베이스 연결 문자열(DATABASE_URL)을 환경 변수로 설정해야 합니다. 하지만 현재는 이 변수가 설정되지 않았거나, 올바르지 않은 값으로 설정되어 있습니다.

해결 방법

환경 변수 설정 확인:
- .env 파일이나 환경 설정 파일에 DATABASE_URL이 올바르게 기재되어 있는지를 확인하세요.
- 예시로, .env 파일에 다음과 같이 설정되어 있어야 합니다.
```
DATABASE_URL=your-database-connection-string
```
환경 변수 적용:
- Next.js에서는 서버가 시작되기 전에 환경 변수가 제대로 로드될 수 있도록 설정 파일을 프로젝트의 루트에 배치합니다.
- 서버를 다시 시작할 때 적용되어 있는 환경 변수가 올바른지, 즉 process.env.DATABASE_URL이 적절한 값을 반환하는지 확인합니다.
환경 변수 노출 방지 확인:
- 환경 변수가 클라이언트 코드에 노출되지 않도록 서버 사이드에서만 사용되고 있는지 확인합니다. .env 파일은 클라이언트에서 직접 접근할 수 없도록 설정되어야 합니다.

참고 링크

Next.js 환경 변수 공식 문서: Next.js 환경 변수 설정
- 이 문서는 환경 변수를 설정하고 관리하는 방법을 설명하고 있습니다. 올바른 환경 변수를 설정하는데 도움이 될 것입니다.

현재 문제는 데이터베이스 연결을 위한 환경 변수가 올바르게 설정되지 않아 발생한 것으로 보입니다. 위의 내용을 참조하여 설정을 재점검해보시고, 문제가 지속된다면 추가적으로 질문해 주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

Runtime Error

문제의 원인

해결 방법

참고 링크