Get started with NovaJAM

✅ What is NovaJAM?

NovaJAM is a Jamstack-based web template built with Next.js, integrated with Contentful and Directus (or any CMS), and fully customizable via JSON data or CMS content. It's designed to be:

• ⚡ Fast and performance-focused
• 🎨 Clean and modern in design
• 🧱 Composable with flexible layout blocks
• 💡 Developer-first with simple structure and conventions

NovaJAM comes in two versions:

• Open Source (Free): Fully functional with JSON-based content configuration, ideal for developers who prefer a code-first approach.
• NovaJAM Pro (Paid): Adds CMS integration (Contentful, Directus), pre-built layouts, and a blogging system for streamlined content management.

🧰 Tech Stack

• Next.js (version 15, App Router, Server Actions)
• TypeScript
• Tailwind CSS
• Contentful / Directus CMS integration options
• Zustand for state management

🚨 Quick Start with Open Source

1. Clone the NovaJAM repo:

git clone https://github.com/minhwpm/novajam.git
cd novajam
yarn install

2. Run the development server:

yarn dev

3. Open the browser:
   Visit http://localhost:3000 to see the starter template in action.

Note: Ensure you're using Node.js version ^18.18.0 || ^19.8.0 || >= 20.0.0

📁 Project Structure

/src
  ├── app          # Core application structure and routing
  ├── components   # Reusable UI blocks and sections
  ├── lib          # CMS clients, utilities, and configuration
  └── store        # Global state management using Zustand

✏️ Edit Content with JSON

Open src/lib/query/static-data/pages.json to adjust titles, add buttons, change images, or switch layouts. Example:

{
  "title": "SaaS Landing Page",
  "url": "/demo/saas",
  "fontMain": "Poppins",
  "colorPrimary": "indigo",
  "colorSecondary": "rose",
  "borderRadius": "large",
  "seo": {
    "metaTitle": "Build Faster with NovaJAM SaaS Demo"
  }
}

This approach gives you full control without a CMS.

🔌 Want CMS Integration?

NovaJAM Pro supports headless CMS platforms like Contentful and Directus for no-code content editing and dynamic content management. You can define sections via CMS entries and configure the entire layout without touching code.

Interested in NovaJAM Pro? Learn more here.

🧠 Next Steps

• Explore src/components/sections/SmartSection to see the core section type that builds any layout.
• Customize the theme and styling (using TailwindCSS).
• Try deploying with Vercel or Netlify for production.

💬 Need Help?

Join the discussion or report issues on GitHub. We’re actively improving the project and welcome feedback from the community.

NovaJAM is built to empower creators to launch faster and smarter. Whether you're using JSON or CMS, open source or Pro — you’re in full control.

Happy building! 💪