Next.XP - Next.JS sites powered by Enonic XP

Contents

This guide assumes you are already somewhat familiar with Next.js. Experience with Enonic is recommended, but not required.

Introduction

In this tutorial we will demonstrate a close integration between Next.js and Enonic, where the structure and content in the CMS determines the URLs and pages available in the front-end.

The editors get an editing experience they are accustomed to, and developers get a front-end that is cleanly separated from the CMS. The headless architecture ensures the content can be accessed and used by other clients as well - naturally.

nextjs xp flow

Overview

You will complete the following steps:

  • Setup Enonic SDK and content via template

  • Run queries against the Headless API

  • Create a Next.js app using a template

  • Setting up preview in Enonic

  • Rendering content based on types

  • Using components to build landing pages

  • Setting up page templates

  • Deploying to live servers

TLDR;

The impatient may skip to the end of the tutorial, and get a live demo by following these instructions: If you want to learn what is really happening, head on to the first chapter instead.

1. Setup Enonic

  1. Sign up to Enonic Cloud: https://enonic.com/sign-up/cloud-trial

  2. Create a new solution based on the Next.js demo template

  3. From solution/environments open the "Drafts" route in your browser

    By adding /_graphql to the end of this URL, you should be able to browse the API. Take a note of this URL, as you will need it later.

2. Create Git repo

Vercel, which we will be using to host the Next.js project requires access to a Git repo, where your account has write access.

  1. Clone or fork https://github.com/enonic/nextjs-enonic-demo/ to a Github/Bitbucket/Gitlab account you have access to

    If you are using Github, simply press the Fork button at the top right.
  2. Note the URL to your new Git repository, you will need it in the next step (pun intended).

3. Deploy Next app

For simplicity, you’ll be using Vercel to host the Next.js app. Vercel are the makers of Next.js.

  1. Sign up to Vercel: https://vercel.com/

  2. Create a new project enonic-demo-drafts and connect it to the repo you created in step 2.

  3. Add environment variables referencing the URL to the drafts API - like this:

    KEY

    CONTENT_API_URL

    VALUE

    <absolute url to the content drafts API>

  4. After deploying, the Next app should now render the front page:

    front page

    Check the Vercel function logs if you are not getting the expected result.

4. Enable preview

With a Next.js preview server running, we may link it to Content Studio.

  1. In Enonic, go to solution/applications/Nextjs demo and edit the application configuration.

    nextjsUrl=<absolute url to your next.js drafts server>

  2. Launch the Enonic XP admin, and open Content Studio. You should now be able to see the preview in the right hand panel.

    cloud preview

5. Go live

The final step is to launch a Vercel project that renders the published (aka live) content.

  1. Create a new nextjs-demo-live project in Vercel, using the same Github repo as before

  2. This time however, Configure the project to access the "Live" API instead of "Drafts".

    Once the the server has started, it should render a 404 page. This is simply because your content has not yet been published.

  3. Publish the content from Content Studio by selecting the site, and then Publish Tree from the top right menu.

  4. After publishing, your site should be live and kicking

    Congratulations, you now have a Next.js site powered by Enonic!


Contents