{"id":15002343,"url":"https://github.com/crystallizeapi/crystallize-nextjs-boilerplate","last_synced_at":"2025-04-06T22:08:41.672Z","repository":{"id":43237077,"uuid":"116133038","full_name":"CrystallizeAPI/crystallize-nextjs-boilerplate","owner":"CrystallizeAPI","description":"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.","archived":false,"fork":false,"pushed_at":"2023-10-25T12:38:22.000Z","size":4012,"stargazers_count":326,"open_issues_count":3,"forks_count":59,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-04-06T22:08:27.020Z","etag":null,"topics":["ecommerce","frontend","graphql","hacktoberfest","jamstack","react","ssr","subscription-commerce"],"latest_commit_sha":null,"homepage":"https://crystallize.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CrystallizeAPI.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-03T12:11:43.000Z","updated_at":"2025-03-19T06:10:49.000Z","dependencies_parsed_at":"2024-10-12T07:00:42.525Z","dependency_job_id":"9a2ae374-e8d6-4032-8e27-7f4da3fead90","html_url":"https://github.com/CrystallizeAPI/crystallize-nextjs-boilerplate","commit_stats":null,"previous_names":[],"tags_count":26,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Fcrystallize-nextjs-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Fcrystallize-nextjs-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Fcrystallize-nextjs-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CrystallizeAPI%2Fcrystallize-nextjs-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CrystallizeAPI","download_url":"https://codeload.github.com/CrystallizeAPI/crystallize-nextjs-boilerplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247557767,"owners_count":20958047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ecommerce","frontend","graphql","hacktoberfest","jamstack","react","ssr","subscription-commerce"],"created_at":"2024-09-24T18:49:43.602Z","updated_at":"2025-04-06T22:08:41.653Z","avatar_url":"https://github.com/CrystallizeAPI.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Crystallize NextJS Boilerplate\n\n----\n\nThis repository is what we call a \"subtree split\": a read-only copy of one directory of the main repository. \n\nIf you want to report or contribute, you should do it on the main repository: https://github.com/CrystallizeAPI/boilerplates\n\n----\n\n[![Crystallize Community Slack][21]][22] [![React: latest][0]][1]\n[![Next: latest][2]][3] [![code style: prettier][4]][5]\n[![code linter: Eslint][6]][7]\n\nA fully-working ecommerce storefront boilerplate built with NextJS that runs on\nthe [headless ecommerce][8] \u0026 GraphQL based [product Information Management][9]\nservice [Crystallize][10]. **Clone, run it up and sell!**\n\n_⚠️ We also have some other [open-source ecommerce storefronts][11] that could\nbe of your interest._\n\n## See a LIVE demo\n\nEnjoy our [demo furniture site][24].\n\n![Website that sell plants displaying them as a grid. Ecommerce created with the Crystallize NextJS boilerplate and powered by our GraphQL API](https://i.imgur.com/v3tGgyZ.png)\n\n## Introduction\n\nThis Next.js boilerplate is a great starting point when building [React\necommerce][11] experiences that **create wonderful user experiences because we\nfocus on [frontend performance][12]**.\n\nBuild **a rich ecommerce that stands out from the others with our super\nstructured [PIM][13] engine** (_Product Information Management_) in Crystallize\npowering your product catalogue.\n\n[Site speed](https://crystallize.com/learn/best-practices/frontend-performance/site-speed)\nis an important component of the\n[SEO checklist](https://crystallize.com/learn/best-practices/seo/seo-checklist).\n[Measuring core web vitals](https://crystallize.com/learn/best-practices/frontend-performance/core-web-vitals)\nis important to make sure you rank higher in search engines and also improves\nyour conversion rate. You sell attract more customers and sell more.\n\nBuild content rich eCommerce experiences. Freedom in\n[content modeling](https://crystallize.com/learn/best-practices/information-architecture/content-modeling)\nbuilds the foundation for an successful content strategy.\n\n## Get Started Immediately\n\nTo get started, you can either watch the [livestream where we create an\necommerce from zero to production explaining all the steps][26] or follow the\ninstructions below 👇.\n\nUse the [Crystallize CLI][17] to bootstrap a project in 4 simple guied steps.\n\nSimply run the following command (\u003e= Node 8 required):\n\n```sh\nnpx @crystallize/cli my-project\n```\n\n**This will walk you through the steps:**\n\n1. Choose the tech stack you want\n\n   \u003e To get this storefront, select: Next.js - Complete ecommerce\n\n2. Specify your tenant (the name of your project)\n\n   \u003e At this point, you can select our demo tenant (furniture) or use your own.\n   \u003e If you choose your own, you will have to create the content on our [Product\n   \u003e Information Management][9]\n\n3. Select if you want to support multiple languages\n\n4. Select the service API\n   \u003e At this point, you can select between our demo Service API or your own\n   \u003e service API tenant.\n   \u003e\n   \u003e A [Service API is an open-source project that acts as backend for any of\n   \u003e our open-source storefronts][25] that currently hndles the basket, the\n   \u003e checkout, the authentication, webhooks, etc. You can modify and/or extended\n   \u003e it as you like. Deploy it to Vercel, Amazon Web Services, etc. (we're\n   \u003e adding new provieders)\n   \u003e\n   \u003e Take into account that if you've selected your own tenant, you need to have\n   \u003e your own service API because our demo Service API doesn't support products\n   \u003e with different shape/attributes.\n   \u003e\n   \u003e To have your own Service API, you'll need to execute again, our CLI and\n   \u003e select the option \"Service API - Backend for any of the frontends\"\n\nOnce your project has been created, you can simply navigate into your project's\ndirectory and run the following to start up your development server:\n\n```sh\nnpm run dev\n# or\nyarn dev\n```\n\nThis will start up the server on http://localhost:3000 for development.\n\n## App Structure\n\n### `src/pages/`\n\nPut all your entry pages here. These are interpreted as separate routes by\nNext.js.\n\n### `src/pages/api/`\n\nAll your Vercel [serverless functions][18].\n\n### `src/page-components/`\n\nWe use the `page-components/` directory to hold the actual component content\nrelated to entries in the `pages/` directory.\n\n### `src/components/`\n\nAll your shared React components.\n\n### `src/shapes/`\n\nAll your related stuff to shapes. Components, styles, graphql queries and more.\n\n### `src/ui/`\n\nUI related components live here. Color variables and simple shared components\n\n### `src/lib/`\n\nEnable GraphQL and REST API communication and more for the browser client\n\n### `public/static/`\n\nPublic resources hosted as static files\n\n## Deploying Your Project\n\nThere are multiple alternatives for deployments, two of them being [Vercel][20]\nand [Platform.sh][23]\n\n### Deploying with Vercel\n\n- Register a Vercel account\n- Install vercel `yarn global add vercel` or `npm i -g vercel`\n- Run `vercel`\n\n## License\n\nOpen-source and MIT license.\n\n[0]: https://img.shields.io/badge/react-latest-44cc11.svg?style=flat-square\n[1]: https://github.com/facebook/react\n[2]: https://img.shields.io/badge/next-latest-44cc11.svg?style=flat-square\n[3]: https://github.com/zeit/next.js\n[4]:\n  https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\n[5]: https://github.com/prettier/prettier\n[6]:\n  https://img.shields.io/badge/code_linter-eslint-463fd4.svg?style=flat-square\n[7]: https://github.com/prettier/prettier\n[8]: https://crystallize.com/ecommerce\n[9]: https://crystallize.com/ecommerce/pim\n[10]: https://crystallize.com\n[11]: https://crystallize.com/developers\n[12]: https://crystallize.com/blog/frontend-performance-measuring-kpis\n[13]: https://crystallize.com/ecommerce/pim\n[14]: https://crystallize.com/blog/ecommerce-seo-checklist\n[15]:\n  https://crystallize.com/blog/content-rich-storytelling-makes-juicy-ecommerce\n[16]:\n  https://snowball.digital/blog/content-strategy-for-exponential-growth-marketing\n[17]: https://github.com/crystallizeapi/crystallize-cli\n[18]: https://vercel.com/docs/v2/serverless-functions/introduction\n[19]: https://vercel.com/guides/deploying-nextjs-with-now/\n[20]: https://vercel.com\n[21]:\n  https://img.shields.io/static/v1?label=Slack\u0026logo=slack\u0026message=Crystallize%20Community\u0026color=68d1b7\n[22]: https://slack.com\n[23]: https://platform.sh\n[24]: https://furniture.superfast.shop/\n[25]: https://github.com/CrystallizeAPI/service-api-boilerplate/\n[26]: https://crystallize.com/learn/open-source/boilerplates/react-nextjs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrystallizeapi%2Fcrystallize-nextjs-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrystallizeapi%2Fcrystallize-nextjs-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrystallizeapi%2Fcrystallize-nextjs-boilerplate/lists"}