Neon으로 3초만에 무료 DB 서버 만들기 & NextJS에 연동

이번 포스팅에서는 PostgreSQL DB를 간편하게 생성하고 사용할 수 있도록 도와주는

Neon이라는 서비스에 대해 알아보고 

NextJS에 연동한 후 간단한 Select 쿼리를 호출해보도록 하겠습니다. 

---

Neon이란?

Neon은 PostgreSQL의 엔지니어 및 해커들이 만든 서버리스 오픈소스 DB입니다. 

PostgreSQL을 사랑하는 사람들이 만들어서 그런가, 공식문서에 Postgres에 대한 애정이 잔뜩 묻어있는 것을 볼 수 있습니다. 

 

Neon의 핵심 키워드 3가지를 뽑아보자면 다음과 같습니다. 

Cloud, Serverless, Modern

 

Neon은 클라우드 환경을 위해서 만들어졌습니다. 그래서 Cloud 환경에 특화되어 있습니다.

Serverless 형식으로 동작합니다. 즉, 사용하지 않으면 대기상태로 전환되어 비용이 절감됩니다. 

Branching, Monitoring, Auto-Scaling, Replication등의 모던한 부가기능을 제공합니다. 

---

DB 생성 & NextJS 연동

Neon 프로젝트 생성 

공식문서에 따르면 3초만에 DB를 생성할 수 있다고 합니다. 

SELECT ’Hello, World’ - Neon

 

실제로 Project Name과 Database 이름만 입력하면 바로 생성이 됩니다. 

Postgres 버전과 Cloud 플랫폼과 Region을 선택할 수 있는데요.

안타깝게도 서울 리전은 없어서 그나마 가까울 것 같은 Asia/Singapore를 선택했습니다. 

 

create 버튼을 클릭하면 바로 DB가 생성되고 대시보드로 이동합니다. 

 

테이블 생성

NextJS 프로젝트를 세팅하기 전 INSERT/SELECT 테스트를 진행할 테이블을 생성해보도록 하겠습니다.

Tables 탭으로 이동한 후 우선 스키마를 생성합니다. 

 

그리고 생성한 스키마에 post라는 id, title, content 컬럼을 가지는 테이블을 생성하였습니다.

 

테스트 레코드까지 추가해봅시다. 

---

NextJS 프로젝트 생성

Neon과 연결하기 위한 NextJS 프로젝트를 하나 생성하였습니다. 

 

라이브러리 설치

아래 명령어로 라이브러리를 설치합니다. 

npm install @neondatabase/serverless dotenv

 

.env 작성

프로젝트 폴더 아래에 .env 파일을 생성하고 DATABASE_URL을 추가합니다. 

 

DATABASE_URL은 대시보드에 있는 Connect 버튼을 클릭하면 아래와 같은 모달이 뜨는데, 

Connection string이 바로 DATABASE_URL입니다. 

 

.env 파일에 다음과 같이 작성하시면 됩니다. 

DATABASE_URL=복사한거

 

database.ts 작성

database.ts파일을 생성한 후 다음과 같이 작성합니다. 

import {neon} from '@neondatabase/serverless';

const sql = neon(process.env.DATABASE_URL!);

export async function getPosts(){
    return await sql`SELECT * from test.post`;
}

.env에 추가한 DATABASE_URL을 사용하여 neon과 연결한 후 

post 테이블의 데이터를 조회하여 반환하는 getPosts 함수를 구현하였습니다. 

 

DB 조회 후 화면에 출력

이제 인덱스 페이지에 접근하면 post 테이블에 있는 내용이 조회되도록 수정해보겠습니다. 

/app/page.tsx 파일을 아래와 같이 수정합니다. 

import { getPosts } from "@/database";

export default async function Home() {
  const posts = await getPosts();

  return (
      <div>
        {posts.map((post) => (
            <div key={post.id} className="flex p-4 items-center">
                <h1 className="mr-4 text-xl font-bold"> { post.title }</h1>
                <p>{ post.content }</p>
            </div>
        )) }
      </div>
  );
}

 

getPosts 함수를 호출하면 아래와 같은 데이터가 반환되는데요. 

이 데이터를 화면에 출력한 것입니다. 

 

---

이렇게 neon을 사용하여 별도의 백엔드 서버 없이 프론트엔드 서버에서 직접 DB에 쿼리를 호출하여 보았습니다. 

복잡한 로직이 필요한 프로젝트라면 백엔드 서버없이 구현하기 힘들겠지만

간단한 CRUD만 필요한 프로젝트라면 충분히 활용가능한 기술이라고 생각합니다. 

 

다음 포스팅에서는 Drizzle ORM을 사용하여 더 정교한 쿼리를 다뤄보겠습니다. 

긴 포스팅 읽어주셔서 감사합니다.