Até este ponto, você tem usado React para construir interfaces de usuário. Se você precisasse de recursos adicionais como roteamento, então teria que importar uma biblioteca de terceiros como React Router para poder alternar entre as diferentes views. Mas o que acontece quando você precisa construir uma aplicação web full-stack? Bem, você poderia usar React para o front-end e usar Node e Express para a lógica do back-end se você quiser ficar apenas com JavaScript. Ou você poderia usar outras linguagens como Go, Python ou Java para o seu back-end. Embora todas essas sejam opções viáveis, há momentos em que você pode querer usar um framework React em vez disso. Frameworks React fornecem recursos como roteamento, otimizações de imagem, busca de dados, autenticação e mais. This means that you might not need to set up separate front-end and back-end applications for certain use cases. Vamos dar uma olhada mais de perto no Next.js que é um framework React popular. Uma das principais funcionalidades do Next.js é o roteador baseado no sistema de arquivos. Este sistema de roteamento inclui suporte para rotas dinâmicas, rotas paralelas, manipuladores de rota, redirecionamentos, internalização e mais. Aqui está um exemplo de como criar um manipulador de requisição personalizado:

export async function GET() {
  const res = await fetch("https://example-api.com");
  const data = await res.json();

  return Response.json({ data });
}

Você pode definir manipuladores de rota como requisições GET ou POST em um arquivo chamado route.js dentro do diretório app/api. Outra funcionalidade do Next.js são as otimizações automáticas de imagens e fontes. Aqui está um exemplo de como trabalhar com o componente Image dentro de um arquivo page.js:

import Image from "next/image";

export default function Page() {
  return (
    <Image src="link-to-image-goes-here" alt="descriptive-title-goes-here" />
  );
}

O componente Image estende o elemento nativo HTML img e permite carregamentos de página mais rápidos e otimizações de tamanho. Isso significa que as imagens só serão carregadas quando entrarem na viewport e o componente Image servirá automaticamente imagens com o tamanho correto para cada dispositivo. Embora essas sejam apenas algumas funcionalidades do Next.js, existem muitas outras funcionalidades que você pode usar para construir aplicações web full-stack robustas. Também existem outros frameworks React como Remix que oferecem a mesma capacidade de construir aplicações web full-stack modernas. Embora o cenário de bibliotecas e frameworks JavaScript esteja em constante mudança, é importante estar ciente das opções disponíveis para você e aprender sobre os prós e contras de cada framework.