Como conectar o PostgreSQL a um aplicativo Next.js usando o Prisma

A interação 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 a usar o Prisma no Next.js para se conectar e interagir com um banco de dados PostgreSQL.

Criando um aplicativo Next.js

Antes de criar um aplicativo Next.js, certifique-se de ter Node e npm instalados em seu ambiente de desenvolvimento.

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

npx criar-próximo-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 em por que migrar para Next.js.

Instalando o cliente Prisma

Para começar a usar 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 instalar prisma @prisma/client

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

npx prisma init

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

Adicionando a 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 uma URL de conexão é este:

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

Substitua os elementos entre chaves pelos detalhes do seu banco de dados e salve-os no arquivo .env:

DATABASE_URL = ”sua string de conexão”

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

banco de dados de fonte de dados {
 provedor = "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 deve 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 de usuário.

usuário modelo {
 id String @default (cuid()) @id
 nome Cadeia?
 e-mail String @unique
}

O modelo User tem uma coluna id que é a chave primária, uma coluna name do tipo string e uma coluna email que deve ser única.

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

npx prisma db push

Este comando cria as tabelas reais no banco de dados.

Usando o Prisma no Next.js

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

Primeiro, gere o cliente Prisma.

npx prisma gerar

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

importar {PrismaCliente} de"@prisma/cliente";
deixar prisma;
se (tipo dejanela"indefinido") {
se (process.env. NODE_ENV "Produção") {
 prisma = novo PrismaCliente();
 } outro {
se (!global.prisma) {
 global.prisma = novo PrismaCliente();
 }
 prisma = global.prisma;
 }
}
exportarpadrão 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

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 o Prisma para buscar dados do banco de dados e retorná-los ao cliente. As páginas ou componentes podem buscar dados da rota da API usando um Biblioteca HTTP como Axios ou busca.

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.

importar prisma de"@/lib/prisma";
exportarpadrãoassíncronofunçãomanipulador(req, res) {
const { nome, e-mail } = req.query;
tentar {
const novoUer = aguardam prisma. Usuário.criar({
 dados: {
 nome,
 e-mail,
 },
 });
 res.json({ do utilizador: newUer, erro: nulo });
 } pegar (erro) {
 res.json({ erro: mensagem de erro, do utilizador: nulo });
 }
}

Essa função obtém o nome e o e-mail do corpo da solicitação. Em seguida, 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 app 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:

"usar cliente";
importar Reagir, { useState } de"reagir";
exportarpadrãofunçãoPágina() {
const [nome, nome do conjunto] = useState("");
const [email, setemail] = useState("");
const handleEnviar = assíncrono (e) => {
 e.preventDefault();
 };
retornar (



 tipo={texto}
 espaço reservado ="Adicionar nome"
 valor={nome}
 onChange={setname((e) => e.target.value)}
 />
 tipo={texto}
 espaço reservado ="Adicionar e-mail"
 valor={e-mail}
 onChange={setemail((e) => e.target.value)}
 />
"enviar">Enviar</button>
 </form>
 );
}

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

const handleEnviar = assíncrono (e) => {
 e.preventDefault();
const usuário = aguardam buscar("/api/db/createuser", {
 Tipo de conteúdo: "aplicativo/json",
 corpo: JSON.stringify({ nome, e-mail }),
 });
};

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 se 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é atualizar dados existentes armazenados no banco de dados.