CoursesIntegrated Visual Editing with Next.js

Integrated Visual Editing with Next.js

7
Lessons
Simeon Griggs
Simeon GriggsPrincipal Educator at Sanity
Track
Work-ready Next.js

Lessons in this course

The ultimate upgrade for content authors is to have absolute confidence in the impact of their work before they press publish – as well as the tools to rapidly find and update even the most minor pieces of content.


1: Understanding Visual Editing

1
Task

Visual Editing is powered by a combination of Sanity features, which is helpful to understand before implementation.


2: Token handling and security

3
Tasks

To access draft content your application will need to be authenticated with a token. Learn how to do this securely.


3: Receiving live edits to drafts

6
Tasks

Add perspectives to your Sanity data fetches to query for draft content, when Draft Mode is enabled.


4: Configuring Presentation

1
Task

Install and configure the Presentation plugin to enable draft preview and a web preview from within Sanity Studio


5: Setup document locations

2
Tasks

Showing where in the application the document they're editing may be displayed can help content creators understand the impact of their changes.


6: Add drag-and-drop elements

5
Tasks

Go beyond "click-to-edit" with additional affordances for rearranging arrays in your front end


7: Conclusion

Let's review