ElmapiCMS Blog NextJS Starter – Installation & Deployment Guide

This guide walks you through getting the ElmapiCMS Blog 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)
   • (optional) Create Key (if you want to enable the comment form or mutations)
3. GitHub/Vercel/Netlify account for deployment.

Getting the code

Get BlogNextJS.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 BlogNextJS.zip
$ cd BlogNextJS
 
# 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.local.example file to .env.local in the project root:

cp .env.local.example .env.local

Then fill in the required keys:

# ElmapiCMS credentials
ELMAPI_PROJECT_ID=YOUR_PROJECT_ID
ELMAPI_API_KEY=YOUR_READ_API_KEY
 
# Optional – enable mutations (e.g. blog comments)
ELMAPI_CREATE_KEY=YOUR_CREATE_KEY
 
ELMAPI_API_URL=https://elmapicms.com/api   # your ElmapiCMS API URL
ELMAPI_IMAGE_HOST=elmapicms.com           # your ElmapiCMS image domain

ℹ️ 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.

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

Or edit your package.json to prepend the flag:

{
  "scripts": {
    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 next dev",
    "build": "NODE_TLS_REJECT_UNAUTHORIZED=0 next build",
    "start": "NODE_TLS_REJECT_UNAUTHORIZED=0 next 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 “Blog NextJS” 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 demo posts immediately. Edit/delete entries as you like.

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 Blog NextJS starter is standard Next.js 15. Any host that supports Next.js or container deployment works.

Enabling comments (optional)

The comment form in each post uses the POST /comments API. To enable it:

1. Provide ELMAPI_CREATE_KEY in .env.*.
2. Ensure the API token has the create permission.

Without the create key the UI remains visible but API calls will 401.

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
},