DotCMS Next.js / JamStack Starter
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
DotCMS as a hybrid CMS allows you not only edit regular pages, Single Page Apps or any kind of JamStack websites.
NextJS
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
Getting Started
Install dependencies
Run yarn
Create environmental variables
Run yarn setup
and follow the instructions
NextJS
Development
Run yarn dev
this will start you NextJS application in development mode with hot-code reloading, error reporting, and more.
Build and run in production
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
Edit Mode Anywhere
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.
Activate the APP
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.
Troubleshooting
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
Docker
- Install Docker on your machine.
- Build your container:
docker build -t CONTAINER_NAME .
- Run your container:
docker run -p 3000:3000 CONTAINER_NAME
Deploy
Enviromental variables
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
Vercel
You can deploy to Vercel which is the company behind Nextjs so the support is the best.
Netlify
How to Deploy Next.js Sites to Netlify