Prismic and Next.js 101

The Content Editor as a Page Builder


[00:00] Working with Mr. McDonald is fantastic, but the process can become time-consuming if he needs to reach out to you every time he needs to add new information to his website.

[00:08] So an interface where he can easily store content and build pages himself becomes essential. Cue the Prismic repository. The repository is the Prismic content author portal that allows your client, Mr. McDonald to add his text, images, links, and video to build new pages.

[00:24] Your repository contains all the documents, which represent pages of your website. Selecting a document brings you to the page editor screen. Here we have the Static Zone, which contains metadata such as the URL, the title, and SEO content.

[00:37] Below we have the Slice Zone where we can start the real page building. This is where Mr. McDonald can choose from website sections to build his page. Website sections like a block of text or a video.

[00:49] Whatever is added here, affects the content API response, which is then sent to the Next.js project. This enables your content authors to build unique pages without your input.

[01:00] Mr. McDonald can also preview content changes in the browser before going live. He can also manage multiple languages and schedule publications, and more.

[01:10] This is the only part of the project Mr. McDonald will have to interact with. You, the developer, will be in charge of what his page-building experience will be like and what website sections he can add to the articles, homepage, marketing pages, et cetera, and therefore what HTML will be output by the Next.js project.

Main takeaways

  • Content Author: User who adds data in the Prismic editor.
  • Static Zone: Area in the editor to place content that appears only once on a page, like metadata.
  • Slice Zone: The area where you can mix and match website sections when adding humanly readable content.

Practice Activity

Try changing the order of the Slices to see how it effects the website sections.

Website section
Website section
Website section

Answer to continue

Quiz banner

Mr McDonald can see his changes before he publishes them.

Where does Mr McDonald add the page URL?