CMS + Next.js: Setup

Step 1: Get Access to Erxes SaaS

You need access to an Erxes SaaS instance and an admin user account.

• Your Erxes domain should follow this format: https://[your-domain].app.erxes.io
• If you don’t have a SaaS instance yet, ask your manager to create one for you.
• Make sure the CMS and Client Portal plugins are installed on that SaaS instance.

Step 2: Generate an API Token

You’ll need an API token to fetch data from Erxes.

1. Visit your Erxes SaaS domain: https://[your-domain].app.erxes.io
2. Go to: Settings → Apps (Legacy)
3. Click “Add New App”
4. Fill out the form:
   • Name: Use your website’s name
   • User Group: Select admin
   • Expiration Date: Set a reasonable expiration
   • Permissions: Check “Allow all permissions”
5. After creating the app, copy the generated token — you’ll use this to connect to the CMS via GraphQL.
6. Create Client Portal:
   • Go to: Settings → Business portal → Client Portal
   • Click Add new Client Portal”
   • Fill out the form and submit it.
   • Find Authentication menu in the Client Portal settings. and in Erxes App Token field, paste the token you copied earlier.

✅ Store this token in your environment file as ERXES_APP_TOKEN.

Step 3: Create CMS Content

Before connecting your frontend, make sure your CMS has the necessary content created. Go to your Erxes SaaS domain and create the following:

• Pages – Static content for routes like /about, /contact, etc.
• Posts – Blog articles or news content
• Categories – Used to group posts or pages
• Menus – Used for your site's navigation

⚠️ These entries are required to successfully fetch and display content. If they’re missing, GraphQL queries may return null or empty arrays.

Step 4: Install Required Packages

You’ll need to install Apollo Client and GraphQL to communicate with the CMS.

Using npm:

npm install @apollo/client graphql

Using yarn

yarn add @apollo/client graphql

Step 5: Update your next.config.ts(mjs)

Before using Apollo Client, make sure your environment variables are properly set and exposed to the frontend.

1. Your next config file:

// next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  env: {
    ERXES_API_URL: "https://[your-domain].app.erxes.io/gateway/graphql",
    ERXES_URL: "https://[your-domain].app.erxes.io/gateway",
    ERXES_FILE_URL: "https://[your-domain].app.erxes.io/gateway/read-file?key=", // updated to match the domain
    ERXES_APP_TOKEN: "", // your copied token earlier
  },
  images: {
    unoptimized: true,
    remotePatterns: [
      {
        protocol: "http",
        hostname: "localhost",
        port: "4000", // your local development server port
      },
      {
        protocol: "https",
        hostname: "[your-domain].app.erxes.io", // updated to match the domain
      },
    ],
  },
};

export default nextConfig;

Step 6: Set Up Apollo Client

Create a shared Apollo Client instance so your app can communicate with the CMS.

Now your Next.js application is set up to communicate with the Erxes CMS using Apollo Client. You can start querying and mutating data from the CMS in your components.

This documentation is designed for junior or intern developers working with Erxes SaaS as backend. Our stack includes: