nextjs frontend

[cosmic portal]

Hi @reef patio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To set up a Next.js frontend with GraphQL, Tailwind CSS, and shadcn/ui, you can follow these steps:

1. Create a new Next.js application with Tailwind CSS for styling:
   You can use the create-next-app command to create a new Next.js application pre-configured with Tailwind CSS.

   npx create-next-app@latest --tailwind your-app-name
   

   Replace your-app-name with the name of your application. source (https://vercel.com/guides/building-ecommerce-sites-with-next-js-and-shopify#setting-up-your-next.js-application)

2. Install Tailwind CSS:
   Install the Tailwind CSS packages and run the init command to generate both the tailwind.config.js and postcss.config.js files:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   

   source (https://nextjs.org/docs/app/building-your-application/styling/tailwind-css)

3. Configure Tailwind CSS:
   Inside tailwind.config.js, add paths to the files that will use Tailwind CSS class names:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
       './pages/**/*.{js,ts,jsx,tsx,mdx}',
       './components/**/*.{js,ts,jsx,tsx,mdx}',
   
       // Or if using `src` directory:
       './src/**/*.{js,ts,jsx,tsx,mdx}',
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

   source (https://nextjs.org/docs/app/building-your-application/styling/tailwind-css)

4. Install shadcn/ui:
   shadcn/ui is a library of reusable components built using Radix UI and Tailwind CSS. You can install it using npm:

   npm install @shadcn/ui
   

   Note: This command is not directly from the sources provided, but it's the standard way to install npm packages.

5. Fetch data from GraphQL API:
   After setting up your Shopify store, you can fetch data from Shopify using the GraphQL API. Add your generated Shopify access token as well as the domain for your store to an .env.local file in your newly created application:

   SHOPIFY_STOREFRONT_ACCESS_TOKEN='your-token'
   SHOPIFY_STORE_DOMAIN='your-store.myshopify.com'
   

   source (https://vercel.com/guides/building-ecommerce-sites-with-next-js-and-shopify#setting-up-your-next.js-application)

Please note that the exact way to fetch data from a GraphQL API will depend on the specific API you're using. The example above is for a Shopify store.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: