@agnostack/next-shopify

Installation

yarn add @agnostack/next-shopify
# npm install @agnostack/next-shopify

Quickstart

Inside of next.config.js, add the following:

const { withShopify } = require('@agnostack/next-shopify')

const manifestTemplate = require('./manifestTemplate.json')

const nextConfig = withShopify({
  zendesk: { manifestTemplate },
})

Also, create an api route (pages/api/apps.js) containing the following:

import getConfig from 'next/config'
import { withShopify } from '@agnostack/next-shopify'

const { serverRuntimeConfig } = getConfig() ?? {}

export default withShopify(serverRuntimeConfig)

Alternate Option #1

Inside of next.config.js, add the following:

const { withPlugins } = require('@agnostack/next-plugins')
const { withShopify } = require('@agnostack/next-shopify')

const manifest = require('./manifest.json')

const nextPlugins = [{
  [withShopify]: {
    manifestTemplate: manifest,
    /* NOTE: add optionale below
    apiRoute: '/api/my-custom-api-json-route', // (defaults to /api/apps)
    interactive: true, // (defaults to false)
    data: {
      plan: 'silver',
      app_id: 123,
      installation_id: 12434234,
      my_token: 'myValue',
      parameters: {
        someToken: 'fksjdhfb231435',
        someSecret: 123,
      },
    },
    routes: {
      background: '/background'
      user_sidebar: '/noTicket',
      organization_sidebar: '/noTicket',
      ticket_sidebar: '/ticket',
      new_ticket_sidebar: '/ticket',
    },
    */
  },
}]

const nextConfig = withPlugins({
  /* NOTE: standard nextConfig goes in here
  reactStrictMode: true,
  experimental: {
    esmExternals: false,
  },
  */
}, [nextPlugins])

Also, create an api route (pages/api/apps.js) containing the following:

import getConfig from 'next/config'
import { withShopify } from '@agnostack/next-shopify'

const { publicRuntimeConfig } = getConfig() ?? {}

export default withShopify(publicRuntimeConfig)

Contact Adam Grohs @ agnoStack for any questions.