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.

Rather than cloning this repo, you can use your preferred package manager and the Shopify CLI with these steps.

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.

• in _app.tsx there are a number of Providers which are needed to get everything established for an Embedded App
  • AppBridgeProvider: This sets up AppBridge and resolves the host (from next/router) and API Key (from environment variables).
  • APIProvider: This is just an optional helper for accessing the API routes with session tokens from Shopify.
    • I am planning on removing this in the future and migrating to a native fetch implementation.
  • ApolloProvider: Sets up the Apollo context for running Graphql queries and mutations. This runs through the /api/graphql Next.js route and is handled by the Shopify API library.
  • SessionProvider: This ensures that the user always has an active session and that the app is installed correctly. It basically redirects the user to authenticate when it needs to.
    • In order to accomplish this, a request is sent to /api/auth/verify on every page load (client side). This was done client side to preserve the Automatic Static Optimization features in Next.js (only for pages that aren't the install page)
    • This route checks for online and offline tokens existing, validating online tokens and scope mismatches.

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

The first two variables are automatically populated by the Shopify CLI.

• ✅ Session saving using MongoDB
• ✅ OAuth flow for online and offline tokens
• ✅ GraphQl call using Apollo
• ✅ New router config for Next.js and App Bridge
• ✅ AppUninstalled webhook - cleanup and delete sessions
• ✅ Database sessions managed through Prisma
• ⬜ Remove the APIProvider and use fetch instead
• ⬜ Prune excess leftover unused code

This template combines a number of third party open-source tools:

• Next.js builds the React frontend.

The following Shopify tools complement these third-party tools to ease app development:

• Shopify API library manages OAuth on the serverless backend. This lets users install the app and grant scope permissions.
• App Bridge React adds authentication to API requests in the frontend and renders components outside of the App’s iFrame.
• Axios for simple http requests for interacting with the API (Shopify or Custom API routes through Next API Pages).
  • Removing this in the future.
• Apollo for interacting with the Shopify GraphQL API.
• Polaris React is a powerful design system and component library that helps developers build high quality, consistent experiences for Shopify merchants.
• Custom hooks make authenticated requests to the Admin API.
• Prisma for managing database connections and migrations.

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. Run one of the following commands from the root of your app.

Using yarn:

yarn dev

Using npm:

npm run dev

Using pnpm:

pnpm run dev

Open the URL generated in your console. Once you grant permission to the app, you can start development.

This template uses Prisma to store and manage sessions. For more information on how to set up Prisma, see the Prisma documentation.

• Introduction to Shopify apps
• App authentication
• Shopify CLI
• Shopify API Library documentation