https://github.com/basementstudio/next-shopify-ts

A boilerplate for using Next.js with Shopify, TypeScript, and react-query 🔥
https://github.com/basementstudio/next-shopify-ts

e-commerce nextjs react-query shopify typescript

Last synced: about 2 months ago
JSON representation

A boilerplate for using Next.js with Shopify, TypeScript, and react-query 🔥

• Host: GitHub
• URL: https://github.com/basementstudio/next-shopify-ts
• Owner: basementstudio
• Created: 2021-06-26T19:23:50.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T08:42:49.000Z (over 1 year ago)
• Last Synced: 2024-04-20T18:04:09.858Z (5 months ago)
• Topics: e-commerce, nextjs, react-query, shopify, typescript
• Language: TypeScript
• Homepage:
• Size: 1.04 MB
• Stars: 32
• Watchers: 2
• Forks: 5
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• Awesome-NextJs - next-shopify-ts - query` (Nextjs Templates)

README

        
# next-shopify-ts

The objective of this boilerplate is to set up everything the developer will need (in terms of configuration) to start a next + shopify + typescript project. Eslint, prettier and husky are configured to work independent of the user's IDE configuration (as long as it's vscode).

## Get Started

### Shopify Setup

You'll need to create a Shopify store and a private app for that Shopify store. To that private app, you'll need to give access to the Storefront API.

### Code Setup

Copy the `.env.example` file into `.env` (which will be ignored by Git):

```bash

cp .env.local.example .env.local

```

Then set each variable on `.env`:

- NEXT_PUBLIC_SHOPIFY_DOMAIN is the domain of the store

- SHOPIFY_STOREFRONT_ACCESS_TOKEN is your private app's storefront api token

Finally:

```bash

yarn && yarn dev

```

## Featured Aspects of the Stack

- Typescript

- NextJS

- shopify-buy

## Things to Note

- It comes with Inter (it's better to host fonts here rather than getting them from google fonts). Remove it if you are not going to use it.

- Pages, components, etc... are located under `/src`. If you are changing this, be sure to also update `tsconfig.json`'s `baseUrl`.

---

If you found you needed to make extra config to make this work better, feel free to submit a pr suggesting your changes. Our focus is for you to get up and running with the least steps and burden as possible.

---

Let's go 🚀