Prisma - A forma mais fácil de trabalhar com um banco de dados no Next.js

Conteúdo

📋 Tabela de Conteúdos

• Introdução
• Configurando o Prisma
• Criando o banco de dados
• Consultando dados do banco
• Inserindo dados no banco
• Melhorando a experiência do desenvolvedor com tipos gerados
• Conclusão

Introdução

Neste artigo, vamos explorar como integrar o Prisma em um projeto Next.js para criar um aplicativo de contatos. Veremos como configurar o Prisma, criar o banco de dados, consultar e inserir dados, e como utilizar os tipos gerados pelo Prisma para melhorar a experiência de desenvolvimento.

Configurando o Prisma

Para começar, precisamos instalar as dependências do Prisma. Vamos executar o comando npm install prisma --save-dev para instalar o Prisma CLI como uma dependência de desenvolvimento. Em seguida, executaremos o comando npx prisma init para inicializar o Prisma. Isso irá criar uma nova pasta chamada prisma com um arquivo schema.prisma e um arquivo .env que aponta para a URL do banco de dados.

No nosso caso, vamos utilizar o SQLite como banco de dados. No arquivo .env, vamos alterar a URL para file:dev.db, que criará um banco de dados SQLite na pasta prisma do projeto.

Criando o banco de dados

Agora que o Prisma está configurado, vamos criar uma tabela para modelar os contatos do nosso aplicativo. No arquivo schema.prisma, vamos adicionar o seguinte código:

model Contato {
  id       Int    @id @default(autoincrement())
  nome     String
  sobrenome String
  email    String
  avatar   String
}

Essa tabela terá uma coluna id como chave primária, além das colunas nome, sobrenome, email e avatar. Essas colunas representarão os dados do contato.

Para criar o banco de dados e a tabela, vamos executar o comando npx prisma migrate dev. Isso irá executar as migrações pendentes e criar o banco de dados com a tabela Contato.

Consultando dados do banco

Agora que já temos o banco de dados configurado, podemos consultar os dados do banco usando o Prisma. Dentro da função getServerSideProps, vamos utilizar o Prisma Client para obter a lista de contatos. Podemos fazer isso da seguinte forma:

export async function getServerSideProps() {
  const contatos = await prisma.contato.findMany();

  return {
    props: {
      contatos,
    },
  };
}

Nessa função, estamos usando o método findMany do Prisma Client para obter todos os registros da tabela Contato. Esses registros serão enviados como props para a página, permitindo que sejam renderizados no lado do cliente.

Inserindo dados no banco

Além de consultar dados do banco, também podemos inserir novos registros usando o Prisma. Vamos criar uma função salvarContato que irá receber os dados de um novo contato e salvá-los no banco de dados. Essa função será chamada quando o formulário de adição de contato for submetido. Veja como implementar essa função:

export default async function salvarContato(req, res) {
  const { nome, sobrenome, email, avatar } = req.body;

  const novoContato = await prisma.contato.create({
    data: {
      nome,
      sobrenome,
      email,
      avatar,
    },
  });

  res.json(novoContato);
}

Nessa função, estamos utilizando o método create do Prisma Client para criar um novo registro na tabela Contato. Os dados do novo contato são passados como argumento para esse método. Após salvar o contato no banco, retornamos o novo contato como resposta.

Melhorando a experiência do desenvolvedor com tipos gerados

O Prisma gera tipos TypeScript que podemos utilizar para decorar nosso código e obter mais informações sobre o que podemos fazer com as entidades do banco de dados. Por exemplo, podemos importar o tipo Contato gerado pelo Prisma e utilizá-lo para definir o tipo de uma função ou variável:

import { Contato } from "@prisma/client";

const contatos: Contato[] = await prisma.contato.findMany();

Essa abordagem ajuda a melhorar a experiência do desenvolvedor, fornecendo informações mais precisas sobre os dados do banco de dados e evitando erros de tipo.

Conclusão

Neste artigo, exploramos o uso do Prisma em um projeto Next.js para criar um aplicativo de contatos. Vimos como configurar o Prisma, criar o banco de dados, consultar e inserir dados, e como utilizar os tipos gerados para melhorar a experiência do desenvolvimento. O Prisma é uma excelente ferramenta para trabalhar com bancos de dados em projetos Next.js, fornecendo uma camada de abstração poderosa e fácil de usar. Sinta-se à vontade para explorar mais recursos e funcionalidades do Prisma para otimizar ainda mais seu desenvolvimento.

Destaques

• O Prisma é uma ferramenta poderosa para trabalhar com bancos de dados em projetos Next.js.
• Configurar o Prisma no Next.js requer a instalação das dependências do Prisma, inicialização do Prisma e configuração do banco de dados.
• Utilize o Prisma Client para consultar e inserir dados no banco de dados.
• Utilize os tipos gerados pelo Prisma para melhorar a experiência do desenvolvedor e evitar erros.

Perguntas Frequentes

P: Posso utilizar o Prisma em outros bancos de dados além do SQLite? R: Sim, o Prisma suporta outros bancos de dados além do SQLite, como PostgreSQL, MySQL e MSSQL.

P: Como faço para configurar o Prisma para usar outro banco de dados? R: No arquivo .env, modifique a URL do banco de dados para apontar para o banco de dados desejado. Consulte a documentação do Prisma para obter mais detalhes sobre as opções de configuração.