Using Editmode with Next.js

Introduction

Editmode allows you to turn plain text in your Next.js app into easily inline-editable content that can be managed safely by your whole team.

Next.js is an open-source production-ready React framework used to build web applications that are either static or rendered on the server-side, with smart bundling & a config-free setup right out of the gate.

Adding Editmode to an existing Next.js codebase

1. Add editmode-react to your codebase

NPM

npm install editmode-react

Yarn

2. Wrap your app in the Editmode provider.

Basic Setup

import {Editmode} from "editmode-react"

// For demo purposes, we'll use a "Home" page function.
// In a real-world setting, the best set-up is to use a <Layout /> component
// which all other pages inherit from, to ensure that all pages are 
// wrapped with the <Editmode /> provider. 

export default function Home() {
  return (
    <Editmode projectId="prj_Y5HfCBS4rqZg"> {/* Replace with your own project id. */}
      <section></section>
    </Editmode>
  );
}

Specifying a branch

Specifying default content

For more info/best practices on how to implement the <Layout /> pattern, consult our starter repo here.

3. Use the Editmode helpers in your codebase.

Render an editable chunk

import { Chunk } from "editmode-react";

function Example() {
  return (
    <section>
    
      {/* Reference a standalone chunk using the chunk identifier */}
      <Chunk identifier="cnk_7019e843b76e2d0395ab" />
      
      {/* You can also reference a chunk using its content key */}
      <Chunk identifier="company_name" />
      
      {/* Provide default content when referencing a chunk */}
      {/* Default content is a precaution that will get rendered in 
          the event that the content cannot be served from the Editmode API.
      */}
      <Chunk identifier="company_name">
        Our Company
      </Chunk> 
      
    </section>
  );
}

Render a hybrid chunk field

Specify classes

Mixed Examples

Working with collections

Chunk collections are simply a way to group chunks and can be used to render repeatable content. Each collection can contain many properties and each property can hold different types of information.

A good use case example would be creating a "Team Member" collection. It may have Full Name, Title and Headshot properties. Within your Next.js app, you may want to display the name, title and headshot of all your team members (i.e. all chunks within the Team Member collection). You can do this by passing the chunk collection identifier as a prop to the ChunkCollection component. For example...

Basic collections w/ inline editing

import { ChunkCollection, ChunkFieldValue } from "editmode-react";

function Example() {
  return (
    <section className="testimonials">
    
      {/* Render content from a collection, with inline editing */}
      <ChunkCollection identifier="col_MFxBu6fiTyRM" >   
        <ChunkFieldValue identifier="fld_LscoanYMdCOy" />  
        <ChunkFieldValue identifier="fld_Iq94B0LyQxGc" />   
        <ChunkFieldValue identifier="fld_LyRI6y3v2D8ct" />
      </ChunkCollection>
      
      {/* Use content keys for better readability */}
      <ChunkCollection identifier="testimonials" >   
        <ChunkFieldValue identifier="Name" />  
        <ChunkFieldValue identifier="Role" />   
        <ChunkFieldValue identifier="Comment" />
      </ChunkCollection>
      
      {/* Only render collection items with certain tags */}
      <ChunkCollection identifier="testimonials" tags={["home_testimonials"]}>   
        <ChunkFieldValue identifier="Name" />  
        <ChunkFieldValue identifier="Role" />   
        <ChunkFieldValue identifier="Comment" />
      </ChunkCollection>

    </section>
  );
}

Going Deeper

Full Reference

A full list of components, functions, and props can be found here 👇

Editmode for React

• Working with image transformations in editmode-react

• Using Variables in editmode-react

Creating a new Editmode/Next.js project

For green-field codebases, the best way to get started is by forking our "Marketing Site in a Box" repository (specifically the "Lagos" theme). We spent a lot of time to ensure it has all the basics covered, along with examples.

• Read the "Marketing Site In A Box" announcement

• Visit the "Marketing Site In A Box" Github repo

This workflow will be available as an npx command soon, but for now you can easily get started by cloning the repo, navigating to the "Lagos" theme directory, and removing the parts you don't need.

git clone https://github.com/editmodelabs/msiab 
cd msiab/themes/lagos
yarn install 
yarn dev