dbredvick / nextjs-shopify-app

Shopify NextJS App Example

An example app built with NextJS that can be setup and deployed to production in seconds on Vercel.

Deploy your own

This examples uses Upstash (Serverless Redis Database) as its data storage. During deployment, you will be asked to connect with Upstash. The integration will help you create a free Redis database and link it to your Vercel project automatically.

You'll need to get a Shopify App API Key and API secret key inside the Partner Dashboard to complete the deploy. After deployed, select App Setup on your app's summary page in Partner Dashboard, and update the following values:

1. App Url: https://[your-vercel-deploy-url].vercel.app/embedded
2. Redirection URLs: https://[your-vercel-deploy-url].ngrok.io/auth/shopify/callback

Finally, install your app on a development store by selecting Test on development store on your app's summary page in Partner Dashboard

Setup Local Development

1. Clone your app's repo git clone https://github.com/[your-user-name]/nextjs-shopify-app.git
2. Expose your dev environment with ngrok
3. Get another Shopify API Key and API secret key for local development inside the Partner Dashboard
   • Instead of using https://yourNgrokTunnel.ngrok.io/ for the App URL, use https://yourNgrokTunnel.ngrok.io/embedded
   • Instead of using https://yourNgrokTunnel.ngrok.io/auth/callback for the Redirection URLs, use https://yourNgrokTunnel.ngrok.io/api/auth/shopify/callback
4. Rename .env.example to .env.local and fill in values
5. Run npm install and then npm run dev
6. Install your app on a development store and start developing!

You can start editing the page by modifying pages/embedded/index.js. The page auto-updates as you edit the file.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.