next shopify storefront

? Próximo Shopify Storefront

Um carrinho de compras construído com o TypeScript, Tailwind CSS, UI sem cabeça, Next.js, React.js, Shopify Hydrogen React, ... e Shopify Storefront GraphQL API.

Tutoriais

• Como organizo um projeto sustentável a seguir?
• Como lidar com os dados modulares do tipo Afeto buscando no próximo.js?
• Como faço para interagir com segurança com a API grafql no próximo.js?
• Como implemento seletor de variante dinâmica para shopify no próximo.js?

Experiência

Essas são minhas experiências quando tenho trabalhado neste projeto:

• Projetando e construindo a loja da loja do zero.
• Criando os próximos utilitários para buscar dados modulares seguros de tipo.
• Criando utilitários do Shopify para simplificar a seleção de variantes.
• Usando grafql zeus para interagir com a API da loja.
• Usando o Shopify Hydrogen para implementar os recursos da loja.
• Usando o Tailwind CSS e a interface do usuário sem cabeça para construir a interface do usuário da loja.
• Usando o próximo.js para regeneração estática incremental.
• Usando o próximo SEO para implementar a otimização do mecanismo de pesquisa.
• Usando o TypeScript para criar com segurança ganchos de reação e componentes.
• Usando o React, use ganchos para acelerar o desenvolvimento de componentes.
• Usando swiper para criar controles deslizantes bonitos, tocáveis e responsivos.
• Usando Eslint, mais bonito para seguir as melhores práticas.

Se você gosta deste projeto, pressione o botão de estrela para marcar -o ️

Demonstração

Você pode visitar aqui para ver a demonstração: https://next-hopify-storefront.vercel.app/

Instalação

Clone o código -fonte no seu computador.

git clone https://github.com/maxvien/next-shopify-storefront.git

Instale as dependências do projeto.

npm install

Uso

Primeiro, você precisa definir as variáveis de ambiente abaixo no arquivo .env ou em suas plataformas de implantação.

• NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION

Você pode seguir a documentação da API do Shopify Storefront GraphQL para obter informações da API da loja.

Desenvolver

Desenvolva o projeto no modo de desenvolvimento.

npm run dev

Construir

Crie o projeto no modo de produção.

npm run build

Começar

Inicie o projeto no modo de produção.

npm run start

Fia

Analise o código para encontrar problemas com eslint e prettier .

npm run lint

Corrija automaticamente os problemas.

npm run fix

Extensões de código do Visual Studio

Para acelerar sua produtividade, você pode instalar estas extensões:

• Eslint
• Mais bonito
• Visual Studio Intellicode
• Tailwind CSS Intellisense
• Suporte ao idioma PostCSS

Projetos relacionados

• Shopify Data Faker • Uma ferramenta de desenvolvimento do Shopify para gerar dados da loja fictícia.
• Tema Bootstrap Shopify • Um tema gratuito do Shopify construído com bootstrap, bem, líquido, sass, esNext, ferramentas temáticas, ... e webpack.
• Próximo Shopify Storefront (V2) • Um carrinho de compras construído com TypeScript, Emotion, Next.js, React.js, React Query, Shopify Storefront GraphQL API, ... e UI material.
• Próximo Shopify Storefront (V1) • Um carrinho de compras construído com TypeScript, NextJs, React, Redux, Apollo Client, Shopify StoreFront GraphQL API, ... e UI material.

História da estrela