https://github.com/thegibi/gibify-commerce

An E-commerce website using next.js, vercel and shopify.
https://github.com/thegibi/gibify-commerce

next13app nextjs nextjs-commerce open-graph-image seo shopify-headless shopify-theme tailwindcss

Last synced: about 2 months ago
JSON representation

An E-commerce website using next.js, vercel and shopify.

• Host: GitHub
• URL: https://github.com/thegibi/gibify-commerce
• Owner: thegibi
• License: mit
• Created: 2023-09-02T10:26:18.000Z (over 1 year ago)
• Default Branch: dev
• Last Pushed: 2024-02-12T04:42:35.000Z (11 months ago)
• Last Synced: 2024-05-08T01:26:01.865Z (8 months ago)
• Topics: next13app, nextjs, nextjs-commerce, open-graph-image, seo, shopify-headless, shopify-theme, tailwindcss
• Language: TypeScript
• Homepage: https://commerce.gibify.dev
• Size: 325 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: license.md

Awesome Lists containing this project

README

        

A Next.js 13 and App Router-ready ecommerce template featuring:

- Next.js App Router

- Optimized for SEO using Next.js's Metadata

- React Server Components (RSCs) and Suspense

- Server Actions for mutations

- Edge Runtime

- New fetching and caching paradigms

- Dynamic OG images

- Styling with Tailwind CSS

- Checkout and payments with Shopify

- Automatic light/dark mode based on system settings

## Providers

Vercel will only be actively maintaining a Shopify version [as outlined in our vision and strategy for Next.js Commerce](https://github.com/vercel/commerce/pull/966).

Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged.

## Running locally

You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.

> Note: You should not commit your `.env` file or it will expose secrets that will allow others to control your Shopify store.

1. Install Vercel CLI: `npm i -g vercel`

2. Link local instance with Vercel and GitHub accounts (creates `.vercel` directory): `vercel link`

3. Download your environment variables: `vercel env pull`

```bash

pnpm install

pnpm dev

```

Your app should now be running on [localhost:3000](http://localhost:3000/).

## Vercel, Next.js Commerce, and Shopify Integration Guide

You can use this comprehensive [integration guide](http://vercel.com/docs/integrations/shopify) with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.