Building a website from scratch can be daunting. But what if you could create a website, connect it to a custom page builder, and start building pages in under 10 minutes…all without writing a single line of code yourself?

Sounds too good to be true, right? It’s not!

At Prismic, we believe building websites should be simple and intuitive. This is why we’ve focused on integrating features that simplify the process of creating websites and managing content.

In this tutorial, you'll learn how to:

• Set up a Next.js site with Prismic
• Use Slice Machine, Prismic’s developer tool, to create components
• Create slices (reusable page sections) using pre-built and pre-styled templates

You’ll then be able to push these slices to a custom page builder and start building customizable pages easily, just like you’re assembling a slide deck!

By the end, you'll have a customizable Next.js site running locally, complete with content editable in Prismic. So let's get started!

Project setup

You can create a new Next.js website with Prismic in just a few simple steps:

1. Log in to Prismic or create a new account.
2. Create a new Prismic repository using the Next.js option.
3. Spot the ”Minimal starter” and click Select.
4. Give your repository a name, select the free plan, and click Create repository.

Install Slice Machine and run your Next.js project

Now that we have a Prismic repository, we can click Get started with Slice Machine.

We can launch our project by following step 1 (Launch your starter)in the Prismic dashboard. When you’ve completed this step, click I’m done.

Next, follow step 2 (Run your project) in the Prismic dashboard. When you’re done running these commands in your terminal, you can mark this step as completed by clicking the button.

We’ll walk through steps 3 (Edit a page) and 4 (Create a slice or Page Type) together, so don’t worry about going through these now.

Once you have completed steps 1 and 2, open the project in your code editor.

In your browser, you should be able to view the front end of your site locally at http://localhost:3000/.

Add slice templates to our page type

Let’s go back to Slice Machine at http://localhost:9999/.

Since we used a minimal starter for our project, you can see that a page type called ‘Page’ has already been created. Click on this page type.

You will see in our existing page type, we have a single RichText slice that has already been created. Let’s add some additional slices by clicking Add slices > Use template. Select all available slices and click Add.

Now that we have added these slices to our page type let’s quickly look at our code. You will see inside the /src/slices directory that our new slices have been added.

If we want to edit any of these slices, we can do so in the index.js file of the specific slice we want to update. Since we chose to use pre-styled slice templates, we won’t make any changes for now.

Push slices to the Page Builder

Now that we have added slices to our page type, we can quickly push them to the Page Builder so our content team can use them to build pages.

In Slice Machine, click on Changes from the menu on the left, and in the upper right, click Push Changes.

And voilà! Our changes are pushed. 🌟

Create a page and configure our live preview

Let’s go back to our Prismic repository. You can navigate directly to your repositories documents by going to your-repo-name.prismic.io/documents. For example, if I named my repo nextjs-tutorial I could go to nextjs-tutorial.prismic.io/documents.

You will see there are two documents that have already been created called ‘Homepage’ and ‘Another Page.’ You can view these on the front end by going to http://localhost:3000/ and http://localhost:3000/another-page, respectively.

Click on Create a document and give your page a UID (this is the relative URL you will visit in your browser to view the page). Let’s call it test-page.

In the upper right, you can click on the 3 dots and then select Live preview settings. Input http://localhost:3000/slice-simulator and then click Save.

This will make it so we can preview live updates in the Page Builder as we type in the following step. Now, let’s add some content! 📝

Add slices and content

To add a slice to our page, we can simply click Add Slice and then select a slice to add.

You will notice that as you type or add images, you can preview the slice in the thumbnail on the left.

Now, have some fun! Try adding each of the different slices to your page and fill out the fields in each slice. When you are happy with your page, in the upper right, click Save > Publish.

You can view your page on the front end at http://localhost:3000/test-page.

Create a new page

Back in the Page Builder, you can either create a new page and add multiple slices like in the previous step, or for simplicity, you can click on the three dots in the upper right of your existing document and click Duplicate document.

This time, let’s add a UID called one-more-page.

When you’re done, save and publish your new document. Then go to http://localhost:3000/one-more-page on the front end to view your new page!

Wrapping up our Next.js tutorial

That wraps up our quick-start tutorial to building a Next.js site with Prismic. Here’s what we covered:

• Initializing a Next.js + Prismic project
• Creating a page type and adding slices in Slice Machine
• Pushing slices to a custom page builder
• Building pages with slices and content
• Using page snippets to render pages on the front end

With these simple steps, you can start building fully-featured sites with Next.js and Prismic, and hand off a custom page builder to your content team so they can build website pages and iterate independently. Thanks for following along! 🚀