O que é Next.js? Uma Análise do Popular Framework JavaScript

Com o Next.js denominado framework React para produção, é possível construir e implantar rapidamente aplicativos de grande escala e prontos para empresas que utilizam o Next.js.

O que é Next.js?

O Next.js é um framework React que permite construir sites e aplicativos web estáticos otimizados, altamente interativos e focados na experiência do usuário. Conhecido por proporcionar a melhor experiência para desenvolvedores na construção de aplicativos prontos para produção, com todas as funcionalidades necessárias.

Por que usar Next.js?

Nesta seção, exploraremos as razões pelas quais você deve aprender Next.js, além de analisarmos os diferentes aplicativos que você pode construir com ele.

Otimizações de imagem

O Next.js oferece otimização automática de imagens com builds instantâneos. A otimização de imagens é uma funcionalidade poderosa já integrada no Next.js, uma vez que gerenciar e otimizar imagens requer muitas configurações, e quando feito manualmente, pode consumir muito do seu tempo.

Internacionalização

Outra ótima funcionalidade do Next.js é a internacionalização. Isso permite que um aplicativo empresarial seja facilmente utilizado e traduzido em diferentes idiomas em todo o mundo. Esse recurso é uma extensão do Next.js e faz com que ele seja reconhecido internacionalmente, já que a configuração de internacionalização é simplificada.

Análises do Next.js

Zero configuração

Next.js compila e constrói automaticamente, com atualizações instantâneas, sem a necessidade de configurações extras, além de escalar e otimizar automaticamente seu aplicativo de produção.

Suporte pré-construído para SSR, SSG e CSR

Com o Next.js, você tem suporte ao SSR (Server-side rendering), SSG (Static site generation) e CSR (Client-side rendering) em um único aplicativo. Você pode decidir o tipo de aplicativo que deseja criar e como pretende implantar seu aplicativo para melhor atender ao seu caso de uso.

Aplicativos desenvolvidos com o Next.js

TikTok

TikTok é uma plataforma social de vídeos on-line onde os usuários carregam vídeos para dispositivos móveis de formato curto, com milhões de usuários diários.

A página web do TikTok foi desenvolvida usando o Next.js, uma plataforma que permite escalabilidade, sendo otimizada para suportar milhões de usuários ativos diariamente.

Hashnode

Hashnode é uma plataforma gratuita de blogs on-line voltada para desenvolvedores, com milhões de usuários registrados.

Twitch Mobile

Twitch é uma plataforma social on-line para conversar, interagir e desfrutar de diferentes tipos de conteúdo e entretenimento.

Hulu

Hulu é uma plataforma de streaming similar à Netflix, permitindo aos usuários assistir filmes e programas de TV on-line.

Binance

Para saber mais empresas e sites usando Next.js, você pode visitar a página oficial do Next.js para mais informações.

O que você pode construir

Abaixo está uma lista de aplicativos que você pode construir com o Next.js:

• MVP (Minimum Viable Product)
• Jamstack websites
• Web Portals
• Single web pages
• Static websites
• SaaS products
• E-commerce and retail websites
• Dashboards
• Complex and demanding web applications
• Interactive user interfaces

Funcionalidades do Next.js

Roteamento

O Next.js utiliza um sistema de rotas baseado em arquivos da pasta de páginas para estruturar como a navegação do seu aplicativo será feita. Cada arquivo ou pasta criada na pasta páginas é automaticamente convertido em uma rota no Next.js.

O sistema de roteamento Next.js está dividido em 3 tipos diferentes:

Roteamento de índice

A pasta de páginas tem o arquivo index.js automaticamente, que se torna a rota para a página inicial /. Você também pode definir um arquivo index.js para todas as suas rotas em qualquer pasta. Por exemplo, você pode definir pages/profiles/index.js, que será automaticamente mapeado para a página /profiles.

Considere este exemplo:

- pages
  - index.js
  - profile
    - index.js
    - [user].js

A estrutura da página acima mapeia pastas e arquivos para uma estrutura de URL. Por exemplo, pages/index.js, pages/profile/index.js para /profile/ e pages/profile/user.js para /profile/user.

Rotas aninhadas

