CoursesBuild landing pages with Next.js

Build landing pages with Next.js

8
Lessons
Jono Alford
Jono AlfordFounder, Roboto Studio
Track
Work-ready Next.js

Lessons in this course

Give your content authors the creative freedom they need to produce landing pages by assembling individual blocks while still benefitting from structured content.


1: An introduction to page builders

1
Task

Setup your page builder the right way with Sanity and Next.js, understanding the process and best practices. With editing affordances your content creators will understand and appreciate.


2: Create page builder schema types

9
Tasks

Setup the initial "blocks" of content and set the foundation of your page builder schema types.


3: Improve authoring with previews and thumbnails

6
Tasks

Updates to the configuration of your page builder schema types can dramatically to improve the content creation experience.


4: Render pages

3
Tasks

Create a new dynamic route to render "page" documents and create links to them within Sanity Studio for an interactive live preview within Presentation.


5: Render page builder blocks

6
Tasks

Setup the unique components for each individual "block" to render on the page.


6: Creating a "home" page

7
Tasks

Create a "singleton" document to store distinct content that is globally relevant to the application.


7: Drag and drop in Visual Editing

2
Tasks

Allow authors to re-order blocks on page, without editing the document.


8: Scaling page builders and pitfalls

1
Task

How to keep your page builder tidy as your project grows over time.