{"id":3918,"date":"2022-10-25T04:15:19","date_gmt":"2022-10-25T07:15:19","guid":{"rendered":"https:\/\/www.magenteiro.com\/blog\/?p=3918"},"modified":"2023-04-03T01:34:39","modified_gmt":"2023-04-03T04:34:39","slug":"comecando-com-nextjs-e-react","status":"publish","type":"post","link":"https:\/\/www.magenteiro.com\/blog\/magento-2\/comecando-com-nextjs-e-react\/","title":{"rendered":"Come\u00e7ando com Next.js e React"},"content":{"rendered":"\n

Next.js \u00e9 um framework React de c\u00f3digo aberto criado por uma empresa privada chamada Vercel. Ele traz uma s\u00e9rie de recursos adicionais ao React, como renderiza\u00e7\u00e3o do lado do servidor, pr\u00e9-captura de dados e suporte a TypeScript para nomear alguns.<\/p>\n\n\n\n

O React por sua vez, \u00e9 um framework JavaScript criado pelo Facebook (Meta) em 2013. A uni\u00e3o das duas tecnologias torna a vida de quem desenvolve muito mais f\u00e1cil. Principalmente porque podemos reutilizar in\u00fameros componentes prontos dispon\u00edveis em v\u00e1rios lugares da web.<\/p>\n\n\n\n

Velocidade vem de f\u00e1brica<\/h2>\n\n\n\n

Velocidade \u00e9 pe\u00e7a fundamental para o sucesso de um neg\u00f3cio virtual. Seja ele um e-commerce, aplica\u00e7\u00e3o ou mesmo um blog.<\/p>\n\n\n\n

Embora a web seja din\u00e2mica, a maioria do conte\u00fado que carregamos \u00e9 est\u00e1tico ou quase-est\u00e1tico. Isto \u00e9, n\u00e3o precisa ser atualizado com frequ\u00eancia.<\/p>\n\n\n\n

A exemplo de um e-commerce como o Magenteiro.com, onde sua p\u00e1gina inicial possui produtos em destaque e algumas not\u00edcias vindas do blog, a maior parte do conte\u00fado \u00e9 est\u00e1tico. <\/p>\n\n\n\n

Os produtos s\u00e3o trazidos de uma categoria de destaque, enquanto os posts do blog s\u00e3o criados a um ritmo semanal.<\/p>\n\n\n\n

Com o uso do Next.js seria poss\u00edvel buscar este conte\u00fado de forma simples no backend e gerar uma p\u00e1gina html 100% est\u00e1tica para ser servida no frontend. Com um \u00fanico par\u00e2metro, podemos especificar a validade dessas propriedades, e o Next automaticamente buscaria elas novamente quando este “cache” expirasse.<\/p>\n\n\n\n

Quer ver isso na pr\u00e1tica?<\/p>\n\n\n\n

Come\u00e7ando uma aplica\u00e7\u00e3o Next.js<\/h2>\n\n\n\n

Tendo o Node.js<\/a> instalado em sua m\u00e1quina, abra o terminal e digite:<\/p>\n\n\n\n

npx create-next-app magenteiro<\/code><\/p>\n\n\n\n

Isso criar\u00e1 uma pasta chamada “magenteiro” e o seu primeiro projeto Next.<\/p>\n\n\n\n

Digite code magenteiro<\/code> para abrir o projeto no Visual Studio Code (opcional).<\/p>\n\n\n\n

Em seguida, entre na pasta que acabamos de criar, e digite npm run dev<\/code>.<\/p>\n\n\n\n

Pronto. Voc\u00ea acabou de criar uma aplica\u00e7\u00e3o next e ela est\u00e1 dispon\u00edvel no URL exibido na tela (por padr\u00e3o http:\/\/localhost:3000).<\/p>\n\n\n\n

\"P\u00e1gina<\/figure>\n\n\n\n

Criando a p\u00e1gina inicial do e-commerce mais r\u00e1pido do mundo<\/h2>\n\n\n\n

Na pasta pages<\/code> voc\u00ea encontra arquivos que representam as rotas e p\u00e1ginas da sua aplica\u00e7\u00e3o.<\/p>\n\n\n\n

Crie um arquivo index.jsx<\/code> em \/pages\/loja<\/code> com o seguinte conte\u00fado:<\/p>\n\n\n\n

import Image from \"next\/image\";\n\nexport default function Loja(props) {\n  return (\n    <>\n      <h1 style={{ textAlign: \"center\" }}>Produtos em Destaque<\/h1>\n      <div\n        style={{\n          display: \"flex\",\n          width: \"80%\",\n          margin: \"auto\",\n          flexWrap: \"wrap\",\n        }}\n      >\n        {props.products.map((product) => {\n          return (\n            <div key={product.title} style={{ width: \"460px\", margin: \"10px\" }}>\n              <Image\n                src={product.thumbnail}\n                width={460}\n                height={230}\n                objectFit=\"cover\"\n                style={{ borderRadius: \"10px\" }}\n              \/>\n              {product.title} - ${product.price}\n            <\/div>\n          );\n        })}\n      <\/div>\n    <\/>\n  );\n}\n\nexport async function getStaticProps(context) {\n  const req = await fetch(\"https:\/\/dummyjson.com\/products\");\n  const products = await req.json();\n\n  return {\n    props: products,\n  };\n}\n<\/pre>\n\n\n\n
Em seguida, adicione as linhas em destaque ao seu arquivo \/next.config.js<\/code>.<\/p>\n\n\n\n
\/** @type {import('next').NextConfig} *\/\nconst nextConfig = {\n  reactStrictMode: true,\n  swcMinify: true,\n  images: {\n    domains: ['dummyjson.com']\n  }\n}\n\nmodule.exports = nextConfig\n<\/pre>\n\n\n\n
Voc\u00ea acabou de criar uma listagem de produtos com fotos, a partir de um webservice externo.<\/p>\n\n\n\n
Caso esteja executando o npm run dev<\/code> acima, pare ele apertando Ctrl + C no terminal.<\/p>\n\n\n\n
Em seguida, ainda no terminal digite npm run build && npm run start<\/code>. Isso ir\u00e1 compilar todo conte\u00fado est\u00e1tico que precisamos, incluindo aqueles requeridos pelo m\u00e9todo getStaticProps<\/code>, e em seguida inicializar\u00e1 o servidor em modo produ\u00e7\u00e3o.<\/p>\n\n\n\n
Pronto! Sua nova loja est\u00e1 no ar. Acesse http:\/\/localhost:3000\/loja para ver o resultado.<\/p>\n\n\n\n
\"Loja<\/figure>\n\n\n\n
Note que todas as imagens foram redimensionadas, otimizadas, transformadas para webp (formato web moderno e reduzido) e as imagens que n\u00e3o s\u00e3o exibidas na tela s\u00f3 s\u00e3o carregadas durante a rolagem.<\/p>\n\n\n\n
Tudo isso foi gerado do lado do servidor de forma est\u00e1tica, e as consultas ao webservice (https:\/\/dummyjson.com\/products) foi feita uma \u00fanica vez.<\/p>\n\n\n\n
Se nossa p\u00e1gina tivesse links, tamb\u00e9m seria poss\u00edvel fazer com que os links fossem pr\u00e9-carregados durante o tempo ocioso do navegador, e a pr\u00f3xima p\u00e1gina clicada iria carregar ainda mais r\u00e1pido.<\/p>\n\n\n\n
Fant\u00e1stico, n\u00e3o \u00e9 mesmo?<\/strong><\/p>\n\n\n\n
Esta poderia ser uma loja Magento, afinal, o Magento possui APIs Rest<\/a> e GraphQl<\/a> que nos permitem fazer a mesma coisa para buscar produtos, criar pedidos, e muito mais.<\/p>\n\n\n\n
Quer ver como fazer isso com Magento? Logo mais…<\/p>\n\n\n\n
D\u00e1 pra fazer mais ainda (#vema\u00ed<\/s>)<\/h2>\n\n\n\n
Ao longo dos \u00faltimos meses venho preparando um novo curso… (e por isso n\u00e3o tivemos artigos semanais por aqui nas \u00faltimas duas semanas).<\/p>\n\n\n\n
\"Curso<\/a><\/figure>\n\n\n\n
Next.js – O come\u00e7o de uma nova era. – Aprenda a criar aplica\u00e7\u00f5es e e-commerces extremamente r\u00e1pidos<\/strong>.<\/h3>\n\n\n\n
Neste curso voc\u00ea vai aprender:<\/p>\n\n\n\n