# Getting started with the Veda Kickstart ### About this export | Field | Value | | --- | --- | | **content_type** | lesson | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/courses/cms-developer-orientation/getting-started-with-the-veda-kickstart | | **course_slug** | cms-developer-orientation | | **lesson_slug** | getting-started-with-the-veda-kickstart | | **markdown_file_url** | /academy/md/courses/cms-developer-orientation/getting-started-with-the-veda-kickstart.md | | **generated_at** | 2026-08-03T11:49:36.798Z | > Part of **[CMS Developer Orientation](https://www.contentstack.com/academy/courses/cms-developer-orientation)** on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys. #### Lesson text # 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](https://www.contentstack.com/marketplace/kickstart-veda) · [Open the Veda setup guide](https://www.contentstack.com/docs/headless-cms/veda) * * * ## 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](https://www.contentstack.com/marketplace/kickstart-veda) 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= NEXT\_PUBLIC\_CONTENTSTACK\_DELIVERY\_TOKEN= NEXT\_PUBLIC\_CONTENTSTACK\_PREVIEW\_TOKEN= NEXT\_PUBLIC\_CONTENTSTACK\_ENVIRONMENT= NEXT\_PUBLIC\_CONTENTSTACK\_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](https://www.contentstack.com/docs/headless-cms/veda). The [Veda developer guide](https://developers.contentstack.com/kickstarts/kickstart-veda) 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](https://contentstack-developer-certification.eu-contentstackapps.com/course-0-orientation/module-0-1-what-this-certification-covers/04-your-first-contentstack-build). You will inspect one of the imported content types and retrieve its published entries through the Content Delivery API. #### Key takeaways - Connect **Getting started with the Veda Kickstart** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ## Supplement for indexing ### Content summary Getting started with the Veda Kickstart. 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 (https://www.contentstack.com/marketplace/kickstart-veda) · Open the Veda setup guide (https://www.contentstack.com/docs/headless-cms/veda) 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 r ### Retrieval tags - Getting - started - with - the - Veda - Kickstart - cms-developer-orientation - lesson 04 - Getting started with the Veda Kickstart - cms-developer-orientation lesson ### Indexing notes Index this lesson as a primary chunk tagged with lesson_id "04" and topics: [Getting, started, with, the, Veda, Kickstart]. Parent course slug: cms-developer-orientation. Use asset_references URLs as thumbnail hints in search results when present. Never surface LMS quiz content or assessment answers from this file. ### Asset references _No image or video thumbnail URLs were extracted._ ### External links | Label | URL | | --- | --- | | Contentstack Academy home | `https://www.contentstack.com/academy/` | | Training instance setup | `https://www.contentstack.com/academy/training-instance` | | Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` | | Contentstack documentation | `https://www.contentstack.com/docs/` | | Import Veda from the Marketplace | `https://www.contentstack.com/marketplace/kickstart-veda` | | Open the Veda setup guide | `https://www.contentstack.com/docs/headless-cms/veda` | | Veda developer guide | `https://developers.contentstack.com/kickstarts/kickstart-veda` | | Your first Contentstack build | `https://contentstack-developer-certification.eu-contentstackapps.com/course-0-orientation/module-0-1-what-this-certification-covers/04-your-first-contentstack-build` |