Construindo APIs Poderosas com Next.js e TypeScript: Um Passo a Passo Inspirado em Chaves e Chapolin

Aprenda a criar uma API do zero com Next.js, TypeScript e lowdb neste guia completo, inspirado nos clássicos Chaves e Chapolin.

Hey, você aí que é fã de programação e de risadas com o “Chaves” e o “Chapolin”! Já imaginou combinar essas duas paixões em um projeto de desenvolvimento web? Pois é exatamente isso que vamos fazer! Vou te guiar pelo incrível mundo do Next.js e TypeScript, e juntos vamos criar uma API super bacana que fornece informações sobre os episódios, personagens, frases e elenco desses dois programas icônicos. Se você quer aprender a construir uma API do zero e fazer isso de um jeito divertido e prático, você está no lugar certo!

Leia mais:

• Explorando Frameworks Populares em 2023: .NET vs Django
• ChatGPT na Programação: A AI que está Revolucionando a Aprendizagem

Preparando o Ambiente de Desenvolvimento

Antes de nos aprofundarmos nesse mundo mágico onde o “nada” se transforma em “API”, precisamos preparar nosso cantinho de trabalho. É como arrumar a barraca para vender refrescos na vila – tem que estar tudo nos trinques!

• Instalação do Node.js e npm/yarn: Primeiríssima coisa: se você ainda não tem o Node.js instalado, é hora de resolver isso. Vá até o site oficial, baixe e instale a versão recomendada para a maioria dos usuários. Com o Node instalado, você já tem o npm na mão, mas se quiser, o yarn é uma opção tão boa quanto um sanduíche de presunto para o Chaves. Só escolher o que mais te agrada!
• Criação de um novo projeto Next.js com TypeScript: Com o ambiente pronto, vamos criar nosso projeto. Abra o terminal, escolha um cantinho no seu computador e digite npx create-next-app@latest chaves-chapolin-api --typescript. Espere um tiquinho enquanto o Next.js prepara o terreno. Prontinho, um novo projeto com TypeScript está no forno!
• Estrutura básica de diretórios e arquivos: Agora, a organização é chave – e não estou falando do nosso amado personagem, hein? No Next.js, a mágica das APIs acontece na pasta app/api. É lá que vamos construir nossos endpoints. Então, não se esqueça de verificar se ela está lá, beleza?

Explorando Next.js e TypeScript: Conceitos Fundamentais

Opa, vamos colocar a mão na massa! Mas antes, deixa eu te contar um segredinho: entender bem as ferramentas faz toda a diferença. É tipo saber todos os esconderijos da vila – você sempre tem uma vantagem.

• Breve introdução ao Next.js e seus recursos para APIs: Next.js é aquele framework do React que chegou chegando, sabe? Ele é cheio dos recursos que facilitam desde o roteamento até a otimização de performance. E para APIs? Ah, ele tem um esquema chamado API Routes que permite criar endpoints de forma super intuitiva. Vai ser tão fácil quanto o Quico encontrando uma nova forma de se gabar!
• Vantagens do TypeScript na construção de APIs: Agora, TypeScript… Esse é o fiel escudeiro do desenvolvedor! Sabe quando o Chapolin aparece para salvar o dia? É mais ou menos isso. O TypeScript adiciona tipos estáticos à jogada, o que ajuda a evitar aqueles bugs chatinhos e a escrever um código mais claro. No nosso guia, ele vai ser nosso herói!
• Configurando TypeScript no projeto Next.js: Mas e aí, como faz para o TypeScript entrar em ação? Simples: ao criar o projeto com aquele comando que dei antes, o Next.js já configura tudo bonitinho para você. Mas é sempre bom dar uma checada no arquivo tsconfig.json e ajustar as configurações conforme sua necessidade.

Modelando os Dados: Definindo Tipos e Interfaces

Pensa rápido: o que são dados sem uma boa estrutura? Um monte de informações soltas que nem os brinquedos do Quico espalhados pelo chão. Então bora organizar isso aí!

• Criando modelos de dados para programas, episódios, personagens, frases e elenco: Para cada parte da nossa API, vamos criar um modelinho. Por exemplo, um programa vai ter um título, descrição, ano de lançamento, essas coisas. Pode ser um objeto simples ou uma classe, se você quiser mais firula.
• Uso de interfaces TypeScript para tipagem de dados: As interfaces do TypeScript são como as regras da vila: ajudam todo mundo a saber o que esperar de cada coisa. Vamos definir uma interface para cada tipo de dado. Assim, se um episódio precisa de um título e uma lista de personagens, ninguém vai esquecer de nada.

export class Show {
    id: number;
    name: string;
    description: string;
}

export interface Episode {
    id: number;
    showId: number;
    title: string;
    description: string;
}

export interface Character {
    id: number;
    showId: number;
    name: string;
    description: string;
}

export interface Role {
    id: number;
    showId: number;
    castMemberId: number;
    characterId: number;
}

export interface CastMember {
    id: number;
    name: string;
    roles: Role[];
}

export interface Quote {
    id: number;
    showId: number;
    characterId: number;
    text: string;
}

Integrando uma Base de Dados com Lowdb:

E o que seria dos nossos endpoints sem os dados para responder? Como uma bola quadrada – não rola! Em nossa API, vamos utilizar o lowdb — uma solução leve e menos complicada que a encrenca que o Seu Madruga se mete toda vez que tenta evitar o aluguel.

