TracksWork-ready Next.jsCoursesBuild landing pages with Next.js

Build landing pages with Next.js

Jono Alford
Jono AlfordFounder, Roboto Studio
Last updated 27 days ago
8
Lessons

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 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.