A criação de aplicações usando Next.js, e sua incrementação com React.
Tags: javascript, programming
Published: 2023-03-15 16:13:41

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 <div> com um elemento de cabeçalho <h1> 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.