Next Js Commerce - Uma Visão Geral e Diretrizes

Como desenvolvedores, temos essa necessidade inflexível de seguir o que há de mais moderno em tecnologia. Somos movidos por essa sede insaciável de aprender tudo, absolutamente tudo, sobre cada tecnologia grande e inovadora. Desejamos ter um vislumbre exclusivo do futuro – e esse desejo nos mantém em movimento. Nossa busca pela mais recente tecnologia de comércio eletrônico nos levou a – Next Commerce.

Next Commerce é a mais recente oferta da BigCommerce em colaboração com as equipes Next.js e Vercel. Com o Next Commerce, os desenvolvedores de comércio eletrônico podem instalar um aplicativo completamente sem periféricos integrado ao BigCommerce em questão de minutos. É o primeiro empreendimento desse tipo tanto do Next quanto do BigCommerce.

O comércio sem cabeça é provavelmente o futuro do comércio eletrônico. O comércio sem cabeça torna mais fácil para os desenvolvedores projetar e desenvolver aplicativos inovadores, alcançar um mercado global mais amplo e ajudar o gráfico de vendas da loja de comércio eletrônico a apontar para o norte.

De acordo com um relatório sobre o desempenho do site, em uma pesquisa com 120 executivos de comércio eletrônico, 62% eram da opinião de que o comércio sem cabeça pode melhorar significativamente as taxas de conversão e o envolvimento do cliente.

Estamos entusiasmados em mostrar a você o quão fácil de instalar e incrível de usar esta última oferta do BigCommerce e Next é. Este guia passo a passo é tudo o que você precisa para começar a usar o Next Commerce.

Começaremos com uma visão geral.

Uma visão geral do próximo comércio

O Next.js é um framework web de código aberto amplamente usado com o qual você pode construir seus próprios aplicativos – tanto renderização do lado do servidor quanto aplicativos estáticos usando React. Atualmente, a estrutura traz o Next.js Commerce para nós. É um kit de desenvolvedor com o qual podemos criar sites de comércio eletrônico de alto desempenho, personalizáveis ​​e envolventes. Sendo oferecido junto com uma plataforma SaaS aberta e robusta como BigCommerce, as possibilidades e potencial do Next Commerce são imensos.

Por que o mercado está caminhando para o comércio eletrônico sem cabeça?

Next.js é uma ferramenta poderosa para construir seu site de comércio eletrônico. É uma arquitetura completa e robusta que pode ser dimensionada, customizada e configurada para diversas implementações de eCommerce.

Embora o Next.js estenda vários benefícios, aqui estão alguns dos poucos significativos:

• Renderização do servidor

  Os componentes React podem ser renderizados no lado do servidor antes que o HTML possa ser enviado aos clientes.

• Recarregamento de código quente

  Sempre que o Next.js detecta alterações, a página é recarregada. Qualquer URL é roteado automaticamente para o sistema de arquivos. Isso não requer nenhuma habilidade de configuração de você. No entanto, você sempre pode personalizar de acordo com suas necessidades.

• Compatibilidade do Ecossistema

  Next.js é altamente compatível com React, Node e, claro, JavaScript.

• Divisão automática do código

  As páginas vêm apenas com as bibliotecas e o JavaScript – nada mais. Em vez de gerar um único JavaScript que contém todos os códigos do aplicativo, o Next.js divide o aplicativo em vários recursos, facilitando todo o processo.



• Suporte TypeScript

  Como o Next.js é escrito em TypeScript, ele oferece suporte completo.

• Pré-busca

  Uma prop de pré-busca é suportada pelo componente Link que busca automaticamente os recursos da página – mesmo os de código automático.

• Aplicativos híbridos

  É possível usar SSR e aplicativos da Web estáticos em um único projeto usando Next.js.

• Nenhuma configuração necessária

  Essa estrutura pronta para produção é perfeita para equipes de engenharia que estão tentando oferecer escalabilidade e facilidade de uso para lojas de comércio eletrônico. Ele vem com auto-compilação e empacotamento, suporte CSS embutido, roteamento de sistema de arquivos, divisão automática de código e criação de API.

Visão geral sobre como implantar

Agora equipado com uma compreensão básica do Next Commerce, vamos entrar rapidamente nos detalhes mais interessantes – implantação. Vamos começar com os pré-requisitos. O Next.js não é muito grudento, por isso vem com os requisitos mínimos.

Pré-requisitos

• Um IDE
• TypeScript no lugar de JavaScript
• Um conhecimento básico de APIs BigCommerce
• Diretório para /pages e /public. O diretório para /pages terá um _app.tsx e o index.tsx
• O diretório para /public terá mídia que pode ser veiculada estaticamente.
• Além disso, as /pages também terão páginas da loja de comércio eletrônico com suas rotas.
• Qualquer provedor Git – seja Bitbucket, GitHub ou GitLab.
• NPM

Estes são os requisitos básicos para a funcionalidade do Next Commerce. Você sempre pode reorganizar o restante dos diretórios posteriormente.

Pacotes e configuração

Além do NPM e do Yarn, a execução do Next Commerce usa arquivos .env e .config para começar.

Para que o aplicativo funcione corretamente, você precisaria usar o pacote BigCommerce Storefront Data Hooks. Os ganchos podem ser reutilizados de acordo com as necessidades dos componentes. Você pode encontrar os componentes no diretório /components e eles são renderizados em páginas. O link de ganchos para componentes e páginas precisa de grandes quantidades de dados da vitrine. Se você não quiser gastar uma fortuna em custos de desenvolvedor, pode facilmente usar o pacote BigCommerce Storefront Data Hooks para sua vantagem.

