Next.js Access to Shopify Storefront API by Creating Public App

Retired Boards Appdev Custom Storefronts
1

Hello Shopify Developer Community,

I’m currently developing features for my Next.js application that require integration with a seller’s Shopify API. According to Shopify Support, I need to create a Public App to gain access to the Storefront API to meet my project’s requirements. However, I’m finding the documentation for this use case to be somewhat unclear and would appreciate guidance from those who have experience with similar setups.

Project Context:

  • The app I’m building will sync a seller’s Shopify inventory with our marketplace.
  • In the initial phase, our marketplace redirects customers to the seller’s Shopify product pages. Eventually, we plan to facilitate purchases directly on our platform using Shopify’s checkout system.
  • APIs we will need access to: Products, Inventory, Cart, Checkout, Orders.
  • The app is built with Next.js, and I’ve already set up a Shopify Partner Account, Development Store, and Public App.

Questions:

  1. File Structure:
    During the setup of the Public Shopify App, the Shopify CLI created a separate directory within my existing Next.js project. Should I keep these directories separate, or is it better to integrate them into the main project structure? What’s considered best practice in this scenario?

  2. Minimum Implementation for API Access:
    My application primarily needs the ability to interact with the Shopify API. This includes acquiring a client_id, secret_key, and an authorization_token obtained through OAuth for each seller. Has anyone here implemented a similar setup? If so, any advice on the best approach would be greatly appreciated.

  3. OAuth Implementation with Next.js:
    What are the best practices for securely implementing OAuth in a Next.js environment to obtain and store Shopify access tokens? Are there any resources or examples that demonstrate how to achieve this?

Additional Info:
Support informed me that all public app merchants must go through an OAuth permissions page to install the app. I’m trying to understand how best to integrate this flow within the Next.js framework.

I’d greatly appreciate any insights, resources, or examples that could assist me in navigating these challenges. If additional details are needed to provide accurate guidance, I’m happy to share more.

Thank you in advance for your help!

Best regards,
Taylor

2

If you’re familiar with Next.js why not use the Remix boilerplate?
It has authentication and authorization and everything you need
It would make your life so much easier and you’ll also find a lot of documentation for it

3

This is part of an existing Next.js application. Perhaps I could create a new Remix app for this and then extract the logic that I need.

Have you built apps like this before, where the goal is really just to gain API access for a codebase app?

4

Sorry I misunderstood your question before
You don’t need to build a Shopify app just to access the API
you can handle everything directly in your Next.js app
What Shopify support meant by “public app” is just to get API access using the headless app not to create a public Shopify app
But I’m not sure what you want to do exactly here

5

Yeah its quite confusing for something fairly simple. I talked to their support at length, but that never guarantees they told me the correct things.

What I need to do:

  1. Seller onboards and opts to connect their Shopify store with OAuth.
  2. We store an authorization token to be able to access their inventory, similar to LitCommerce.
  3. We sync their inventory and display their products on our marketplace.
  4. Changes on their Shopify are reflected on our end.
  5. (Feature B): Customer can purchase the product on our marketplace, utilizing Shopify’s cart, checkout, and orders API so that we can perform a purchase and receive a commission, resulting in an order created in the seller’s existing Shopify ecosystem, no different from if a customer bought on their store (aside from our commission).

Any thoughts on how to accomplish this with the most minimal overhead required?