#h
1 messages · Page 1 of 1 (latest)
Hi @upbeat tide. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Hmm, I don't know enough to give you a confident answer yet. However, I can guide you on how to build an ecommerce website using Next.js and Shopify based on the information provided in the extracts.
- Setup your Next.js application: You can start by creating a new Next.js application pre-configured with Tailwind CSS for styling. You can do this by running the following commands in your terminal:
npx create-next-app@latest --tailwind shopify-nextjs
cd shopify-nextjs
(Source: Vercel Guide (https://vercel.com/guides/building-ecommerce-sites-with-next-js-and-shopify))
- Connect to your Shopify store: Add your generated Shopify access token and the domain for your store to an
.env.localfile in your newly created application:
SHOPIFY_STOREFRONT_ACCESS_TOKEN='your-token'
SHOPIFY_STORE_DOMAIN='your-store.myshopify.com'
Then, you can start your application with npm install && npm run dev. Your project should now be running on <http://localhost:3000.>
(Source: Vercel Guide (https://vercel.com/guides/building-ecommerce-sites-with-next-js-and-shopify))
- Use Next.js Commerce: Next.js Commerce is an all-in-one starter kit for high-performance e-commerce sites. It comes with features like SEO optimization, React Server Components, Server Actions for mutations, Edge Runtime, new fetching and caching paradigms, dynamic OG images, styling with Tailwind CSS, checkout and payments with Shopify, and automatic light/dark mode based on system settings. You can find the template here (https://vercel.com/templates/next.js/nextjs-commerce).
(Source: Next.js Commerce (https://vercel.com/templates/next.js/nextjs-commerce))
- Running locally: To run Next.js Commerce locally, you will need to use the environment variables defined in
.env.example. You can install Vercel CLI, link your local instance with Vercel and GitHub accounts, and download your environment variables. Then, you can run your app on localhost:3000.
(Source: Next.js Commerce (https://vercel.com/templates/next.js/nextjs-commerce))