Rotas aninhadas são criadas dentro de uma rota principal. Para criar uma rota aninhada, você precisa criar uma rota/pasta principal na pasta pages e adicionar outras pastas ou arquivos dentro dela para criar uma rota aninhada.

Dê uma olhada neste exemplo:

- pages
  - index.js
  - dashboard
    - index.js
    - user.js

No script acima, os arquivos user.js e index.js estão aninhados com a rota do painel principal, o que significa que as URLs só podem ser acessadas com a rota do painel.

Rotas dinâmicas

As rotas dinâmicas são aquelas que não são fixas e podem ser geradas por meio de chamadas de API ou pela atribuição de um ID, ou slug à URL.

Para criar uma rota dinâmica no Next.js, basta adicionar um par de colchetes [id].js ao redor do nome do arquivo ou do diretório. Você pode nomear o arquivo ou diretório com qualquer nome da sua escolha, mas os colchetes [] devem estar presentes para torná-lo dinâmico.

Veja este exemplo:

- pages
  - dashboard
    - [user].js
        - profile

O script acima torna o [user].js dinâmico, o que significa que a página de perfil deve ser acessada com /dashboard/2/profile ou /dashboard/johndoe/profile.

Da documentação oficial, você pode aprender mais e diferentes truques para criar um sistema de roteamento mais avançado no Next.js.

Servindo arquivos estáticos

No Next.js, servir arquivos estáticos ou ativos como ícones, fontes auto-hospedadas ou imagens é feito através da pasta public, a única fonte de verdade para ativos estáticos.

A pasta public não deve ser renomeada de acordo com os documentos do Next.js. Servir ativos estáticos através da pasta public é muito simples, de acordo com como o Next.js o configurou.

Pré-renderização

Uma das enormes funcionalidades do Next.js é a pré-renderização, o que faz o Next.js funcionar muito bem e rápido. Next.js pré-renderiza cada página gerando cada página HTML com antecedência com o JavaScript mínimo que eles precisam para rodar através de um processo conhecido como Hydration.

Há duas formas de pré-renderização no Next.js:

1. Server-side Rendering (SSR)
2. Static Generation (SG)

A diferença crucial entre SG e SSR está na forma como os dados são buscados. No SG, os dados são buscados em tempo de construção e reutilizados em cada solicitação (o que o torna mais rápido porque pode ser armazenado em cache), enquanto no SSR, os dados são buscados em cada solicitação.

Importações absolutas

A partir do Next.js 9.4, foram introduzidas as importações absolutas, o que significa que você não precisa mais importar componentes com diretórios relativamente longos.

Por exemplo, você não precisa importar componentes como o que está abaixo:

import InputField from "../../../../../../components/general/forms/inputfield"

Mas você usa o seguinte estilo para importar componentes:

import InputField from "components/general/forms/inputfield";

Navegando entre as páginas

O Next.js fornece o componente next/link para navegação entre páginas. Para navegar entre as páginas em seu aplicativo, você pode utilizar o componente Link exportado por next/link.

Assumindo que você tenha essas estruturas de página em sua pasta pages e queira vincular as páginas entre si, você pode fazer isso usando o seguinte script:

- pages
  - index.js
  - profile.js
  - settings.js
  - users
    - index.js
    - [user].js

Você faz um link para as páginas usando este script abaixo:

import Link from "next/link";

