How to Build a Basic CRUD App with Next.js?

introdução neste guia, vamos percorrer a construção de uma aplicação crud completa (criar, ler, atualizar, excluir) usando next js para o seu frontend, emparelhado com back4app como sua solução de backend você configurará um projeto chamado basic crud app nextjs , projetará um esquema de banco de dados dinâmico e integrará uma funcionalidade robusta de crud em seu aplicativo next js cobriremos tudo, desde a configuração do seu projeto back4app e o design de coleções até a conexão da sua interface next js usando o sdk parse ou métodos rest/graphql ao final, você terá uma aplicação web pronta para produção com autenticação de usuário segura e gerenciamento de dados eficiente principais conclusões construa uma aplicação crud completa com next js e back4app aprenda a projetar um esquema de backend flexível adaptado às suas necessidades de dados utilize uma interface de administração intuitiva, arrastar e soltar, para gerenciamento de dados descubra as melhores práticas para implantação, incluindo containerização com docker e integração com github pré requisitos antes de começar, certifique se de que você tem uma conta back4app com um novo projeto configurado para orientações, consulte introdução ao back4app https //www back4app com/docs/get started/new parse app um ambiente de desenvolvimento next js use create next app https //nextjs org/docs/api reference/create next app ou uma ferramenta similar certifique se de que o node js (versão 14 ou posterior) está instalado uma compreensão básica de javascript, next js e integrações de api visite a documentação do next js https //nextjs org/docs para uma visão geral, se necessário passo 1 – configurando seu projeto iniciar um novo projeto back4app faça login na sua conta back4app clique no botão “novo app” no seu painel digite o nome do projeto basic crud app nextjs e siga as instruções criar novo projeto seu novo projeto aparece no painel, servindo como o núcleo para seu backend crie sua aplicação next js abra seu terminal e execute npx create next app\@latest basic crud app nextjs mude para o diretório do seu projeto cd basic crud app nextjs este comando configura uma estrutura de projeto next js pronta para personalização passo 2 – criando o seu esquema de banco de dados estruturando seu modelo de dados para este aplicativo crud, você criará coleções essenciais abaixo estão duas coleções principais com detalhes dos campos que permitem as funcionalidades principais 1 coleção de itens esta coleção armazena detalhes sobre cada item campo tipo de dados descrição id objectid identificador único gerado automaticamente título string o nome ou título do item descrição string um breve resumo do item criado em data timestamp quando o item é criado atualizado em data timestamp da última atualização 2 coleção de usuários esta coleção gerencia perfis de usuários e dados de autenticação campo tipo de dados descrição id objectid identificador único gerado automaticamente nome de usuário string nome de usuário único para o usuário email string endereço de e mail único hash da senha string senha hash segura para autenticação de usuário criado em data timestamp quando a conta foi criada atualizado em data timestamp da última atualização da conta você pode definir manualmente essas coleções no painel do back4app criando uma nova classe para cada coleção e adicionando as colunas relevantes criar nova classe crie campos escolhendo o tipo de dado apropriado, nomeando a coluna e definindo padrões ou requisitos criar coluna usando o assistente de ia do back4app para configuração de esquema o assistente de ia do back4app simplifica a geração de esquemas de banco de dados descreva suas coleções e campos desejados e deixe o assistente gerar automaticamente a estrutura passos para usar o assistente de ia abra o assistente de ia encontre o no menu do seu painel do back4app descreva seu modelo de dados cole uma descrição detalhada delineando suas coleções e requisitos de campo revise e aplique verifique o esquema gerado e implemente o em seu projeto exemplo de prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) este método não apenas economiza tempo, mas também garante que seu esquema seja consistente e otimizado passo 3 – ativando a interface de administração e recursos crud explorando a interface de administração a interface de administração do back4app oferece uma solução sem código para gerenciar seus dados de backend com seu sistema intuitivo de arrastar e soltar, você pode facilmente realizar operações crud habilitando a interface de administração navegue até a seção “mais” no seu painel do back4app clique em “admin app” e então selecione “habilitar admin app ” configure suas credenciais de administrador configurando seu primeiro usuário administrador isso também estabelece funções como b4aadminuser e coleções de sistema necessárias habilitar aplicativo de admin após a ativação, faça login na interface de admin para começar a gerenciar seus dados painel do aplicativo de admin executando operações crud via a interface de admin dentro da interface de admin você pode criar registros use o botão “adicionar registro” em uma coleção (por exemplo, itens) para inserir novos dados visualizar ou atualizar registros clique em um registro para inspecionar ou modificar seus campos excluir registros use a opção de exclusão para remover entradas obsoletas esta interface simplificada torna o gerenciamento de dados direto e eficiente passo 4 – conectando next js ao back4app com seu backend configurado, o próximo passo é conectar sua aplicação next js opção a usando o sdk parse instale o sdk parse npm install parse inicialize o parse em sua aplicação next js crie um arquivo (por exemplo, lib/parseconfig js ) // lib/parseconfig js import parse from 'parse'; // replace with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; integre o parse em uma página next js por exemplo, crie uma página para buscar e exibir itens // pages/index js import { useeffect, usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function home() { const \[items, setitems] = usestate(\[]); useeffect(() => { const loaditems = async () => { const items = parse object extend('items'); const query = new parse query(items); try { const results = await query find(); setitems(results); } catch (error) { console error('error retrieving items ', error); } }; loaditems(); }, \[]); return ( \<div style={{ padding '2rem' }}> \<h1>item list\</h1> \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item get('title')}\</strong> {item get('description')} \</li> ))} \</ul> \</div> ); } opção b usando rest ou graphql se você preferir não usar o sdk do parse, pode gerenciar operações crud com rest ou graphql por exemplo, para buscar itens via rest const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('error fetching items ', error); } }; fetchitems(); integre essas chamadas de api em seus componentes next js conforme necessário passo 5 – protegendo seu backend implementando listas de controle de acesso (acls) proteja seus dados atribuindo acls a objetos por exemplo, para criar um item que apenas seu proprietário pode acessar async function addprivateitem(itemdetails, owner) { const items = parse object extend('items'); const newitem = new items(); newitem set('title', itemdetails title); newitem set('description', itemdetails description); // configure acl owner only read and write const acl = new parse acl(owner); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); newitem setacl(acl); try { const saveditem = await newitem save(); console log('private item added ', saveditem); } catch (error) { console error('error adding item ', error); } } configurando permissões em nível de classe (clps) dentro do painel do back4app, ajuste os clps para cada coleção para restringir o acesso aos dados apenas a usuários autorizados passo 6 – implementando autenticação de usuário configurando contas de usuário o back4app utiliza a classe de usuário embutida do parse para autenticação no seu aplicativo next js, gerencie o registro e o login como mostrado abaixo // pages/signup js import { usestate } from 'react'; import parse from ' /lib/parseconfig'; export default function signup() { const \[username, setusername] = usestate(''); const \[password, setpassword] = usestate(''); const \[email, setemail] = usestate(''); const registeruser = async (e) => { e preventdefault(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration failed ' + error message); } }; return ( \<form onsubmit={registeruser}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<button type="submit">register\</button> \</form> ); } uma abordagem semelhante pode ser usada para login e gerenciamento de sessão você também pode habilitar recursos adicionais, como logins sociais, verificação de e mail e recuperação de senha através do painel do back4app passo 7 – implantando seu frontend next js as opções de implantação do back4app permitem que você hospede sua aplicação next js sem esforço, seja através da integração com o github ou da containerização com docker 7 1 construindo sua versão de produção abra o diretório do seu projeto no terminal execute o comando de build npm run build isso gera uma next pasta contendo arquivos otimizados estáticos e renderizados no servidor 7 2 organizando e enviando seu código seu repositório deve conter todos os arquivos fonte para seu aplicativo next js uma estrutura típica pode ser basic crud app nextjs/ ├── node modules/ ├── pages/ │ ├── index js │ └── signup js ├── lib/ │ └── parseconfig js ├── public/ │ └── favicon ico ├── package json └── readme md exemplo lib/parseconfig js // lib/parseconfig js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; exemplo pages/index js (consulte o trecho de código fornecido no passo 4) comitando seu código no github inicialize um repositório git git init adicione todos os arquivos git add comite suas alterações git commit m "initial commit of next js crud application" crie um repositório no github por exemplo, nomeie o como basic crud app nextjs envie seu código git remote add origin https //github com/your username/basic crud app nextjs git git push u origin main 7 3 integração com a implantação web do back4app acesse a implantação web faça login no seu painel do back4app, navegue até seu projeto e selecione o recurso de implantação web conecte sua conta do github siga as instruções para vincular seu repositório selecione seu repositório e branch escolha o repositório (por exemplo, basic crud app nextjs ) e a branch (por exemplo, main ) que contém seu código 7 4 configurando as configurações de implantação comando de build se seu repositório não incluir uma pasta pré construída next , especifique o comando (por exemplo, npm run build ) diretório de saída defina o diretório de saída como next para que o back4app saiba onde seus arquivos compilados estão variáveis de ambiente adicione quaisquer variáveis de ambiente necessárias, como chaves de api 7 5 containerizando sua aplicação next js com docker se você prefere docker para implantação, inclua um dockerfile em seu repositório # use an official node runtime as the base image from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the source code copy \# build the next js application run npm run build \# use nginx to serve the built app from nginx\ stable alpine copy from=build /app/ next /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] selecione a opção de implantação docker no back4app para containerizar e implantar sua aplicação 7 6 lançando sua aplicação implante seu app clique no botão implantar no back4app monitore o processo de construção o back4app buscará seu código, executará o comando de construção e implantará sua aplicação acesse seu app ao vivo uma vez que a implantação seja concluída, uma url será fornecida onde sua aplicação next js está hospedada 7 7 verificando sua implantação visite a url fornecida abra a url no seu navegador teste a funcionalidade certifique se de que suas páginas carregam corretamente e que todas as operações crud estão funcionando solucione problemas se necessário use as ferramentas de desenvolvedor do navegador e os logs do back4app para diagnosticar quaisquer problemas passo 8 – conclusão e próximos passos parabéns! você construiu com sucesso uma aplicação crud robusta com next js e back4app você configurou seu projeto, projetou coleções personalizadas e conectou seu frontend next js a um backend seguro próximos passos aprimore seu frontend expanda seu aplicativo next js com recursos avançados, como visualizações detalhadas, funcionalidade de busca ou atualizações em tempo real aumente seu backend explore funções em nuvem, integrações de terceiros ou controles de acesso adicionais continue aprendendo visite a documentação do back4app https //www back4app com/docs e recursos do next js para mais otimização e personalização ao seguir este tutorial, você agora possui as habilidades para criar uma aplicação crud escalável e segura usando next js e back4app boa codificação!