Next.js é um framework React de código aberto criado por uma empresa privada chamada Vercel. Ele traz uma série de recursos adicionais ao React, como renderização do lado do servidor, pré-captura de dados e suporte a TypeScript para nomear alguns.
O React por sua vez, é um framework JavaScript criado pelo Facebook (Meta) em 2013. A união das duas tecnologias torna a vida de quem desenvolve muito mais fácil. Principalmente porque podemos reutilizar inúmeros componentes prontos disponíveis em vários lugares da web.
Velocidade vem de fábrica
Velocidade é peça fundamental para o sucesso de um negócio virtual. Seja ele um e-commerce, aplicação ou mesmo um blog.
Embora a web seja dinâmica, a maioria do conteúdo que carregamos é estático ou quase-estático. Isto é, não precisa ser atualizado com frequência.
A exemplo de um e-commerce como o Magenteiro.com, onde sua página inicial possui produtos em destaque e algumas notícias vindas do blog, a maior parte do conteúdo é estático.
Os produtos são trazidos de uma categoria de destaque, enquanto os posts do blog são criados a um ritmo semanal.
Com o uso do Next.js seria possível buscar este conteúdo de forma simples no backend e gerar uma página html 100% estática para ser servida no frontend. Com um único parâmetro, podemos especificar a validade dessas propriedades, e o Next automaticamente buscaria elas novamente quando este “cache” expirasse.
Quer ver isso na prática?
Começando uma aplicação Next.js
Tendo o Node.js instalado em sua máquina, abra o terminal e digite:
npx create-next-app magenteiro
Isso criará uma pasta chamada “magenteiro” e o seu primeiro projeto Next.
Digite code magenteiro para abrir o projeto no Visual Studio Code (opcional).
Em seguida, entre na pasta que acabamos de criar, e digite npm run dev.
Pronto. Você acabou de criar uma aplicação next e ela está disponível no URL exibido na tela (por padrão http://localhost:3000).
Criando a página inicial do e-commerce mais rápido do mundo
Na pasta pages você encontra arquivos que representam as rotas e páginas da sua aplicação.
Crie um arquivo index.jsx em /pages/loja com o seguinte conteúdo:
import Image from "next/image";
export default function Loja(props) {
return (
<>
<h1 style={{ textAlign: "center" }}>Produtos em Destaque</h1>
<div
style={{
display: "flex",
width: "80%",
margin: "auto",
flexWrap: "wrap",
}}
>
{props.products.map((product) => {
return (
<div key={product.title} style={{ width: "460px", margin: "10px" }}>
<Image
src={product.thumbnail}
width={460}
height={230}
objectFit="cover"
style={{ borderRadius: "10px" }}
/>
{product.title} - ${product.price}
</div>
);
})}
</div>
</>
);
}
export async function getStaticProps(context) {
const req = await fetch("https://dummyjson.com/products");
const products = await req.json();
return {
props: products,
};
}
Em seguida, adicione as linhas em destaque ao seu arquivo /next.config.js.
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
domains: ['dummyjson.com']
}
}
module.exports = nextConfig
Você acabou de criar uma listagem de produtos com fotos, a partir de um webservice externo.
Caso esteja executando o npm run dev acima, pare ele apertando Ctrl + C no terminal.
Em seguida, ainda no terminal digite npm run build && npm run start. Isso irá compilar todo conteúdo estático que precisamos, incluindo aqueles requeridos pelo método getStaticProps, e em seguida inicializará o servidor em modo produção.
Pronto! Sua nova loja está no ar. Acesse http://localhost:3000/loja para ver o resultado.
Note que todas as imagens foram redimensionadas, otimizadas, transformadas para webp (formato web moderno e reduzido) e as imagens que não são exibidas na tela só são carregadas durante a rolagem.
Tudo isso foi gerado do lado do servidor de forma estática, e as consultas ao webservice (https://dummyjson.com/products) foi feita uma única vez.
Se nossa página tivesse links, também seria possível fazer com que os links fossem pré-carregados durante o tempo ocioso do navegador, e a próxima página clicada iria carregar ainda mais rápido.
Fantástico, não é mesmo?
Esta poderia ser uma loja Magento, afinal, o Magento possui APIs Rest e GraphQl que nos permitem fazer a mesma coisa para buscar produtos, criar pedidos, e muito mais.
Quer ver como fazer isso com Magento? Logo mais…
Dá pra fazer mais ainda (#vemaí)
Ao longo dos últimos meses venho preparando um novo curso… (e por isso não tivemos artigos semanais por aqui nas últimas duas semanas).
Next.js – O começo de uma nova era. – Aprenda a criar aplicações e e-commerces extremamente rápidos.
Neste curso você vai aprender:
- O Básico de React;
- As principais funcionalidades do Next.js;
- Como reutilizar componentes;
- Como usar Sass Css no Next.js
- Como usar TailwindCss com Next.js
- Onde encontrar e como usar milhares de componentes pré-prontos em seus projetos;
- e claro: Como criar uma loja virtual com Magento e Next.js
Você pode acompanhar o conteúdo do curso e seu lançamento neste link, ou deixe seu nome e e-mail para ser avisado em primeira mão. Se você já faz parte do Clube Magenteiro, este curso estará disponível pra você em primeira mão.
Nos vemos no curso! Até lá!
- PagSeguro (PagBank) para Magento 1 recebe a Nova Geração - 9 de abril de 2024
- Recorrência no WooCommerce Sem Plugins Pagos - 28 de janeiro de 2024
- Chargeback. O que é, e como se livrar deles. - 19 de dezembro de 2023
Deixe seu comentário
[fbcomments url="https://www.magenteiro.com/blog/magento-2/comecando-com-nextjs-e-react/"]