This is a template for building a Shopify app using Next.js and Typescript. It contains the basics for building a Shopify app on Next.js using the app router and server components.
This template can be installed using your preferred package manager:
Using pnpm (recommended):
pnpx @shopify/create-app@latest --template https://github.com/ozzyonfire/shopify-next-app.git
Using yarn:
yarn create @shopify/app --template https://github.com/ozzyonfire/shopify-next-app.git
Using npx:
npx @shopify/create-app@latest --template https://github.com/ozzyonfire/shopify-next-app.git
This will clone the template and install the required dependencies.
The goal of this template is to provide a quick and easy way to spin up a Shopify Embedded App that uses the Next.js app router platform. Some of the following information was previusly necessary for the pages
router, so I am working on migrating some of the legacy code.
layout.tsx
we setup some providers that are necessary for the app to run.
/api/graphql
Next.js route and is handled by the Shopify API library.The app template uses token exchange by default. The user gets the ID Token from the initial page load and sends it to the server where it is stored. This happens using a server action.
Also, all server actions should have the session token sent along with them, the server can then verify and exchange the token if needed.
OAuth is handled using the /api/auth
and /api/auth/callback
routes. The app is setup to use both online and offline tokens, by default.
Note that in order to use the /api/graphql
route out of the box, you need to use online tokens.
There are a couple environment variables you need to set up in order for the app to run. Create a file called .env
in the root directory (or the root of your Next.js app) and add the following lines;
DATABASE_URL= # database connection string - for connecting to prisma
POSTGRES_PASSWORD= # optional database password - when running postgres db locally through docker
The first two variables are automatically populated by the Shopify CLI.
This template combines a number of third party open-source tools:
The following Shopify tools complement these third-party tools to ease app development:
The Shopify CLI connects to an app in your Partners dashboard. It provides environment variables, runs commands in parallel, and updates application URLs for easier development.
You can develop locally using your preferred package manager.
Using pnpm:
pnpm run dev
You can also get up and running with Docker. This will setup and initialize the postgres database for you.
docker-compose up
pnpm run migrate
If you run the following command, it will generate the types for the graphql queries and mutations.
pnpm run graphql-codegen
This sets up your types when using Apollo client and gives your intellisense in your IDE.
You can deploy this app to a hosting service of your choice. Here is the basic setup for deploying to Vercel:
SHOPIFY_API_KEY
SHOPIFY_API_SECRET
SCOPES
HOST
/api/auth/callback
and /api/auth
routes as your Vercel deployment (with your hostname)Vercel should be setup to build using the default Next.js build settings.
You should also be using a managed Shopify deployment. This will handle scope changes on your app.
pnpm run deploy
This template uses Prisma to store and manage sessions. For more information on how to set up Prisma, see the Prisma documentation.