Como conectar PostgreSQL a um aplicativo Next.js usando Prisma

Acesse seu banco de dados Postgres a partir de um aplicativo Next com este ORM de última geração.

Interagir com um banco de dados PostgreSQL ou qualquer outro banco de dados aumenta diretamente a quantidade de SQL que você escreve. Isso pode introduzir problemas de segurança, como ataques de injeção de SQL, e limitar a portabilidade do seu banco de dados. É aconselhável usar um ORM (Object Relation Mapper) como o Prisma, que fornece uma camada de abstração no topo do seu banco de dados.

Aprenda como usar o Prisma no Next.js para conectar e interagir com um banco de dados PostgreSQL.

Criando um aplicativo Next.js

Crie um aplicativo Next.js chamado prisma-next executando este comando em seu terminal:

npx create-next-app prisma-next

Isso criará um novo diretório chamado prisma-next com arquivos básicos para começar.

Navegue até o diretório prisma-next e inicie o servidor de desenvolvimento usando este comando:

npm run dev

Isso inicia um servidor de desenvolvimento em http://localhost:3000.

Estas são as etapas básicas para criar um novo aplicativo Next.js. Você pode aprender mais sobre os recursos do Next.js consultando este artigo sobre por que migrar para o Next.js.

Instalando o cliente Prisma

Para começar a usar o Prisma, você precisará dos pacotes prisma e @prisma/client. prisma é a ferramenta Prisma CLI, enquanto @prisma/client é um construtor de consultas gerado automaticamente que o ajudará a consultar seu banco de dados.

Instale esses dois pacotes via npm.

npm install prisma @prisma/client

Em seguida, inicialize o prisma executando o comando npx prisma init no terminal.

npx prisma init

Isso gerará um novo arquivo chamado schema.prisma que contém o esquema do banco de dados e um arquivo .env ao qual você adicionará o URL de conexão do banco de dados.

Adicionando o URL de conexão

Você precisa de um URL de conexão para conectar o prisma ao seu banco de dados PostgreSQL. O formato geral para um URL de conexão é este:

postgres://{username}:{password}@{hostname}:{port}/{database-name}

Substitua os elementos entre colchetes pelos detalhes do seu próprio banco de dados e salve-os no arquivo .env:

DATABASE_URL = ”your connection string”

Em seguida, em schema.prisma, especifique o URL de conexão do banco de dados:

datasource db {
  provider = "PostgreSQL"
  url = env("DATABASE_URL")
}

Definindo o esquema do banco de dados

O esquema do banco de dados é uma estrutura que define o modelo de dados do seu banco de dados. Ele especifica as tabelas, colunas e relacionamentos entre tabelas no banco de dados, bem como quaisquer restrições e índices que o banco de dados deva usar.

Para criar um esquema para um banco de dados com uma tabela de usuários, abra o arquivo schema.prisma e adicione um modelo User.

model User {
  id String @default(cuid()) @id
  name String?
  email String @unique
}

O modelo User possui uma coluna de id que é a chave primária, uma coluna de nome do tipo string e uma coluna de email que deve ser exclusiva.

Depois de definir o modelo de dados, você precisa implantar seu esquema no banco de dados usando o comando npx prisma db push.

npx prisma db push

Este comando cria as tabelas reais no banco de dados.

Usando Prisma em Next.js

Para usar o Prisma em Next.js, você precisa criar uma instância do cliente prisma.

Primeiro, gere o cliente Prisma.

npx prisma generate

Em seguida, crie uma nova pasta chamada lib e adicione um novo arquivo chamado prisma.js nela. Neste arquivo, adicione o código a seguir para criar uma instância do cliente prisma.

import { PrismaClient } from "@prisma/client";
let prisma;
if (typeof window === "undefined") {
    if (process.env.NODE_ENV === "production") {
        prisma = new PrismaClient();
    } else {
        if (!global.prisma) {
            global.prisma = new PrismaClient();
        }
        prisma = global.prisma;
    }
}
export default prisma;

Agora você pode importar o cliente prisma como “prisma” em seus arquivos e começar a consultar o banco de dados.

Consultando o banco de dados em uma rota de API Next.js

O Prisma é normalmente usado no lado do servidor, onde pode interagir com segurança com seu banco de dados. Em um aplicativo Next.js, você pode configurar uma rota de API que usa Prisma para buscar dados do banco de dados e devolvê-los ao cliente. As páginas ou componentes podem então buscar dados da rota da API usando uma biblioteca HTTP como Axios ou fetch.

Crie a rota da API abrindo a pasta pages/api e criando uma nova subpasta chamada db. Nesta pasta, crie um arquivo chamado createuser.js e adicione a seguinte função de manipulador.

import prisma from "@/lib/prisma";
export default async function handler(req, res) {
    const { name, email } = req.query;
    try {
        const newUer = await prisma.User.create({
            data: {
                name,
                email,
            },
        });
        res.json({ user: newUer, error: null });
    } catch (error) {
        res.json({ error: error.message, user: null });
    }
}

Esta função obtém o nome e o email do corpo da solicitação. Então, no bloco try/catch, ele usa o método create fornecido pelo Prisma Client para criar um novo usuário. A função retorna um objeto JSON contendo o usuário e a mensagem de erro, se houver.

Em um de seus componentes, agora você pode fazer uma solicitação para esta rota de API. Para demonstrar, crie uma nova pasta chamada profile no diretório do aplicativo e adicione um novo arquivo chamado page.js. Em seguida, adicione um formulário simples contendo duas caixas de entrada para o nome e e-mail e um botão de envio.

No formulário, adicione um evento ao enviar que chama uma função chamada handleSubmit. O formulário deve ficar assim:

"use client";
import React, { useState } from "react";
export default function Page() {
    const [name, setname] = useState("");
    const [email, setemail] = useState("");
    const handleSubmit = async (e) => {
        e.preventDefault();
    };
    return (
        <form onSubmit={handleSubmit}>
            <input
                type={text}
                placeholder="Add name"
                value={name}
                onChange={setname((e) => e.target.value)}
            />
            <input
                type={text}
                placeholder="Add email"
                value={email}
                onChange={setemail((e) => e.target.value)}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

Na função handleSubmit, use o método fetch para fazer uma solicitação à rota /api/db/createuser.

const handleSubmit = async (e) => {
    e.preventDefault();
    const user = await fetch("/api/db/createuser", {
        ContentType: "application/json",
        body: JSON.stringify({ name, email }),
    });
};

Agora, quando o formulário for enviado, o Prisma criará um novo registro de usuário na tabela Usuário.

Fazendo mais com o Prisma

Você pode usar o Prisma para conectar e consultar um banco de dados PostgreSQL a partir de um aplicativo Next.js.

Além de adicionar novos registros ao banco de dados, você também pode executar outros comandos SQL. Por exemplo, você pode excluir linhas, selecionar linhas com base em condições específicas e até mesmo atualizar dados existentes armazenados no banco de dados.