Meet Veda, the project behind the certification

Your course lab: Next.js + Contentstack

Import one complete content and catalog experience, then use it to explore modeling, APIs, preview, workflow, and integrations throughout the course.

Import Veda from the Marketplace · Open the Veda setup guide

 

---

Content architecture at a glance

 

page
├── product
├── category
└── product_line
Structured entries → Next.js routes

 

---

Why Veda is our shared starting point

Small kickstarts are useful for proving that a framework can fetch one entry. Veda goes further: it is a complete Next.js App Router reference for a content-driven jewelry catalog and marketing site. It includes several connected content types, reusable page sections, product discovery, metadata, Live Preview, Visual Editor support, and deployment-aware caching.

That makes Veda substantial enough to reveal real architectural decisions while still being understandable as a learning project. You will return to the same stack and codebase throughout this certification instead of inventing a new example for every topic.

Content experience, not a commerce engine

Veda includes products, categories, product lines, navigation, and merchandising pages. It does not include a cart, checkout, payments, customer accounts, or order management. Treat it as the content and experience layer that a commerce platform could complement.

 

---

How Veda supports the course

1. Start here: import a working stack. See real schemas, entries, assets, and routes before studying them in isolation.
2. Courses 1–3: understand the contract. Trace how content types become API shapes and how the app fetches and renders them.
3. Courses 4–7: operate and extend it. Explore preview, releases, workflow, customization, deployment, and integrations.

 

---

What the starter gives you

Layer	What to look for
Content model	page, header, category, product, and product_line content types
Page composition	Modular hero, list, media, two-column, and rich-text sections
Application	Next.js App Router, React, TypeScript, and Tailwind CSS
Delivery	Contentstack Delivery SDK fetchers for pages and catalog entries
Editing	Live Preview, Visual Editor bindings, and preview-aware rendering
Operations	Incremental Static Regeneration and Launch cache-priming support

 

---

Recommended setup: import from Marketplace

The Marketplace route is the course default because it creates the content types, entries, and assets together without requiring CLI setup.

Before you start

You need:

• a Contentstack account
• organization Owner or Admin access to import the starter, or help from someone with that role
• Node.js 20 or later for local development
• familiarity with React, TypeScript, and the Next.js App Router when you begin exploring the code

1. Import the starter

1. Open Kickstart Veda in the Contentstack Marketplace and sign in.
2. Select Import. You can also find it under Marketplace → Starters in Contentstack.
3. Name the new stack. Veda: The Revival Collection makes it easy to recognize during the course.
4. Select Import Starter and wait for the background import to finish.

When the import completes, your stack should contain the Veda content types, sample entries, and assets. You may deploy with Contentstack Launch from the Marketplace flow, but a hosted deployment is not required for the early lessons.

The import is only the CMS half

Marketplace prepares your stack; it does not configure a local checkout of the Next.js application. Complete the next section if you want to run Veda locally.

2. Inspect the content before the code

Open the imported stack and find each of these objects:

• the product content type and one product entry
• the product_line content type (including the underscore in its UID)
• the category content type and its relationship to products
• the page content type and its modular components
• the header entry used for shared navigation

Do not try to understand every field yet. Your goal is to recognize the major content shapes and see that the frontend relies on their UIDs as an API contract.

3. Run the application locally

Clone the canonical project and install its dependencies:

git clone https://github.com/contentstack/kickstart-veda.git
cd kickstart-veda
npm install
cp .env.example .env.local

In your Veda stack, go to Settings → Tokens. Gather the stack API key, a delivery token, a preview token, the target environment, and the stack region. Add them to .env.local using the variable names from .env.example:

 

NEXT_PUBLIC_CONTENTSTACK_API_KEY=<STACK_API_KEY>
NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN=<DELIVERY_TOKEN>
NEXT_PUBLIC_CONTENTSTACK_PREVIEW_TOKEN=<PREVIEW_TOKEN>
NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT=<ENVIRONMENT>
NEXT_PUBLIC_CONTENTSTACK_REGION=<REGION>
NEXT_PUBLIC_CONTENTSTACK_PREVIEW=true

Keep .env.local out of version control. If you deploy through Launch, check that the hosted environment variables map to the exact names expected by the repository.

Start the development server:

npm run dev

Open http://localhost:3000/ and browse beyond the homepage. Visit the product listing, a category, a product line, and an individual product to see how different content types drive different routes.

---

Your setup is complete when

• [ ] The stack exists. You can open the five core Veda content types and their sample entries.
• [ ] The content is published. The entries you plan to browse are available in the environment used by your delivery token.
• [ ] The site renders. The local app shows navigation, pages, and catalog content from your stack.
• [ ] You can trace one item. You can connect a product entry in Contentstack to its route in the running site.

 

---

If something does not work

Symptom	Check first
Empty pages or missing navigation	Confirm the starter finished importing and entries are published to the configured environment.
Content cannot be found	Make sure the stack region and delivery token belong to the same stack.
Preview does not update	Set NEXT_PUBLIC_CONTENTSTACK_PREVIEW=true exactly, enable Live Preview for the stack, and use http://localhost:3000/ as the local preview URL.
A content type query fails	Confirm the expected UIDs are unchanged, especially product_line.
The app works locally but not in Launch	Compare the hosted variables with .env.example and update the Live Preview URL to the deployed HTTPS origin.

For a terminal-first alternative, deeper configuration details, and an explanation of the repository architecture, use the official Veda setup documentation. The Veda developer guide explains why the project is a useful reference implementation and highlights the files worth studying.

Continue the orientation

With Veda in place, complete Your first Contentstack build. You will inspect one of the imported content types and retrieve its published entries through the Content Delivery API.