![](/posts/1_ymfz_KKMuGJpIPyvdlGnHA.png)
NestJS + NextJS
Desenvolvendo uma Aplicação Full Stack Profissional com Nest.js e Next.js
Passo 1: Configuração do Back-end com Nest.js
Vamos começar criando o back-end com Nest.js, configurando um servidor RESTful básico. Certifique-se de ter o Node.js e o npm instalados em seu sistema.
- Crie um novo projeto Nest.js : Abra seu terminal e execute os seguintes comandos para criar um novo projeto Nest.js:
npm install -g @nestjs/cli
nest new backend-project
cd backend-project
- Instale as Dependências : Instale as dependências necessárias, como o TypeORM para trabalhar com o banco de dados:
npm install @nestjs/typeorm typeorm pg
- Crie um Módulo, Entidade e Controlador :
Crie um módulo, uma entidade e um controlador para gerenciar recursos. Por exemplo, vamos criar um módulo chamado
items
:
nest generate module items
nest generate controller items
- Defina a Entidade :
Crie uma entidade
Item
usando o TypeORM no arquivoitems.entity.ts
:
// src/items/items.entity.ts
import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';
@Entity('items')
export class Item {
@PrimaryGeneratedColumn()
id: number;
@Column()
name: string;
@Column()
description: string;
}
- Configure o Controlador :
Implemente as operações CRUD no controlador
items.controller.ts
.
// src/items/items.controller.ts
@Get()
findAll(): Promise<Item[]> {
return this.itemsService.findAll();
}
@Get(':id')
findOne(@Param('id') id: string): Promise<Item> {
return this.itemsService.findOne(+id);
}
@Post()
create(@Body() createItemDto: CreateItemDto): Promise<Item> {
return this.itemsService.create(createItemDto);
}
@Delete(':id')
remove(@Param('id') id: string): Promise<void> {
return this.itemsService.remove(+id);
}
- Configure a Rota :
Configure a rota no arquivo
items.module.ts
:
// src/items/items.module.ts
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { Item } from './items.entity';
import { ItemsController } from './items.controller';
import { ItemsService } from './items.service';
@Module({
imports: [TypeOrmModule.forFeature([Item])],
controllers: [ItemsController],
providers: [ItemsService],
})
export class ItemsModule {}
- Execute o Servidor : Inicie o servidor Nest.js:
npm run start:dev
Passo 2: Configuração do Front-end com Next.js
Agora, vamos criar o front-end com Next.js para se comunicar com o back-end. Certifique-se de ter o Node.js e o npm instalados.
- Crie um Novo Projeto Next.js : Abra um novo terminal e execute os seguintes comandos:
npx create-next-app frontend-project
cd frontend-project
- Instale as Dependências : Instale as dependências necessárias, como Axios para fazer solicitações HTTP ao servidor:
npm install axios
- Configure a Conexão com o Back-end :
Defina a URL do servidor Nest.js no arquivo de configuração, por exemplo, em
frontend-project/utils/api.js
:
// frontend-project/utils/api.js
import axios from 'axios';
const api = axios.create({
baseURL: 'http://localhost:3000', // Ajuste conforme a porta do servidor Nest.js
});
export default api;
- Crie Páginas e Componentes : Crie páginas e componentes React para construir a interface do usuário.
- Recupere Dados do Back-end : Use o Axios para fazer solicitações ao servidor e exibir os dados na interface.
- Configure o Roteamento :
Configure o roteamento no lado do cliente usando o Next.js, criando páginas e arquivos de rota no diretório
pages
. - Estilize com CSS : Estilize a interface do usuário com CSS ou bibliotecas de estilo, como Styled-components ou SCSS.
- Inicie o Aplicativo Next.js : Inicie o aplicativo Next.js:
npm run dev
Passo 3: Recursos Avançados e Implantação
Para recursos avançados, como autenticação, controle de acesso, gerenciamento de estado, SEO, segurança, testes e hospedagem, você precisará expandir seu projeto e personalizá-lo de acordo com suas necessidades específicas. Além disso, a implantação em produção pode ser realizada em plataformas como Vercel, Netlify, Heroku ou AWS, seguindo as práticas recomendadas.
Este guia fornece os passos iniciais para criar uma aplicação full-stack com Nest.js e Next.js, mas aprofundar-se em cada área é essencial para desenvolver um aplicativo mais robusto e profissional.