mariesumalee/flotiq-nextjs-shop-2

Next JS starter shop 2 with Flotiq source

Kick off your project with this shop 2 boilerplate. This starter ships with the main Next JS configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. Check out live demo: https://flotiq-nextjs-shop-2.netlify.app

Quick start

1. Start the project from template using npx

   git clone https://github.com/flotiq/nextjs-starter-shop-2.git flotiq-nextjs-shop-2

2. Import example data from starter to Flotiq

   npm i -g flotiq-cli
   cd flotiq-nextjs-shop-2
   flotiq import . [flotiqApiKey]

   Note: You need to put your Read and write API key as the flotiqApiKey for import to work, You don't need any content types in your account.

3. Configure application

   The next step is to configure our application to know from where it has to fetch the data.

   Copy .env.dist as .env.local

   cp .env.dist .env.local

   and add api key:

   FLOTIQ_API_KEY=YOUR FLOTIQ API KEY
   SNIPCART_API_KEY=YOUR SNIPCART API KEY
   GA_TRACKING_ID=YOUR GA API KEY
   

   To add SNIPCART API KEY to your starter you need to log in to the website: https://snipcart.com/

   After this you need to get into your account options and choose API KEYS line or you can just click in the link.

   To see how snipcart shop is working you need to copy PUBLIC TEST API KEY and paste it into your .env file instead YOUR SNIPCART API KEY.

   You need to remember that this is just for test look, to get fully working snipcart shop for commercial use you need to buy it on the website. PUBLIC TEST API KEY below is just an example, it won't work!

   

4. Install dependencies

   Navigate into your new site’s directory and run

   yarn install

5. Start developing.

   Navigate into your new site’s directory and start it up.

   yarn dev

6. Open the source code and start editing!

   Your site is now running at http://localhost:3000!

   Open the flotiq-nextjs-shop-2 directory in your code editor of choice and edit pages/[page].js. Save your changes and the browser will update in real time!

7. Manage your content using Flotiq editor

   You can now easily manage your content using Flotiq editor

Deploy

Deploy this starter with one click on Vercel:

You can also deploy this project to Heroku in 3 minutes:

Or to Netlify:

Learning Next.js

Looking for more guidance? Full documentation for Next.js lives on the website. Here are some places to start:

• To dive straight into code samples, head to the Next.js documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

Collaborating

If you wish to talk with us about this project, feel free to hop on our .

If you found a bug, please report it in issues.