ElmapiCMS Landing Page NextJS Starter – Installation & Deployment Guide

This guide walks you through getting the ElmapiCMS Landing Page NextJS Starter running locally and deploying it to production.

Prerequisites

1. Node.js ≥ 18 (Recommended 18 LTS or later) and npm (ships with Node) or pnpm / Yarn.
2. An ElmapiCMS project with:
   • Project ID (unique identifier)
   • API Key (read-only)
3. GitHub/Vercel/Netlify account for deployment.

Getting the code

Get landing-page-nextjs.zip from your CodeCanyon download package, or from GitHub Releases → Assets if you bought with GitHub access (same archive). See Starter templates.

# 1. Extract the zip
$ unzip landing-page-nextjs.zip
$ cd landing-page-nextjs
 
# 2. Install dependencies
$ npm install        # or pnpm install / yarn

If you prefer to keep your project under version control (recommended for collaboration/deployments) run:

$ git init && git add . && git commit -m "Initial commit"

This lets you push the code to GitHub, GitLab, or Bitbucket later – useful for continuous deployment platforms like Vercel.

Configure environment variables

Copy the .env.example file to .env.local in the project root:

cp .env.example .env.local

Then fill in the required keys:

# ElmapiCMS credentials
ELMAPI_PROJECT_ID=YOUR_PROJECT_ID
ELMAPI_API_KEY=YOUR_READ_API_KEY
ELMAPI_API_URL=https://elmapicms.com/api   # your ElmapiCMS API URL

ℹ️ Don't commit secrets to version control – .env.local is ignored by default.

Running locally

# Start the Next.js dev server
$ npm run dev
 
# Open http://localhost:3000 in your browser

Any changes to components or pages hot-reload instantly.

⚠️ Local SSL note: If you're also running ElmapiCMS on https://localhost with a self-signed certificate, Node will block requests unless you disable strict TLS verification.

The starter template automatically handles this for development environments with .test URLs. For other local setups, add the environment variable only for local work:

NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev

NODE_TLS_REJECT_UNAUTHORIZED=0 npm run build

NODE_TLS_REJECT_UNAUTHORIZED=0 npm start

🚨 Do not use this flag in production deployments – it bypasses SSL validation entirely.

Creating a new project

1. Log in to ElmapiCMS and click Create Project.
2. In the wizard choose "Choose from a template".
3. Select "Landing Page Next.js" from the template list and check the "Include demo content" option.
4. Click Create Project and the project is provisioned with all collections, relations, and sample data.
5. Grab the Project ID and API Key from Project → Settings → API and paste them into .env.local. See API Access for more information.
6. Start the dev server (npm run dev) – you should see the landing page with demo content immediately. Edit/delete entries as you like.

Project Structure

The Landing Page Next.js starter includes the following CMS collections:

• Settings (singleton): Site-wide configuration including site name, description, URLs, logos, SEO settings, and navigation links
• Hero Section (singleton): Hero section with badge text, title, description, CTA buttons, and images
• Features Section (singleton): Features list with icons, titles, and descriptions
• Pricing Section (singleton): Pricing information with features list
• FAQ Section (singleton): Frequently asked questions
• Blog (collection): Blog posts with content, images, categories, and metadata

Production build

Before deploying, make sure the project builds:

$ npm run build
$ npm start          # Starts the production server locally

Deploying to Vercel (recommended)

1. (Optional) Push the project to GitHub/GitLab/Bitbucket if you haven't already:

   $ git remote add origin <your_repo_url>
   $ git push -u origin main

2. Sign in to Vercel and click "New Project".

3. Import the repository you just pushed and keep the Next.js framework preset.

4. Add the same environment variables (ELMAPI_*) in Settings → Environment Variables.

5. Click Deploy – Vercel will install dependencies, run next build, and host the output globally.

6. Subsequent pushes trigger automatic redeploys.

Preview vs Production: Vercel maps Preview deployments to PR branches. Add the env variables to both Preview and Production scopes.

Custom domains

Attach your domain in Vercel's dashboard, update DNS, and you're done.

Deploying to Netlify

1. Push your code to a GitHub, Gitlab, or Bitbucket repository
2. Go to Netlify and sign up if you haven't already
3. Click "Add new site" and select "Import an existing project"
4. Select your git provider
5. Follow the steps to deploy your project

Deploying to Other Hosts

The Landing Page Next.js starter is standard Next.js 15. Any host that supports Next.js or container deployment works.

Features

• Next.js 15 with App Router
• Tailwind CSS for styling
• Fully Responsive design
• Dark Mode support
• Blog functionality
• SEO Optimized with metadata, sitemap, and robots.txt
• Analytics Ready (Google Analytics)
• Security Headers configured
• Modern UI with shadcn/ui components

Configuration

Site Settings

Configure your site through the Settings singleton in ElmapiCMS:

• Site name, description, and URL
• Logo (light and dark variants)
• Favicon
• SEO settings (meta tags, OG images, Twitter cards)
• Navigation links (header and footer)
• Social media links
• Theme colors
• Google Analytics tracking ID

Content Sections

All content sections are managed through singleton collections in ElmapiCMS:

• Hero Section: Configure your hero banner with CTA buttons
• Features Section: Add your product/service features
• Pricing Section: Set up pricing plans
• FAQ Section: Add frequently asked questions

Blog

The blog uses a standard collection with support for:

• Rich content
• Categories
• Featured images (light and dark variants)
• SEO metadata

Troubleshooting

Build fails on ESLint / TS errors

You should not see this error, but if you do, this is a workaround to avoid the build failing.

1. Open next.config.ts
2. Add the following code:

typescript: {
    // ignore TypeScript errors during build
    ignoreBuildErrors: true
},
eslint: {
    // ignore ESLint errors during build
    ignoreDuringBuilds: true
},