Fully featured Next.js / React eCommerce boilerplate. Combine rich marketing content with product information to create highly converting online stores. Fully tuned for performance with JAMStack edge page generation.

Home Page: https://crystallize.com

License: MIT License

JavaScript 99.95% Shell 0.05%

frontend react ssr graphql ecommerce subscription-commerce hacktoberfest jamstack

crystallize-nextjs-boilerplate's Introduction

Crystallize NextJS Boilerplate

This repository is what we call a "subtree split": a read-only copy of one directory of the main repository.

If you want to report or contribute, you should do it on the main repository: https://github.com/CrystallizeAPI/boilerplates

A fully-working ecommerce storefront boilerplate built with NextJS that runs on the headless ecommerce & GraphQL based product Information Management service Crystallize. Clone, run it up and sell!

⚠️ We also have some other open-source ecommerce storefronts that could be of your interest.

See a LIVE demo

Enjoy our demo furniture site.

Introduction

This Next.js boilerplate is a great starting point when building React ecommerce experiences that create wonderful user experiences because we focus on frontend performance.

Build a rich ecommerce that stands out from the others with our super structured PIM engine (Product Information Management) in Crystallize powering your product catalogue.

Site speed is an important component of the SEO checklist. Measuring core web vitals is important to make sure you rank higher in search engines and also improves your conversion rate. You sell attract more customers and sell more.

Build content rich eCommerce experiences. Freedom in content modeling builds the foundation for an successful content strategy.

Get Started Immediately

To get started, you can either watch the livestream where we create an ecommerce from zero to production explaining all the steps or follow the instructions below 👇.

Use the Crystallize CLI to bootstrap a project in 4 simple guied steps.

Simply run the following command (>= Node 8 required):

npx @crystallize/cli my-project

This will walk you through the steps:

Choose the tech stack you want

To get this storefront, select: Next.js - Complete ecommerce
Specify your tenant (the name of your project)

At this point, you can select our demo tenant (furniture) or use your own. If you choose your own, you will have to create the content on our Product Information Management
Select if you want to support multiple languages
Select the service API

At this point, you can select between our demo Service API or your own service API tenant.

