crystallize-nextjs-boilerplate

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.

[{"step":"Install the boilerplate","action":"Run `npx create-next-app -e https://github.com/crystallize/crystallize-nextjs-boilerplate` in your terminal. This scaffolds a Next.js project with all eCommerce dependencies pre-installed (Crystallize SDK, Stripe, TailwindCSS).","tip":"Use the `--example` flag if you want a specific starter template (e.g., `--example coffee-store`)."},{"step":"Configure your Crystallize account","action":"Log in to your Crystallize dashboard, navigate to **Settings > API Keys**, and generate a new API key. Add this key to your `.env.local` file as `NEXT_PUBLIC_CRYSTALLIZE_API_KEY`.","tip":"Ensure your Crystallize catalog is set up with product variants, categories, and SEO metadata before connecting."},{"step":"Customize the marketing content","action":"Edit the `src/components/HeroSection.jsx` and `src/components/ProductGrid.jsx` files to match your brand. Replace placeholder text with your value prop, product descriptions, and CTA buttons. Use the `brand.json` file to update colors, fonts, and logos.","tip":"Leverage the boilerplate’s built-in `brand.json` file to maintain consistency across all marketing assets."},{"step":"Deploy and optimize","action":"Push your code to GitHub/GitLab and deploy to Vercel using their Next.js template. Enable **Edge Functions** in Vercel for JAMStack performance. Use the Crystallize dashboard to track conversions and A/B test CTAs.","tip":"Enable Vercel’s **Speed Insights** to monitor performance and set up Google Analytics 4 for conversion tracking."},{"step":"Scale with integrations","action":"Connect additional tools via the boilerplate’s pre-configured hooks: Mailchimp for email capture, Zapier for CRM sync, and Discountify for dynamic pricing. Use the `src/lib/integrations.js` file to add new services.","tip":"The boilerplate includes a `hooks/useAnalytics.js` file for tracking user behavior—customize events to match your marketing funnel."}]