Prismic and Next.js 101

How does it all fit together?


[00:00] Let's see how this all links together with Mr Mcdonald's website.

[00:04] Users will see the front-end website in their browser.

[00:07] This comes from the Next.js application on a hosting service like Vercel.

[00:10] But to add the content, the text and images, et cetera, to the Next.js application, Mr. McDonald will have access to a content editing tool, Prismic, which lives in the cloud.

[00:19] To define what Mr. McDonald can add, and therefore, what content will be injected into your code. You the developer, have access to a content modeling tool, Slice Machine. The different parts of this process are connected through APIs.

[00:34] So as a developer creating a new Slice, a website section, you would use the tools as so. Once we have a design, we will use Slice machine to create a model and get suggested code for the component.

[00:46] Send the model to Prismic. Mr. McDonald will add his content and publish the document.

[00:50] Then in the Next.js project, you will query the content from the API. The project is built on the hosting service. This new Slice and its content can then be seen live at in the browser.

[01:03] And that's all the basics of using Prismic. We went fast, but we'll dig in deeper in the following lessons. But first, Mr. McDonald wants a word.

Main takeaways

  • Website: the front end that your users see
  • Next.js Project: your code, which contains your HTML and CSS
  • Prismic Editor: the Prismic cloud app where authors create content
  • Slice Machine: the development tool to configure Prismic
  • API: the content delivery network

Answer to continue

Quiz banner

Match the tool to the correct usage.

Content modeling
Creating content
Website styling