strapi / strapi-starter-next-ecommerce

Strapi Starter Next.js E-commerce

⛔ Deprecated

This repository is no longer maintained and only works for Strapi v3. To find the newest Strapi v4 starters, check out the starters-and-templates monorepo.

---

Strapi Starter Next.js E-commerce

Next.js starter for creating a simple e-commerce website with Strapi.

This starter allows you to try Strapi with Next.js with the example of a simple e-commerce website where you can buy dev stickers. It is fully customizable and due to the fact that it is open source, fully open to contributions. So do not hesitate to add new features and report bugs!

This starter uses the Strapi E-commerce template

Check out all of our starters here

Features

• 1 Component
• 2 Collection types: Product, Category
• 27 Created products
• 6 Created categories
• Permissions set to true for product and category
• Responsive design using Tailwind css
• Slug system
• Publication system (draft & published)
• Role based access controls
• Payments handled with Snipcart

This starter is using Snipcart which allows you setup a shopping cart on any website. They wrote a tutorial teaching you how to create this website but selling cupcakes!

Payment will not work on localhost, we are redirecting you to this tutorial if you want to test payment locally.

Getting started

Use our create-strapi-starter CLI to create your project.

npx create-strapi-starter@3 my-site next-ecommerce

The CLI will create a monorepo, install dependencies, and run your project automatically.

The Next frontend server will run here => http://localhost:3000

The Strapi backend server will run here => http://localhost:1337

Deploying to production

You will need to deploy the frontend and backend projects separately. Here are the docs to deploy each one:

• Deploy Strapi
• Deploy Next

Don't forget to setup the environment variables on your production app:

For the frontend the following environment variable is required:

• NEXT_PUBLIC_STRAPI_API_URL: URL of your Strapi backend, without trailing slash

Enjoy this starter!

strapi-starter-next-ecommerce's Issues

Cannot read property 'formats' of null

Hey,

This probably might be a silly question, but for some reason I'm getting 'Cannot read property 'formats' of null' when I try to run this code

Tried :
1 - Checked the json, it was fine
2 - Tried printing the _product.image and it was not null
3 - For some reason it implies that the _product.image is null, but it's not.

strapi-starter-next-ecommerce/frontend/components/ProductsList.js

Line 17 in 6a8ccaa

src={getStrapiMedia(_product.image.formats.thumbnail.url)}

Thanks!

npm dependencies won't install

When trying to get started with npx create-strapi-starter my-site next-ecommerce, the following error is thrown:

Installing strapi/strapi-starter-next-ecommerce starter

• Installing dependencies:Command failed with exit code 1: yarn install
  'yarn' is not recognized as an internal or external command,
  operable program or batch file.

Error while installing with recomended setting

I got following error right after running:

npx create-strapi-starter projectFolder next-ecommerce

[develop:frontend] Starting: develop:frontend
[develop:backend ] internal/modules/cjs/loader.js:888
[develop:backend ]   throw err;
[develop:backend ]   ^
[develop:backend ] 
[develop:backend ] Error: Cannot find module '/home/myuser/projectFolder/develop:backend'
[develop:backend ]     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
[develop:backend ]     at Function.Module._load (internal/modules/cjs/loader.js:730:27)
[develop:backend ]     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
[develop:backend ]     at internal/main/run_main_module.js:17:47 {
[develop:backend ]   code: 'MODULE_NOT_FOUND',
[develop:backend ]   requireStack: []
[develop:backend ] }
[develop:frontend] internal/modules/cjs/loader.js:888
[develop:frontend]   throw err;
[develop:frontend]   ^
[develop:frontend] 
[develop:frontend] Error: Cannot find module '/home/myuser/projectFolder/develop:frontend'
[develop:frontend]     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
[develop:frontend]     at Function.Module._load (internal/modules/cjs/loader.js:730:27)
[develop:frontend]     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
[develop:frontend]     at internal/main/run_main_module.js:17:47 {
[develop:frontend]   code: 'MODULE_NOT_FOUND',
[develop:frontend]   requireStack: []
[develop:frontend] }
Done in 0.72s.

Before that I've run custom Strapi installation without problem with PostgreSQL database on same server/account.

Adding .jsx extension in tailwind.config.js

So i usually work with jsx because my IDE changes sytnax to react style code but this screwed over my css. maybe add that so this dosent happen to anyone else.

Tailwind/PostCSS bug on production

Hi!
So because im not very familiar with Tailwind nor PostCSS i sadly cant make a PR but i have a few infos

The Bug is in products/[slug] and it affects the grid-cols class.
When the Project is build, PostCSS or which tool cleans the CSS removes grid-cols-2 which is for the media querries. searching in the minified css dosent show up grid-cols-2 even tho is should. 1 and 3 are there too, so no matter if desktop or mobile it only has 1 col which dosent look too good.

Also what i have to mention is that i updated a few packages which could be the reason for this bug. i sadly didnt see it until i updated it all.

My current Package.json has these dependencies:

"autoprefixer": "^10.2.4",
"next": "^10.0.6",
"postcss": "^8.2.4",
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-preset-env": "^6.7.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"tailwindcss": "^2.0.2"

