Setting up Next.js

Contents

In this chapter we will create a front-end application that renders pages based on content in the CMS.

Next.js at a glance

Next.js runs on top of Node.js, and provides a shrink-wrapped approach to building sites using the React framework. Next.js supports both client-side rendering and Server side rendering, as well as pre-generation of static HTML files.

Task: Create the Next.js project

From an empty folder, run the following command:

npx degit git@github.com:enonic/nextxp-template.git

The "nextxp-template" is based on Next.js' own introduction app, so if you’re familiar with that, you’ll recognize the structure of the files.

The template includes some boilerplate we will customize, and a npm dependency aka ´The Enonic Adapter` that facilitates and simplifies integration with Enonic.

Code overview

The following file structure should now exist within your new project folder:

Next project files:
.env                                (1)
src/
    middleware.ts                   (2)
    components/                     (3)
    phrases/                        (4)
        en.json
    app/
        [locale]
            [[...contentPath]]/
                page.tsx            (5)
            layout.tsx              (6)
            error.tsx               (7)
            not-found.tsx           (8)
        api/                        (9)
            preview/
                route.tsx
            renderable/
                route.tsx
            revalidate/
                route.tsx
1 Environment variables are placed in this file
2 Middleware file that routes requests based on locale
3 Contains your implementation of CMS components
4 Phrase files for multi-language support
5 The main rendering file, catching all requests satisfying the pattern /[locale]/[[…​contentPath]]
6 Layout file that wraps all pages and adds common structures (eg. <Header>, <LocaleContextProvider>, etc.)
7 Error page handler
8 Not found page handler
9 Folder containing API routes

Task: Configure application

By default, the configuration should work for your setup, but have a look to be sure:

  1. Verify your configuration

    The following configuration values should match your environment

    .env extract:
    # Provide a unique value which will be used to secure the preview mode
    ENONIC_API_TOKEN=mySecretKey
    
    # Enonic app name, must match the name of your app
    ENONIC_APP_NAME=com.example.myproject
    
    # Enonic XP projects configuration for different locales
    ENONIC_MAPPINGS=en:intro/hmdb (1)
    
    # Absolute URL to Content API
    ENONIC_API=http://127.0.0.1:8080/site (2)
    1 XP projects configuration. More about it in multi-language support. <2>Base URL of the Guillotine API discussed in the API, but without project and branch parts.

    We don’t need to specify the project and branch parts here, as the Enonic Adapter will automatically add these based on the runtime environment. For example, when serving the preview for Content Studio, the project will be set to the currently opened one, and the branch will be set to draft. On the other side, when serving a live site, the project will be set based on contents of ENONIC_MAPPINGS variable and current locale, and the branch will be set to master.

    The configuration values can be overridden later when deplying your app to a live server.

Task: Boot the server

Let’s fire up Next and see if things are working as planned…​

Start Next.js in dev mode by running the following commands from within your next project folder:

npm install
npm run dev

If Next boots without errors, point your browser to http://localhost:3000 to see the glorious result.

content debug

Running Next in dev mode normally works fine. Should you however experience "strange issues" - try deleting the .next/ folder and reboot

For more details on booting Next, check out the Next.js CLI docs.

Next URL patterns

The URL structure of your front-end will mirror the structure of the content in the CMS. http://localhost:3000/ will be mounted to the site root, which in our case has the internal path /hmdb.

Using the Movie Se7en as an example:

Result when visiting http://localhost:3000/movies/se7en

se7en debug

Se7en as seen in Content Studio - internal path is /hmdb/movies/se7en

se7en edit

Task: Visit some more pages

Give the default rendering a spin by trying out some other URLs, for example:

…​etc.

That’s it for the basic Next.js setup.

Next, well have a closer look at how to customize the rendering.


Contents

Contents