Giter Club home page Giter Club logo

crystallize-nextjs-boilerplate's Introduction

Crystallize NextJS Boilerplate

Crystallize Community Slack React: latest Next: latest code style: prettier code linter: Eslint

The bare minimum skeleton you need to get a frontend up and running on the headless ecommerce & GraphQL based product Information Management service Crystallize. React commerce with Next.js SSR.

This Next.js boilerplate is a great starting point when building React ecommerce experiences with frontend performance in focus. You can have rich ecommerce content with the super structured PIM engine in Crystallize powering your product catalogue.

Fast frontend performance delivers a better ecommerce experience and is a key ingredient in the ecommerce SEO checklist. Rich content driven ecommerce experiences builds the foundation for a content strategy for exponential growth marketing.

Check it out, the boilerplate is Open Source and MIT licensed.

Get a quick preview

Deploy to Vercel

Getting Started

You can use Crystallize CLI to bootstrap a project with this Next.js + React boilerplate.

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

npx @crystallize/cli my-project

This will walk you through the steps of specifying your tenant, choosing the template (Next.js + React) and adding additional features such as Vercel.

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/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

src/lib-api/

Serverless API functions related code

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

crystallize-nextjs-boilerplate's People

Contributors

hakonkrogh avatar nerdenough avatar meetdave3 avatar stavrossnowball avatar didrikhegna avatar papelipe avatar danisal avatar stasotiro avatar dependabot[bot] avatar otaviojava avatar ruheni avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.