Next.js: O Framework React do Futuro

Next.js atualmente é considerado um dos frameworks mais populares do mercado. Graças a sua rapidez e robustez de recursos, o framework também é conhecido por sua versatilidade e flexibilidade, muito poderoso e viável para criação de sites de e-commerce, landing pages, sites de marketing, websites estáticos e com foco em SEO – da criação à garantia de escalabilidade. O Next.js oferece recursos para criação de APIs dentro do próprio projeto, cache, otimização de imagens, etc.

Configuração inicial:

Crie um projeto Next.js:

Com TypeScript adicione a flag --ts

OBS: Ainda há a opção de pode usar um gerenciador de pacotes (NPM, Yearn, PNPM ...):

Fluxo de desenvolvimento:

A criação de páginas acontece de forma bem simples, todos arquivos dentro da pasta pages (com exceção de arquivos de config), são transformado em páginas/rotas.

E todos arquivos dentro da pasta API são transformados em rotas APIs.

Estilização com CSS Modules:

Além da estilização Global, contamos com recurso chamado CSS modules que nos permite criar estilizações a nível de component, ou seja, o estilo é aplicado somente no escopo do component, sem quer que se preocupar com conflitos de nome de classes na nossa aplicação.

É uma grande vantagem adicionar um pré-processador como SASS para trabalhar em conjunto com css modules e criarmos estilos em cascata e mais complexos...

Primeiro devemos criar uma pasta que irá conter o index do component, e criar arquivo de estilização no formato nome do arquivo + extensão module.css, ficando dessa forma por ex.: input.module.css

• Por convenção e organização utilizamos o mesmo nome do component, adicionando apenas a extensão module.css

• Criamos as estilizações, tendo cada estilização com a sintaxe de classe:

.bg {
     display: flex;
     justify-content: center;
     margin: 5% auto;
     width: 600px;
     height: 300px;
     color: #fff;
     background-color: #000;
}

• Importamos o arquivo de estilização no formato de export default, uma convenção é utilizar o nome styles, e utilizamos a estilização do component através da propriedade className do React, acessando a prop da estilização criada no arquivo module.css.

import styles from "./box-container.module.css";

type BoxContainerProps = {
	children?: ReactNode;
};

export const BoxContainer = ({ children }: BoxContainerProps) => {
	return <div className={styles.bg}>{children}</div>;
};

• Resultado final:

Principais funcionalidades do Next.js:

• Renderização no lado do Servidor (SSR).

import { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async () => {
	const fetchUserApi = {
		name: "Gabriel",
		alias: "gbdx",
		age: 23,
	};

	return {
		props: {
			fetchUserApi,
		},
	};
};

Ao utilizar a função SSR, ela será executada a cada requisição feita no client pelo usuário, ou seja, sempre que a página for aberta/atualizada, o servidor do next.js irá buscar pelos dados de uma API por ex., e fornecer esses novos dados para aplicação.

Devemos utilizar essa função em casos que exista uma real necessidade, como por ex.: bloqueio de conteúdos que só podem ser visualizados com acesso especial. Para dados que não seja necessário que os dados sejam atualizados a cada requisição, podemos usufruir da geração de páginas estáticas e assim ter ganhos incomparáveis em relação ao carregamento das páginas.

• Geração de páginas estáticas (SSG).

import { GetStaticProps } from "next";

export const getStaticProps: GetStaticProps = async ({ params }) => {
	const res = await fetch(`https://site-deployed/page/${params.id}`);

	const data = await res.json();

	return {
		props: {
			data,
		},
	};
};

Essa funcionalidade com toda certeza é a cereja do bolo do next.js, com ela conseguimos gerar páginas estáticas pré-renderizadas no momento de build, e assim iram ser renderizadas pelo client sem que o usuário espere o carregamento 🤩. Porém se houver atualizações dos dados, o conteúdo so é refletido na página fazendo um novo build.

• Geração de páginas estáticas de forma incremental (ISG).

import { GetStaticProps } from "next";

export const getStaticProps: GetStaticProps = async ({ params }) => {
	const res = await fetch(`https://site-deployed/page/${params.id}`);

	const data = await res.json();

	const thirtySeconds = 30 * 1000;

	return {
		props: {
			data,
		},
		revalidate: thirtySeconds,
	};
};

Podemos gerar páginas estáticas, com conteúdo sendo atualizado de forma incremental a cada período de tempo. Ou seja, irá atualizar automaticamente sem precisar fazer um novo build para que os novos dados sejam refletidos no página. Para isso utilizamos a prop revalidate definindo o tempo em segundos, e o next.js fica responsável de atualizar o conteúdo sempre que atingir a contagem do tempo definido

• Utilizando páginas estáticas dinâmicas com: getStaticPaths + Static Site Generation (SSG)

import { GetStaticPaths } from "next";

export const getStaticPaths: GetStaticPaths = async () => {
	const res = await fetch("https://site-deployed/page");

	const data = await res.json();

	const paths = data.map(post => ({
		params: { id: post.id.toString() },
	}));

	return {
		paths,
		fallback: false,
	};
};

Quando precisamos gerar páginas estáticas que são acessadas de forma dinâmica através de parâmetros da url, precisamos informar para o Next.js todas as rotas existentes da aplicação, para quando realizarmos o build ele criar a rota para todas páginas.

Para resolver esse problema, utilizamos a função getStaticPaths que será responsável por gerar todas as rotas. Essa função deve retornar um objeto com uma propriedade chamada params, e essa propriedade contém uma matriz/lista de objetos. Dentro de cada objeto fornecemos o nome da rota para a propriedade que é o mesmo nome que colocamos no arquivo de rota dinâmica, como nesse ex.: [uid] , que poderia ser chamado de [slug], etc.

Podemos recuperar o valor digitado no parâmetro da url, na função do getStaticProps e utilizarmos um filtro no nosso fetch que irá buscar e gerar todas páginas estáticas para o uuid/slug do getStaticPaths. Assim teremos todas páginas com todas rotas definidas de forma estáticas, e essa página será exibida dinamicamente conforme sua rota.

import { GetStaticProps } from "next";

export const getStaticProps: GetStaticProps = async ({ params }) => {
	const queryApiWithParamsId = params.id;

	const res = await fetch(`https://site-deployed/page/${queryApiWithParamsId}`);

	const data = await res.json();

	return {
		props: {
			data,
		},
	};
};

Conclusão

Em resumo, o Next.js é uma ferramenta essencial para desenvolver aplicativos React mais sofisticados, pois oferece recursos avançados como SSR e SSG. Com sua estrutura otimizada para o desenvolvimento de aplicativos escaláveis, o Next.js torna a construção de aplicativos web ainda mais fácil e produtiva.

Se você está procurando uma maneira eficiente de criar aplicativos React poderosos, visite a documentação oficial do NEXT.Js e evolua com o framework.