If there is any info you need or you have an idea where to look for i could try to help

Thanks for this great Template :)

Issue on bootstrapping with MongoDb

When I load this starter with MongoDb it's failing on bootstrapping:

Error: product validation failed: _id: Cast to ObjectId failed for value "1" at path "_id"
    at ValidationError.inspect (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/error/validation.js:47:26)
    at formatValue (internal/util/inspect.js:736:19)
    at inspect (internal/util/inspect.js:310:10)
    at formatWithOptionsInternal (internal/util/inspect.js:1969:40)
    at formatWithOptions (internal/util/inspect.js:1851:10)
    at console.value (internal/console/constructor.js:323:14)
    at console.log (internal/console/constructor.js:358:61)
    at /home/tomas/repos/handmade.amar/ecommerce/backend/config/functions/bootstrap.js:109:15
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  errors: {
    _id: CastError: Cast to ObjectId failed for value "1" at path "_id"
        at ObjectId.cast (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/schema/objectid.js:269:11)
        at ObjectId.SchemaType.applySetters (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/schematype.js:1075:12)
        at model.$set (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/document.js:1250:20)
        at model._handleIndex (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/document.js:1019:14)
        at model.$set (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/document.js:960:22)
        at model.Document (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/document.js:150:12)
        at model.Model (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/model.js:106:12)
        at new model (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/model.js:4686:15)
        at /home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/model.js:3052:22
        at /home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/model.js:3088:7
        at Array.forEach (<anonymous>)
        at /home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/model.js:3087:15
        at /home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/helpers/promiseOrCallback.js:31:5
        at new Promise (<anonymous>)
        at promiseOrCallback (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/helpers/promiseOrCallback.js:30:10)
        at Function.create (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/model.js:3022:10) {
      stringValue: '"1"',
      messageFormat: undefined,
      kind: 'ObjectId',
      value: 1,
      path: '_id',
      reason: Error: Argument passed in must be a single String of 12 bytes or a string of 24 hex characters
          at new ObjectID (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/bson/lib/bson/objectid.js:59:11)
          at castObjectId (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/cast/objectid.js:25:12)
          at ObjectId.cast (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/schema/objectid.js:267:12)
          at ObjectId.SchemaType.applySetters (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/schematype.js:1075:12)
          at model.$set (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/document.js:1250:20)
          at model._handleIndex (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/document.js:1019:14)
          at model.$set (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/document.js:960:22)
          at model.Document (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/document.js:150:12)
          at model.Model (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/model.js:106:12)
          at new model (/home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/model.js:4686:15)
          at /home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/model.js:3052:22
          at /home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/model.js:3088:7
          at Array.forEach (<anonymous>)
          at /home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/model.js:3087:15
          at /home/tomas/repos/handmade.amar/ecommerce/backend/node_modules/mongoose/lib/helpers/promiseOrCallback.js:31:5
          at new Promise (<anonymous>)
    }
  },
  _message: 'product validation failed'
}

navigate back to home page

when i navigate to products/[slug],
and click on back arrow in the browser to navigate to home page "/"
the url changed but didn't return or render the home page

only this happen when i add the #snipcart div with its api key

is there any solution?

The "Front" displays Backend stickers and vice versa

The routes are swapped I guess.

https://strapi-starter-next-ecommerce.vercel.app/categories/front

• should show frontend stickers

https://strapi-starter-next-ecommerce.vercel.app/categories/back

• should show backend stickers

Question: why not use getServerSideProps()?

I'm currently investigating if Strapi+NextJS will meet my needs.

I noticed that this starter uses Server Side Generation (SSG) getStaticProps, rather then Server Side Rendering (SSR) getServerSideProps. Part of the benefit of using a CMS is to have dynamic content/urls, that non-technical people can update. Given that, it seems strange me to require a new build whenever Strapi CMS data changes for either content changes or creation/removal of entities that have their own dynamic page (ie: `/products/99).

Am I misunderstanding something?

Creating a repository from a template is not enabled

Problem :

As mentioned in the Readme anyone cannot generate a new repository with the same directory structure and files as an existing repository as it's not enabled at the moment.

Possible Solution:

Anyone with admin permissions to a repository can make the repository a template.
Enabling the Select Template repository options would solve this problem.

Im facing a challenge to deploy on heroku...

Main instalation don,t work

i exec

npx create-strapi-starter my-project next-ecommerce
before downloading all dependencies and select quickstart it throws the next error.

npx create-strapi-starter my-project next-ecommerce
? Choose your installation type Quickstart (recommended)
This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:
SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at getPackageInfo (/home/juan/.npm/_npx/ecd569b0a81a6814/node_modules/create-strapi-starter/utils/fetch-npm-starter.js:19:27)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async getStarterInfo (/home/juan/.npm/_npx/ecd569b0a81a6814/node_modules/create-strapi-starter/utils/build-starter.js:109:26)
    at async buildStarter (/home/juan/.npm/_npx/ecd569b0a81a6814/node_modules/create-strapi-starter/utils/build-starter.js:133:7)

the same thing happen with yarn.

my node version is 16.13.0