This example is not longer recommeded to render dotCMS pages
We release "Universal Visual Editor" a new approach to build and edit headless pages in dotCMS, 📽️ check it out.
For this project we used NextJS to build a JamStack Website which pages and content are fully driven from our demo site. dotCMS + Next.js allows you to manage more than content in your SPA - it includes pages, navigation and page layouts as well.
It is not intended to be a complete site - more of a demonstration of how much control dotCMS gives your content creator and editors in a real world headless environment.
To see the site live, visit:
If you want information on how we build all this, you can see these two videos:
- Build and deploy your Jamstack with NextJS and GraphQL
- Making your Jamstack application editable in real-time with dotCMS
DotCMS as a hybrid CMS allows you not only edit regular pages, Single Page Apps or any kind of JamStack websites.
We are using the latest NextJS features to statically render all the DotCMS pages.
With the release of NextJS 9.4 you can use its Static Site Generator feature to create static DotCMS pages in build time, this is the approach we took here, in a overview we:
- We pull all the pages from DotCMS instance
- Statically generate each page with React Components
- Publish to Vercel
Run yarn
Run yarn setup and follow the instructions
Run yarn dev this will start you NextJS application in development mode with hot-code reloading, error reporting, and more.
To run production locally
- Create a file
.env.production.local - Add
NEXT_PUBLIC_DEPLOY_URL=http://localhost:3000
Run yarn build creates an optimized production build of your application. The output displays information about each route, more information.
Run yarn start starts the application in production mode. The application should be compiled with next build first, more information
EMA is a pattern we defined to allow creator to edit JamStack pages. Read more.
We create a /pages/ema.js that will receive the object from DotCMS to create the page and send it back to our editor.
In DotCMS you need to enable the EMA App, go to:
- System > Apps
- Click on EMA APP
- Click on your host
- Enter: http://localhost:3000/ema (or your domain)
No you can yo to Site Browser and edit a page.
If you DotCMS instance is in the cloud or some external server it will not have access to you localhost in that case you can use a tunnel service like ngrok.com
- Install Docker on your machine.
- Build your container:
docker build -t CONTAINER_NAME . - Run your container:
docker run -p 3000:3000 CONTAINER_NAME
For all deploys you need to set 3 env variables
# The DotCMS instance URL
NEXT_PUBLIC_DOTCMS_HOST=https://demo.dotcms.com
# The url of your nextjs app
NEXT_PUBLIC_DEPLOY_URL=https://yourdomain.com
# Auth token from DotCMS
BEARER_TOKEN=TOKEN
You can deploy to Vercel which is the company behind Nextjs so the support is the best.