export default function Users({users) {
  return (
    <div>
      <Link href="/">Home</Link>
      <Link href="/profile">Profile</Link>
      <Link href="/settings">
        <a> Settings </a>
      </Link>
      <Link href="/users">
        <a> Settings </a>
      </Link>
      <Link href="/users/bob">
        <a> Settings </a>
      </Link>
    </div>
  )
}

Estilização

O Next.js permite que você crie e tenha quantos estilos forem necessários em seu projeto. Por padrão, o Next.js vem com três estilos diferentes: CSS global, CSS Modules e style-jsx.

Desvantagens do Next.js

Como qualquer coisa boa, o Next.js tem suas desvantagens, que você deve considerar antes de usá-lo em seu próximo projeto. Nesta seção, vamos explorar as desvantagens do Next.js.

Custo de desenvolvimento e manutenção

Com o Next.js, a flexibilidade vem com altos custos de desenvolvimento e manutenção. Para fazer alterações e manter o aplicativo, você precisará de um desenvolvedor Next.js dedicado e um especialista em frontend que irá custar mais.

Falta de gerenciador de estado integrado

O Next.js não possui suporte nativo para gerenciamento de estado. Se você precisar de algum gerenciador de estado, terá que instalá-lo e usá-lo como faria com o React.

Falta de plugins

Com o Next.js, você não terá acesso a muitos plugins de fácil adaptação.

Como criar um aplicativo Next.js

Esta seção explorará o uso prático do Nuxtjs e como criar um aplicativo NuxtJS. No entanto, vamos explorar alguns dos poucos conceitos essenciais no desenvolvimento de um aplicativo Nuxtjs.

Criando um aplicativo Next.js

Criar um novo projeto Next.js é muito fácil e direto ao ponto. Você pode criar um projeto Next.js de maneiras diferentes, mas a abordagem mais preferida e recomendada é a CLI.

Para criar um novo aplicativo Next.js com CLI, certifique-se de ter o npx instalado (o npx é enviado por padrão desde o npm 5.2.0) ou o npm v6.1, ou yarn.

Em seguida, digite o seguinte comando na pasta onde você deseja colocar seu projeto Next.js:

npx create-next-app
// Follow the instructions to create your first Next.js project.
cd <project-name>
npm run dev

Certifique-se de substituir o <project-name> pelo nome real do seu projeto. Você pode então começar a criar diferentes páginas e componentes requeridos pelo seu projeto.

Elementos do Next.js

Ao criar um novo projeto Next.js, você notará que ele vem com diferentes elementos, páginas e estruturas de pasta que podem ser esmagadoras para iniciantes. No entanto, vamos explorar alguns dos elementos do Next.js abaixo.

Estrutura de pastas

Após criar um novo projeto Next.js por meio de uma CLI, você notará um aplicativo Next.js com uma árvore de pastas enxuta. Essa estrutura de pasta padrão é o mínimo necessário para executar um aplicativo Next.js. Quando você começa a construir seu projeto, terá mais pastas e arquivos do que o framework inicialmente.

As únicas pastas específicas do Next.js são as pastas pages, public e styles. Elas não devem ser renomeadas, a menos que você esteja preparado para ajustar configurações adicionais.

Abaixo está a estrutura padrão de pastas para um novo projeto Next.js:

# other files and folders, .gitignore, package.json...
- pages
  - api
    - hello.js
  - _app.js
  - index.js
- public
  - favicon.ico
  - vercel.svg
- styles
  - globals.css
  - Home.module.css

Pages

Pages são uma das próximas pastas específicas, e abaixo estão algumas coisas que você precisa saber sobre as páginas do Next.js.

As páginas são componentes React, e cada arquivo na pasta pages é uma página da web, e cada página da web é um componente React. Por exemplo, temos um componente React dentro da pasta pages, que resulta em uma URL de página da web.

// Location: /pages/index.js
//  is just a basic React component
export default Index() {
  return <h1>Welcome to Home</h1>
}

Next.js já vem com páginas personalizadas pré-criadas com prefixos de sublinhado, como _app.js e _document.js. O _app.js é usado para inicializar as páginas e está localizado dentro da pasta “pages“, enquanto o _document.js altera as tags <html> e <body> do aplicativo.

Além disso, o Next.js usa um sistema de roteamento baseado em arquivos com base nas páginas, em que cada página automaticamente se torna uma rota com base no nome do arquivo. Por exemplo, uma página em pages/user será localizada em /user, e pages/index.js em /.

Resumo

O Next.js é uma ótima opção para construir aplicativos de produção empresariais usando React, pois foi projetado para simplificar a construção de aplicativos com suas ferramentas e configurações. Neste guia, exploramos os recursos do framework e identificamos porque você deve construir seus próximos aplicativos empresariais usando o Next.js. Mesmo se você nunca usou o Next.js antes, existem muitas razões para experimentá-lo.

Deixe um comentário sobre o que você irá construir com esses novos recursos!