Este pacote ajuda você a acessar categorias, dados cruciais de clientes, páginas de produtos, detalhes e muito mais. Depois de instalar o pacote com êxito, você pode vincular suas variáveis ​​.env ao par de valores-chave apropriado na vitrine do BigCommerce.

Os arquivos .env são armazenados automaticamente no Vercel. Você pode facilmente extrair o arquivo .env usando o comando “vercel env pull”. Agora você pode definir as chaves de API da loja BigCommerce e o token GraphQL usando o arquivo .env.local.

A próxima etapa é a configuração dos arquivos .config. O tsconfig.json permite compilar o JavaScript para seu projeto e o next.config.js é o módulo do nó. Muitos desenvolvedores ignoram isso, mas é altamente recomendável se você deseja obter alguma funcionalidade específica.

Executando o Projeto

A execução do projeto no servidor do ambiente de desenvolvimento é bastante simples. Tudo o que você precisa fazer é usar o seguinte comando:

yarn dev ou npm run dev

Implantação

Construir o Next.js Commerce também é bastante fácil – visite nextjs.org/commerce e clique no botão Clone and Deploy. Ao final, você deverá ter seu próprio aplicativo funcionando no Vercel – com a logomarca da sua loja. Depois de implantado, você pode personalizar sua loja de acordo com suas necessidades.

Levaremos o processo de integração um passo de cada vez.

Passo 1:

Depois de clicar no botão Clone and Deploy, você pode começar a implantar usando o Vercel com um provedor Git.

Se você tiver uma conta Vercel, poderá fazer login usando suas credenciais.

Se você não tiver uma conta Vercel, será solicitado a criar uma conta usando qualquer um dos provedores Git de sua escolha.

Passo 2:

Depois de fazer login na conta Vercel, você poderá ver uma caixa de diálogo Clone Git Repository com uma lista suspensa. Selecione sua conta Vercel e digite o nome do seu projeto no campo fornecido e clique em Continuar.

Etapa 3:

O próximo passo é instalar as integrações. Para conectar sua loja BigCommerce ao seu projeto Vercel, clique no botão Instalar. Depois de clicar no botão Instalar, você verá uma tela Adicionar BigCommerce à sua tela Vercel Project.

Passo 4:

Se você já possui uma loja BigCommerce, basta fazer o Login usando suas credenciais existentes para integrar Vercel e BigCommerce. No entanto, se você é novo no BigCommerce, clique em Sign Up.

A página Sign Up irá guiá-lo através da criação de um sandbox de desenvolvedor usando um formulário simples. Digite seus dados e concorde com todos os termos e condições para se inscrever. Clique em Continuar quando vir uma marca de seleção azul ao lado da guia de integração do BigCommerce.

Etapa 5:

Agora você pode criar o repositório Git digitando o nome do repositório. Clique em Continuar.

Etapa 6:

Depois de chegar à tela Importar projeto, você poderá confirmar as configurações do projeto e clicar em Implantar. A implantação inteira não deve demorar mais do que alguns minutos.

Depois que a implantação no Vercel estiver concluída, você poderá ver uma imagem em miniatura do seu site implantado.

Parabéns, seu projeto foi implantado com sucesso!

Reagir + Next.js

Você pode configurar sua loja de comércio eletrônico com Next - gerador SSR para React - e depois implantar no Vercel. Usando o clichê do Crystallize e do Next.js, você pode criar facilmente uma vitrine de comércio eletrônico de desenvolvimento web Jamstack. Agora, usaremos o Crystallize CLI para desenvolver um novo projeto.

Digite o seguinte comando em seu terminal.

npx @crystalize/cli

Com este comando, você poderá adicionar seu clichê preferido, optar por ir com seu próprio locatário ou escolher um locatário de demonstração e adicionar a API de serviço.

Para implantar no Vercel, você precisará desses requisitos básicos instalados em seu computador.

• Vercel CLI
• Um provedor Git
• Pelo menos, versão 10 Node.js
• Um inquilino inscrevendo-se no Crystallize

Execute o projeto no servidor de desenvolvimento usando:

yarn dev ou npm run dev

Com isso, você pode acessar o site de desenvolvimento, entender a estrutura do aplicativo e editar as páginas conforme suas necessidades.

Quando terminar de criar páginas para várias formas de itens, você pode começar a implantar no Vercel.

Novamente, para implantar seu projeto no Vercel, você precisará passar pela integração do Vercel Github. No entanto, você também pode implantar manualmente com a mesma facilidade. Use a linha de comando para digitar - vercel login - defina as duas variáveis ​​de ambiente usando o painel Vercel.

A implantação do seu projeto com o Vercel precisa de um provedor Git. Envie seu projeto para o provedor Git e está quase pronto – a implantação será iniciada.

Empacotando

A era do comércio eletrônico sem cabeça está aqui. O desenvolvimento tradicional de sites de comércio eletrônico centrado em oferecer uma experiência completa com front-end e back-end bem integrados. Isso ajudou as lojas a lançar rapidamente seus aplicativos. No entanto, em breve você experimentaria soluços de desempenho - mais significativamente, você não poderá dimensionar tanto quanto gostaria. Mas com o comércio eletrônico sem cabeça, você não precisa se esforçar tanto.

Um design sem cabeça oferece muita liberdade para criar seu próprio front-end do zero ou usar um pré-construído. Você terá a capacidade de responder rapidamente às mudanças no mercado e personalizar as experiências do cliente de acordo. O mais importante de tudo – você pode fazer alterações em seu front-end sem adulterar seu back-end. Agora você sabe por que, como desenvolvedores, temos certeza de que o futuro do comércio eletrônico é certamente sem cabeça.