A criação de aplicações usando Next.js, e sua incrementação com React.

No desenvolvimento de uma aplicação, já pensou em quanto tempo se leva criando uma interface agradável para o público alvo? Muitas vezes se é feito por um outro grupo ou em etapas, mas digamos que esteja fazendo sozinho. Como programar exige tempo e atenção, é possível que gaste tempo um tempo precioso estilizando e modificando sua interface, quando poderia focar em sua lógica,e funcionamento. No artigo de hoje, falaremos um pouco sobre frameworks e o uso do Next.js no React.

*O que são FrameWorks? *

Os frameworks no React são um conjuntos de bibliotecas e ferramentas que ajudam a estruturar e gerenciar aplicativos React complexos. Eles fornecem estruturas para a organização de componentes, roteamento, gerenciamento de estado e muito mais. A utilização de um framework pode reduzir o tempo de desenvolvimento, aprimorar a escalabilidade e garantir a manutenção do código.

Ao todo, seriam um ambiente preparado com diversos componentes para otimizar a velocidade de criação do seu código.

Entendendo Next.Js

O Next.js é um framework do React que permite a criação de aplicativos da web com servidor e cliente em um só lugar. Ele fornece renderização do lado do servidor (SSR) para melhorar o desempenho e a SEO(SEO significa _Search Engine Optimization _. O objetivo do SEO é criar uma estratégia que aumentará sua posição no ranking nos resultados dos mecanismos de pesquisa.), além de suporte a rotas dinâmicas e geração de páginas estáticas. O Next.js também oferece um sistema de plug-in extensível para aprimorar recursos como análise, otimização de imagens e muito mais.

Ele é muito útil para aplicativos que requerem renderização do lado do servidor ou que precisam melhorar a velocidade de carregamento, especialmente para páginas com conteúdo dinâmico. Ele também é adequado para aplicativos com muitas rotas e para equipes que desejam uma estrutura padrão para seus aplicativos.

Instalando Next.Js

Para instalar o Next.js seguimos os seguintes comandos:

npm install next react react-dom
# or
yarn add next react react-dom
# or

Feito isso, podemos iniciar um projeto:

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or

//caso queira inserir typescript em seu projeto

Fazemos também as seguintes configurações no package.json:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

O Next.js é construído em torno do conceito de páginas. Uma página é um componente React exportado de um arquivo .js, .jsx, .ts ou .tsx no diretório pages. Você pode até adicionar parâmetros de rota dinâmica com o nome do arquivo.

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

Também conseguimos ver o uso do Next.js obtendo a URL de uma página, veja:

import React from 'react';
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post {id}</h1>
    </div>
  );
};

export default Post;

Este é um componente funcional em React que usa o hook useRouter do Next.js para obter o parâmetro id da URL da página atual e exibir o número do post.

O import React from 'react'; importa o pacote React para usar em um componente React.

O import { useRouter } from 'next/router'; importa o hook useRouter do pacote next/router para lidar com a rota atual do Next.js.

Em seguida, temos a declaração do componente Post, que é uma função sem parâmetros que retorna um elemento JSX. Dentro da função, usamos o useRouter para obter o objeto router e, em seguida, desestruturamos o objeto query de router para obter o parâmetro id da URL.

Por fim, o componente retorna um elemento

com um elemento de cabeçalho

que exibe o número do post obtido através do parâmetro id.

export default Post; exporta o componente Post como um módulo para ser importado e usado em outros lugares do código.

Os frameworks do React são ferramentas poderosas que ajudam a simplificar o processo de desenvolvimento de aplicativos web. Eles fornecem aos desenvolvedores uma estrutura sólida para criar aplicativos com eficiência e qualidade. Hoje citamos o Next.js, mas existem outros como o Gatsby e outros exemplos dos muitos frameworks disponíveis para React. A escolha do framework certo depende das necessidades específicas.