Entendendo Next.js e aplicando suas funcionalidades

Next.js é um framework React focado em produção e eficiência criado e mantido pela equipe Vercel, Nextjs é projetado para reunir recursos como renderização de conteúdo misto e estático, suporte a TypeScript, pré-busca, sistema de roteamento, pacotes de recursos e vários Plugins, juntamente com exemplos para acelerar o desenvolvimento, fornecem uma estrutura completa para iniciar seu projeto.

Next.js é uma estrutura de código aberto hospedada no github sob a licença do MIT. Veja quem está usando o Next.js e tem um bom crescimento no mercado.

Com todos esses recursos pré-configurados, é como um aplicativo create react onde você pode iniciar seu projeto muito rapidamente sem se preocupar com a configuração do webpack, estrutura de pastas, configuração de roteamento, etc.

Integrando o Typescript ao projeto com Next.js

Primeiramente, é importante entender que gerar um projeto com Next.js é muito parecido com criar um projeto React, porém, o comando para criar o projeto seria:

Se você usar fios:

yarn create next-app nome-do-seu-projeto

Se você estiver utilizando o npm:

npx create-next-app nome-do-seu-projeto

Uma vez que o projeto é criado, assim como no React, você verá algo como clichê com algumas pastas e arquivos.

Para integrar o Typescript em seus projetos, basta instalar os pacotes, como abaixo:

Utilizando o yarn:

yarn add typescript @types/react @types/node –D

Utilizando o npm:

npm install typescript @types/react @types/node –D

Uma vez que o projeto é criado, assim como no React, você verá algo como clichê com algumas pastas e arquivos. Após instalar esses pacotes, basta alterar o arquivo para ts ou tsx. Fora isso, para colocar seu aplicativo em execução, basta executar yarn dev ou npm run dev, dependendo de qual gerenciador de pacotes você usa.

Um arquivo tsconfig.json será gerado automaticamente com todas as configurações necessárias para usar o Typescript.

Roteamento das páginas

Um recurso muito legal do Next é como ele lida com o roteamento de páginas. Não há necessidade de fazer qualquer tipo de configuração ou qualquer biblioteca para lidar com o roteamento.

Nesse sentido, basta criar uma página na pasta “pages” e o próprio Next.js entenderá que o arquivo “.tsx” é um caminho acessível. Esse comportamento facilita a criação e o roteamento de páginas.

Quando você cria um arquivo na pasta “pages”, o Next.js assume automaticamente que o nome do arquivo é um endereço acessível para seu aplicativo.

Se você precisar criar um arquivo ou pasta nessa pasta que não será considerado um endereço, basta adicionar “_” antes do nome do arquivo ou pasta, assim como o arquivo “_app.tsx”.

Ainda no recurso de roteamento do Next, é importante discutir o roteamento dinâmico. Se você precisar passar parâmetros ou nomes de produtos, como rotas, basta incluir dois colchetes no nome da página.

Tratamento de dados vindos de uma API

Então, para mostrar como o Next trata as requisições da API, vamos criar uma API de exemplo usando json-server, que já nos traz muitas funcionalidades.

Só para exemplificar, segue abaixo o código da nossa API:

{

  "categories": [

    { "id": "teclados", "title": "Teclados" },

    { "id": "notebooks", "title": "Notebooks" },

    { "id": "armazenamento", "title": "SSD" },

    { "id": "gabinetes", "title": "Gabinetes" },

    { "id": "mouses", "title": "Mouses" }

  ],

  "products": [

    { "id": 1, "title": "Teclado Mecânico", "price": 350, "category_id": "teclados", "slug": "teclado-mecanico"},

    { "id": 2, "title": "Mouse Gamer", "price": 120.9, "category_id": "mouses", "slug": "mouse-gamer"},

    { "id": 3, "title": "SSD 512GB", "price": 650.45, "category_id": "ssd", "slug": "ssd-512gb"},

    { "id": 4, "title": "Notebook Gamer", "price": 7000, "category_id": "notebooks", "slug": "notebook-gamer"},

    { "id": 5, "title": "Monitor Gamer", "price": 2000, "category_id": "monitores", "slug": "monitor-gamer"},

    { "id": 6, "title": "Gabinete Gamer", "price": 500, "category_id": "gabinetes", "slug": "gabinete-gamer"}

  ],

  "recommended": [

    { "id": 1, "title": "Teclado Mercânico", "price": 350, "category_id": "teclados", "slug": "teclado-mecanico"},

    { "id": 4, "title": "Notebook Gamer", "price": 7000, "category_id": "notebooks", "slug": "notebook-gamer"}

  ]

}

Como primeiro exemplo, vamos falar sobre a busca do lado do cliente para usar esta API. Essa abordagem é a maneira mais tradicional de obter informações de uma API no React: por exemplo, usando useEffect.

A estratégia Client Side Fetching deve ser usada apenas quando as informações da API não precisam ser indexadas pelos mecanismos de pesquisa, pois a chamada de useEffect será acionada apenas no navegador, ou seja, o conteúdo da página não será renderizado no lado do servidor. Você pode observar esse comportamento desabilitando o javascript do seu navegador.

Quando o javascript estiver desabilitado, as informações da API via useEffect não serão exibidas em nenhum momento. Aqui está o código de implementação para este conceito:

import React, { FormEvent, useEffect, useState } from 'react';

import api from '../service/api';

interface IProducts {

    id: number;

    title: string;

}

 

export default function Home() {

    const [products, setProducts] = useState<IProducts[]>([]);

 

// Chamada à API utilizando o Client Side Fetching

    useEffect(() => {

        api.get('http://localhost:3333/products').then(response => {

          setProducts(response.data);

        })

    }, []);

 

    return (

        <div>

          <h1>Products</h1>

        

          <section>

            <ul>

              {products.map(product => {

                  return (

                      <li key={product.id}>

                        {product.title}

                      </li>

                    )

                })}

            </ul>

          </section>

        </div>

      )

}

 

export default Home;