A Service API is an open-source project that acts as backend for any of our open-source storefronts that currently hndles the basket, the checkout, the authentication, webhooks, etc. You can modify and/or extended it as you like. Deploy it to Vercel, Amazon Web Services, etc. (we're adding new provieders)

Take into account that if you've selected your own tenant, you need to have your own service API because our demo Service API doesn't support products with different shape/attributes.

To have your own Service API, you'll need to execute again, our CLI and select the option "Service API - Backend for any of the frontends"

Once your project has been created, you can simply navigate into your project's directory and run the following to start up your development server:

npm run dev
# or
yarn dev

This will start up the server on http://localhost:3000 for development.

App Structure

`src/pages/`

Put all your entry pages here. These are interpreted as separate routes by Next.js.

`src/pages/api/`

All your Vercel serverless functions.

`src/page-components/`

We use the page-components/ directory to hold the actual component content related to entries in the pages/ directory.

`src/components/`

All your shared React components.

`src/shapes/`

All your related stuff to shapes. Components, styles, graphql queries and more.

`src/ui/`

UI related components live here. Color variables and simple shared components

`src/lib/`

Enable GraphQL and REST API communication and more for the browser client

`public/static/`

Public resources hosted as static files

Deploying Your Project

There are multiple alternatives for deployments, two of them being Vercel and Platform.sh

Deploying with Vercel

Register a Vercel account
Install vercel yarn global add vercel or npm i -g vercel
Run vercel

License

Open-source and MIT license.

crystallize-nextjs-boilerplate's People

Contributors

Stargazers

Watchers

crystallize-nextjs-boilerplate's Issues

Idea: Include Algolia Places example in checkout

The checkout is currently quite barebone in the fields where we record customer information. We could leverage the Algolia Places API here to easily get the users address.

Requirements for setup

Algolia Javascript Client SDK, lazy loaded in the Checkout
Algolia App ID (provided by the user)
Algolia Places API Key (provided by the user)
Extending the shared customerInfo object with the address info given by the search result

We cannot build the site to Netlify

Hello, when trying to build the site to Netlify we get the following error:

5:27:03 PM: Error occurred prerendering page "/en". Read more: https://err.sh/next.js/prerender-error
5:27:03 PM: ReferenceError: window is not defined
5:27:03 PM:     at /opt/build/repo/node_modules/imsc/src/main/js/html.js:1725:53
5:27:03 PM:     at Object.<anonymous> (/opt/build/repo/node_modules/imsc/src/main/js/html.js:1742:3)
5:27:03 PM:     at Module._compile (internal/modules/cjs/loader.js:1138:30)
5:27:03 PM:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
5:27:03 PM:     at Module.load (internal/modules/cjs/loader.js:986:32)
5:27:03 PM:     at Function.Module._load (internal/modules/cjs/loader.js:879:14)
5:27:03 PM:     at Module.require (internal/modules/cjs/loader.js:1026:19)
5:27:03 PM:     at require (internal/modules/cjs/helpers.js:72:18)
5:27:03 PM:     at Object.<anonymous> (/opt/build/repo/node_modules/imsc/src/main/js/main.js:29:22)
5:27:03 PM:     at Module._compile (internal/modules/cjs/loader.js:1138:30)
5:27:03 PM: Error: {"message":"Tenant undefined does not exist.","errorCode":0,"traceId":"d42e452d-bdee-4cb5-b8d0-bc022baafa6f"}
5:27:03 PM:     at simplyFetchFromGraph (/opt/build/repo/.next/server/pages/_app.js:1508:11)
5:27:03 PM:     at processTicksAndRejections (internal/process/task_queues.js:97:5)
5:27:03 PM:     at async Function.module.exports.IlR1.MyApp.getInitialProps (/opt/build/repo/.next/server/pages/_app.js:1242:9)
5:27:03 PM:     at async loadGetInitialProps (/opt/build/repo/node_modules/next/dist/next-server/lib/utils.js:5:91)
5:27:03 PM:     at async renderToHTML (/opt/build/repo/node_modules/next/dist/next-server/server/render.js:25:1484)
5:27:03 PM:     at async /opt/build/repo/node_modules/next/dist/export/worker.js:26:6
5:27:03 PM:     at async /opt/build/repo/node_modules/next/dist/build/tracer.js:3:470
5:27:03 PM: Could not fetch common page data
5:27:03 PM: Error: {"message":"Tenant undefined does not exist.","errorCode":0,"traceId":"4133802a-8fc0-4625-a959-d1a57e353642"}
5:27:03 PM:     at simplyFetchFromGraph (/opt/build/repo/.next/server/pages/_app.js:1508:11)
5:27:03 PM:     at processTicksAndRejections (internal/process/task_queues.js:97:5)
5:27:03 PM:     at async Function.module.exports.IlR1.MyApp.getInitialProps (/opt/build/repo/.next/server/pages/_app.js:1242:9)
5:27:03 PM:     at async loadGetInitialProps (/opt/build/repo/node_modules/next/dist/next-server/lib/utils.js:5:91)
5:27:03 PM:     at async renderToHTML (/opt/build/repo/node_modules/next/dist/next-server/server/render.js:25:1484)
5:27:03 PM:     at async /opt/build/repo/node_modules/next/dist/export/worker.js:26:6
5:27:03 PM:     at async /opt/build/repo/node_modules/next/dist/build/tracer.js:3:470
5:27:03 PM: Could not fetch common page data
5:27:03 PM: info  - Generating static pages (3/3)
5:27:03 PM: > Build error occurred
5:27:03 PM: Error: Export encountered errors on following paths:
5:27:03 PM: 	/en
5:27:03 PM:     at /opt/build/repo/node_modules/next/dist/export/index.js:30:1103
5:27:03 PM:     at async /opt/build/repo/node_modules/next/dist/build/tracer.js:3:470
5:27:03 PM:     at async /opt/build/repo/node_modules/next/dist/build/index.js:39:69
5:27:03 PM:     at async /opt/build/repo/node_modules/next/dist/build/tracer.js:3:470
5:27:03 PM:     at async /opt/build/repo/node_modules/next/dist/build/index.js:21:731
5:27:03 PM:     at async /opt/build/repo/node_modules/next/dist/build/tracer.js:3:470
5:27:03 PM: npm ERR! code ELIFECYCLE
5:27:03 PM: npm ERR! errno 1
5:27:03 PM: npm ERR! [email protected] build: `next build`
5:27:03 PM: npm ERR! Exit status 1
5:27:03 PM: npm ERR!
5:27:03 PM: npm ERR! Failed at the [email protected] build script.
5:27:03 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
5:27:03 PM: npm ERR! A complete log of this run can be found in:
5:27:03 PM: npm ERR!     /opt/buildhome/.npm/_logs/2021-02-20T14_27_03_484Z-debug.log

Can you help me? Thanks

when launching latest version, of boilerplate i18n changes

export function I18nextProvider({ locale, localeResource, children }) {

13 | const lng = locale.appLanguage;
| ^

Change To US Currency

   ```  const createOrderResult = await klarna.createOrder({
      cart: klarna.crystallizeBasketToKlarnaCart(validatedBasket),
      purchase_country: 'US',
      purchase_currency: 'USD',
      locale: 'en-US',

I have an error

Error: {
"http_status_code" : 401,
"http_status_message" : "Unauthorized",
"internal_message" : "Unauthorized"
}
at Object.createOrder (/Users/stunjiturner/Downloads/crystallize-frontend-boilerplate-master/node_modules/@crystallize/node-klarna/v2/createOrder.js:38:9)
at process.internalTickCallback (internal/process/next_tick.js:77:7)

Out of Box Failure: window is not defined

Hello,

Thank you for creating this resource, it is very educational and really promising!

As I'm trying to learn it, I'm seeing some failures out of the box. For example, if I run the following:

$ npx @crystallize/cli test && cd test && npm install && npm run build

and choose all the default options:

 All right, Next.js it is
 In folder ./test
 Using Crystallize tenant furniture
 In a single language
 With the demo Service API

at this stage:

info  - Collecting page data  
[=== ] info  - Generating static pages (0/91)

I get the following errors:

Error occurred prerendering page "/en/[...catalogue]". Read more: https://err.sh/next.js/prerender-error
ReferenceError: window is not defined
    at /Users/rajadain/play/crystallize-nextjs/test/node_modules/imsc/src/main/js/html.js:1725:53
    at Object.<anonymous> (/Users/rajadain/play/crystallize-nextjs/test/node_modules/imsc/src/main/js/html.js:1742:3)
    at Module._compile (node:internal/modules/cjs/loader:1091:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1120:10)
    at Module.load (node:internal/modules/cjs/loader:971:32)
    at Function.Module._load (node:internal/modules/cjs/loader:812:14)
    at Module.require (node:internal/modules/cjs/loader:995:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/Users/rajadain/play/crystallize-nextjs/test/node_modules/imsc/src/main/js/main.js:29:22)
    at Module._compile (node:internal/modules/cjs/loader:1091:14)

Error occurred prerendering page "/en/shop". Read more: https://err.sh/next.js/prerender-error
ReferenceError: window is not defined
    at /Users/rajadain/play/crystallize-nextjs/test/node_modules/imsc/src/main/js/html.js:1725:53
    at Object.<anonymous> (/Users/rajadain/play/crystallize-nextjs/test/node_modules/imsc/src/main/js/html.js:1742:3)
    at Module._compile (node:internal/modules/cjs/loader:1091:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1120:10)
    at Module.load (node:internal/modules/cjs/loader:971:32)
    at Function.Module._load (node:internal/modules/cjs/loader:812:14)
    at Module.require (node:internal/modules/cjs/loader:995:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/Users/rajadain/play/crystallize-nextjs/test/node_modules/imsc/src/main/js/main.js:29:22)
    at Module._compile (node:internal/modules/cjs/loader:1091:14)

Error occurred prerendering page "/en/shop/plants". Read more: https://err.sh/next.js/prerender-error
ReferenceError: window is not defined
    at /Users/rajadain/play/crystallize-nextjs/test/node_modules/imsc/src/main/js/html.js:1725:53
    at Object.<anonymous> (/Users/rajadain/play/crystallize-nextjs/test/node_modules/imsc/src/main/js/html.js:1742:3)
    at Module._compile (node:internal/modules/cjs/loader:1091:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1120:10)
    at Module.load (node:internal/modules/cjs/loader:971:32)
    at Function.Module._load (node:internal/modules/cjs/loader:812:14)
    at Module.require (node:internal/modules/cjs/loader:995:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/Users/rajadain/play/crystallize-nextjs/test/node_modules/imsc/src/main/js/main.js:29:22)
    at Module._compile (node:internal/modules/cjs/loader:1091:14)

> Build error occurred
Error: Export encountered errors on following paths:
	/en/[...catalogue]
	/en/shop
	/en/shop/plants
    at /Users/rajadain/play/crystallize-nextjs/test/node_modules/next/dist/export/index.js:30:1103
    at async /Users/rajadain/play/crystallize-nextjs/test/node_modules/next/dist/build/tracer.js:3:470
    at async /Users/rajadain/play/crystallize-nextjs/test/node_modules/next/dist/build/index.js:39:69
    at async /Users/rajadain/play/crystallize-nextjs/test/node_modules/next/dist/build/tracer.js:3:470
    at async /Users/rajadain/play/crystallize-nextjs/test/node_modules/next/dist/build/index.js:21:731
    at async /Users/rajadain/play/crystallize-nextjs/test/node_modules/next/dist/build/tracer.js:3:470

I'm running macOS Big Sur, node v15.10.0, and npm 7.6.0 in case that helps. The full output log of the above command is here: crystallize-cli-failure.txt

As you can see, I have not made any changes, just running this out of the box, and seeing this failure. Any help is appreciated.

Redux state cannot be hydrated from server

The initialState never gets passed. There is an unused Apollo object messing things up

TypeError: Cannot read property 'map' of null

I get this error when trying to follow the guide, something I have done wrong?

TypeError: Cannot read property 'map' of null at Object.children (C:\Projects\Privat\Crystallize\MyShop\.next\server\static\development\pages\index.js:1776:538) at finish (C:\Projects\Privat\Crystallize\MyShop\node_modules\react-apollo\react-apollo.cjs.js:354:55) at Query.render (C:\Projects\Privat\Crystallize\MyShop\node_modules\react-apollo\react-apollo.cjs.js:358:16) at processChild (C:\Projects\Privat\Crystallize\MyShop\node_modules\react-dom\cjs\react-dom-server.node.development.js:2959:18) at resolve (C:\Projects\Privat\Crystallize\MyShop\node_modules\react-dom\cjs\react-dom-server.node.development.js:2812:5) at ReactDOMServerRenderer.render (C:\Projects\Privat\Crystallize\MyShop\node_modules\react-dom\cjs\react-dom-server.node.development.js:3202:22) at ReactDOMServerRenderer.read (C:\Projects\Privat\Crystallize\MyShop\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29) at renderToString (C:\Projects\Privat\Crystallize\MyShop\node_modules\react-dom\cjs\react-dom-server.node.development.js:3646:27) at render (C:\Projects\Privat\Crystallize\MyShop\node_modules\next-server\dist\server\render.js:81:16) at renderPage (C:\Projects\Privat\Crystallize\MyShop\node_modules\next-server\dist\server\render.js:230:20) at ctx.renderPage (C:\Projects\Privat\Crystallize\MyShop\.next\server\static\development\pages\_document.js:1644:26) at _callee2$ (C:\Projects\Privat\Crystallize\MyShop\.next\server\static\development\pages\_document.js:942:24) at tryCatch (C:\Projects\Privat\Crystallize\MyShop\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:45:40) at Generator.invoke [as _invoke] (C:\Projects\Privat\Crystallize\MyShop\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:271:22) at Generator.prototype.(anonymous function) [as next] (C:\Projects\Privat\Crystallize\MyShop\node_modules\@babel\runtime\node_modules\regenerator-runtime\runtime.js:97:21) at asyncGeneratorStep (C:\Projects\Privat\Crystallize\MyShop\.next\server\static\development\pages\_document.js:294:24)

Refactor the pages/ folder

Next does not fly well with our current pages/ setup. We want to make the pages folder only contain the actual routes, not styles and helper components and whatnot.

Let's make a new top level directory for where the actual page components will be (not sure of the best name for this), and let's keep the files inside pages/ just import the page components.

The attributes for variants are not removed in the UI, if they are not present in one of the variants

Example. PIM

variants created.
Bue XL
Blue L
Blue S
Red XL

the ui in the boilerplate, will generate variants for the sizes XL, L ,S, which works correctly, but when red is selected, L,S size attributes are still displayed, which does not exist for red. this causes and error in the boilerplate.

Unhandled Runtime Error

Running the project locally triggers the following:

AbortError: The fetching process for the media resource was aborted by the user agent at the user's request.

src/components/video-player/player.js (114:37) @ VideoPlayer/</<

  112 |       }
  113 | 
> 114 |       return () => playerRef.current.dispose();
      |                                     ^
  115 |     }
  116 |   }, [sources, autoplay, controls, loop, fluid]);
  117 |

Background and foreground colors do not have a sufficient contrast ratio

According to Lighthouse the light blue colour of the buttons and text does not have a distinct contrast from the background. This is especially noticeable on the price of the products where it is quite difficult to read.

Current colour: #8FDECB / rgb(143, 222, 203)

Product grid layout overflow

When the width of the product items become to small the titles and text overflow the boxes.

npx @crystallize/cli bug

I'm getting the below error every time I run npx @crystallize/cli <project-name> . I would appreciate any help fixing it. Thanks.

npx @crystallize/cli test-project
npx: installed 108 in 12.891s
? Which shop do you want to use? Our template shop - prefilled with lots of juicy data
? Which template would you like to use? Next.js + React
? Which features would you like to use? Add payment methods for checkout, Use SendGrid (https://sendgrid.com) for emails
? Which payment methods would you like to use? Stripe (https://stripe.com)
? Configure tokens and API keys now? (You can configure these in your .env/.env.local file later) No
? Save these template settings as default? No
info Cloning https://github.com/CrystallizeAPI/crystallize-nextjs-boilerplate
Too many arguments.

usage: git clone [<options>] [--] <repo> [<dir>]

    -v, --verbose         be more verbose
    -q, --quiet           be more quiet
    --progress            force progress reporting
    -n, --no-checkout     don't create a checkout
    --bare                create a bare repository
    --mirror              create a mirror repository (implies bare)
    -l, --local           to clone from a local repository
    --no-hardlinks        don't use local hardlinks, always copy
    -s, --shared          setup as shared repository
    --recursive           initialize submodules in the clone
    --recurse-submodules  initialize submodules in the clone
    --template <template-directory>
                          directory from which templates will be used
    --reference <repo>    reference repository
    --dissociate          use --reference only while cloning
    -o, --origin <name>   use <name> instead of 'origin' to track upstream
    -b, --branch <branch>
                          checkout <branch> instead of the remote's HEAD
    -u, --upload-pack <path>
                          path to git-upload-pack on the remote
    --depth <depth>       create a shallow clone of that depth
    --single-branch       clone only one branch, HEAD or --branch
    --separate-git-dir <gitdir>
                          separate git dir from working tree
    -c, --config <key=value>
                          set config inside the new repository

error Unable to clone https://github.com/CrystallizeAPI/crystallize-nextjs-boilerplate
info Creating a new Crystallize project
error ENOENT: no such file or directory, uv_chdir { Error: ENOENT: no such file or directory, uv_chdir
    at process.chdir (/home/homeuser/.npm/_npx/900/lib/node_modules/@crystallize/cli/node_modules/graceful-fs/polyfills.js:20:9)
    at createNextjsProject (/home/homeuser/.npm/_npx/900/lib/node_modules/@crystallize/cli/lib/templates/nextjs.js:237:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7) errno: -2, code: 'ENOENT', syscall: 'uv_chdir' }

Redux state cannot be hydrated from server

The initialState never gets passed. There is an unused Apollo object messing things up

Images not being sized correctly

This issue has just started occurring for me this afternoon after reinstalling my npm dependencies. Not sure if it's just my machine or some dependency has been updated which is causing the issue.

Product descriptions not being rendered

It appears that the description is only being returned with kind and textContent, but not type, and so just returning <br/> instead: https://github.com/CrystallizeAPI/crystallize-content-chunk/blob/master/src/react-chunk.jsx#L32-L40

npm run dev failed with initiall start proyect

maybe need another reference?

\pages_document.js: transform-react-jsx: pragma has been set but pragmaFrag has not been set

at transformFile.next (<anonymous>)
at run.next (<anonymous>)
at transform.next (<anonymous>)

Enable Now v2 deployments

This includes:

Remove the i18next library. We'll add it back once next has support for request middleware
Remove the server/ folder.
Take a look at the login feature and see if it is possible to do using getInitialProps in pages/_app.js
adding now.json to setup dynamic routing, see this example this example for inspiration

The issue is the function in this file https://github.com/CrystallizeAPI/crystallize-nextjs-boilerplate/blob/main/src/lib/i18n.js is using the Intl.NumberFormat to format the corrency. The function is never run on server side but only client. So on server site the currency is not added, meaning price is 400 where on client it will be 400,00 kr in DKK currency.

I also tried with EUR, but that also fails.

To reproduce just run the boilerplate on localhost with locale en-US and da-DK, and eur and dkk as currency.

I reached out too @hakonkrogh on slach which mentioned that on vercel builds with node version below v. 14 this will help https://vercel.com/support/articles/how-can-i-use-full-icu-with-vercel
I am running v. 14, so it was not the fix for this issue.

crystallizeapi / crystallize-nextjs-boilerplate Goto Github PK

crystallize-nextjs-boilerplate's Introduction

Crystallize NextJS Boilerplate

See a LIVE demo

Introduction

Get Started Immediately

App Structure

src/pages/

src/pages/api/

src/page-components/

src/components/

src/shapes/

src/ui/

src/lib/

public/static/