Starter Kit & Optical Deployment

For developers getting started with content management systems, we provide guidance for both learning CMS development patterns and deploying production-ready Optical instances.

What is the Starter Kit?

The Directus Next.js Starter Kit provides a foundation for understanding CMS development:

• Directus CMS: A powerful, developer-friendly headless content management system
• Next.js Frontend: Modern React framework with server-side rendering and static generation
• Pre-configured Integration: API connections and content fetching already set up

Why Use This Starter Kit?

Rapid Development

• Get a working CMS and frontend up and running in minutes
• Skip the initial setup and configuration complexity
• Focus on building your unique features instead of boilerplate code

Flexibility

• Full control over both frontend and backend
• Easy to customize and extend
• Compatible with Optical’s content management approach

Getting Started

Step 1: Deploy CMS Schema to Staging

First, deploy the CMS template to your Optical Flex staging instance:

1. Prerequisites

   • Access to target CMS instance (e.g., Optical Flex deployment)
   • Admin token from CMS interface
   • Ensure npm is installed: npm -v

2. Prepare Environment

   # Disable SSL certificate rejection for staging environments
   export NODE_TLS_REJECT_UNAUTHORIZED=0Copy to clipboardErrorCopied

   Note: Ensure Cloudflare is enabled throughout this process

3. Deploy CMS Template

   npx directus-template-cli@latest apply --partial --no-extensions --no-filesCopy to clipboardErrorCopied

4. Configuration Steps

   • Select “Community templates” when prompted
   • Choose “CMS” template
   • Enter your CMS URL (e.g., https://cms.xxx.staging.optical.gov.sg)
   • Provide your Directus Admin Token

Expected Output:

You selected CMS
│
◇  What is your Directus URL?
│  https://cms.xxx.staging.optical.gov.sg/
│
◇  How do you want to log in?
│  Directus Access Token
│
◇  What is your Directus Admin Token?
│ xxxxxxxxxxxxxxxxxxxxx
-- Logged in as [Your Name]
Loading collections, fields, relations, roles, policies, permissions...
Template applied successfully.Copy to clipboardErrorCopied

Step 2: Setup Local Web App Development

With your CMS schema deployed, set up the local development environment:

1. Clone the repository

   git clone https://github.com/directus-labs/starters.git
   cd starters/cms/nextjsCopy to clipboardErrorCopied

2. Follow the setup instructions The repository includes detailed README instructions for:

   • Installing dependencies
   • Configuring the Next.js frontend
   • Connecting to your staging CMS instance
   • Setting up local development environment

3. Connect to your staging CMS

   • Update environment variables to point to your staging CMS URL
   • Use your CMS API credentials for local development
   • Test the connection and data fetching

Customization & Next Steps

After completing both steps:

1. Use your staging CMS: Content editors can start adding content to the staging instance
2. Develop locally: Build and customize your frontend against the live staging data
3. Iterate and deploy:
   • Test changes locally with real staging data
   • Deploy frontend updates when ready
   • Add custom features specific to your project needs

Integration with Optical

The patterns and approaches from this starter kit are directly applicable to Optical Flex development:

• Content API Integration: Similar patterns for fetching and displaying content
• Custom Content Types: Approach to creating and managing custom content structures
• Frontend Architecture: Modern React/Next.js patterns that work well with any headless CMS

For Optical-specific development, continue with:

• Deploying Web Applications
• Custom Content Blocks
• Hosting Options

Resources

• Directus Next.js Starter Repository
• Directus Documentation
• Next.js Documentation