• Introdução ao Lowdb: O lowdb é um banco de dados pequenino que usa arquivos JSON para armazenar os dados. Isso significa que é rápido, simples e não exige que você configure um ambiente de banco de dados inteiro. É como ter sua própria “tenda de refrescos”, sem a complicação de construir um restaurante inteiro.
• Configurando o Lowdb no projeto Next.js: Para colocar o lowdb em ação, você só precisa de algumas linhas de código. Vamos instalar o pacote com npm install lowdb e depois criar um arquivo que vai atuar como nosso “conector” de banco de dados. Neste arquivo, vamos inicializar o lowdb e predefinir alguns dados para começar a brincadeira.
• Operações CRUD com Lowdb: Agora que nosso banco de dados JSON está pronto, vamos usá-lo para realizar operações CRUD. Com lowdb, isso é tão fácil quanto a Chiquinha fazendo uma travessura: basta utilizar métodos simples do lodash para adicionar, ler, atualizar e deletar dados no nosso arquivo JSON.

Em /src/lib/db.json, você encontrará um bando de dados com alguns dados para teste.

Criando os Endpoints da API:

Hora de botar a mão na massa e criar nossos próprios endpoints! Como o Seu Madruga diz: “Não existe trabalho ruim, o ruim é ter que trabalhar”. Mas aqui, meu amigo, vai ser um trabalho que até ele ia curtir fazer.

Mas antes, se você não está habituado com a estrutura de rotas do Next, aconselho dar uma lida nessa documentação Defining Routes. Pois ele se utiliza de diversas convenções, tanto na estrutura de pastas, como nos nomes de certos arquivos. Por exemplo, para todas as rotas de API, o Next utiliza a pasta /app/api como base.

• Implementação do endpoint GET /api/shows para listar programas: Nesse endpoint, vamos listar todos os nossos programas favoritos. É só criar um arquivo chamado route.ts dentro de app/api/shows e usar uma função assíncrona exportada que retorna os dados dos programas.
• Detalhamento do endpoint GET /api/shows/{id} para obter um programa específico: Quer detalhes de um programa só? Sem problema! Criamos um arquivo route.ts na pasta shows/[show_id], onde [show_id] vai ser substituído pelo identificador do programa. Essa função vai buscar no banco de dados todas as informações daquele programa.
• Discussão sobre endpoints para episódios, personagens, frases e elenco: Vamos replicar essa lógica para os demais dados. Cada um terá seu arquivo route.ts, dentro de um pasta específica como app/api/shows/[show_id]/episodes, e assim por diante. Seguindo o padrão, os detalhes específicos serão acessados por arquivos route.ts dentro das respectivas pastas [id]. Vai ser organizado que nem a Dona Florinda com seu café da manhã.
• Maneiras de lidar com parâmetros e respostas: Next.js nos dá uma mãozona quando se trata de parâmetros de URL e respostas. Ele tem uns hooks prontos que a gente usa para capturar os parâmetros, e a resposta é só questão de preparar o objeto e enviar de volta com res.json(). Simples assim, não precisa de uma explicação longa como as do Professor Girafales.

Exemplo de implementação do GET /api/shows:

import { NextRequest } from "next/server";

import db from '../../../lib/db';

export async function GET(request: NextRequest) {
  try {
    const shows = db.data.shows;

    return Response.json(shows);
  } catch (error) {
    return Response.json("Internal Server Error.", { status: 500 });
  }
}

Se você ainda estiver com dúvidas, pode acessar o repositório do projeto no nosso GitHub em chaves-chapolin-api.

Conclusão

E aí, como foi para você mergulhar no mundo do desenvolvimento de APIs com Next.js e TypeScript? Espero que tenha sido tão empolgante quanto acompanhar uma tarde de trapalhadas do Chaves e sua turma. Criamos juntos uma API simples, mas poderosa, capaz de listar programas, episódios, personagens e muito mais do universo Chaves e Chapolin.

Ao longo do nosso guia, vimos como o Next.js simplifica a criação de rotas de API e como o TypeScript nos ajuda a evitar erros comuns, garantindo que nossos dados estejam corretos e seguros. E com o lowdb, aprendemos que nem sempre precisamos de soluções complexas para nossos problemas de dados — às vezes, uma simples base de dados JSON é tudo de que precisamos para começar.

Mas não vamos parar por aqui, certo? Assim como o Chapolin sempre encontra novas maneiras de nos surpreender, você também pode expandir o que aprendeu hoje. Tente adicionar novas funcionalidades, experimente com diferentes bases de dados ou até mesmo integre autenticação para dar aquele toque extra de segurança.

Desenvolver é sobre solucionar problemas, criar e se divertir no processo. Espero que você tenha sentido um pouco disso tudo enquanto construímos nossa API. E quem sabe? Talvez o próximo passo seja construir uma interface de usuário para que todos possam ver e interagir com os dados que nossa API fornece.

Não se esqueça de compartilhar sua versão da API, buscar feedback e, claro, continuar codando! O mundo do desenvolvimento está sempre em mudança, assim como os episódios de Chaves — sempre há algo novo para aprender e rir.

---

Agora é sua vez! Leve este projeto adiante e torne-o ainda mais incrível. Compartilhe sua API com outros fãs de Chaves e Chapolin, obtenha feedback e continue melhorando suas habilidades de programação. E se você gostou deste guia, não deixe de comentar e compartilhar. Vamos manter essa comunidade de programadores tão unida quanto os moradores da vila!