Want to see an example of a multi-page website using Prismic? Look no further! In this project, we provide all the code you need for a personal website with a homepage, information pages, and navigation. Let's see how to set up Prismic to get this up and running.

Setting up a Prismic project from a sample

The first step will be to install the 'prismic-cli' package. Launch a terminal instance, from where you will run the command to globally install the package. 

npm install -g prismic-cli

Once it's been installed run the following command. This will create a new Prismic content repository, set up the custom types, and install the project code:

prismic theme --theme-url https://github.com/prismicio/nextjs-website

Navigate to the folder you have just created, and open prismic-configuration.js
Confirm that the name you have chosen for your content repository has been set up as the API endpoint that the web application will use to fetch the content you create in Prismic.

Write some content

Visit the repository you have just created in your Prismic Dashboard.

Select your master language, then go to Content and hit New, choose the Homepage type. Fill in the content for the homepage banner, add some slices. Save and publish!

Now, create two information pages. Go to Content, hit New, and select the Page type. Make sure to fill the mandatory UID field that is used for that page's URL. Add some content slices, then save and publish!

Create the navigation menu

Let’s fill in the menu with your pages. Go to Content, hit New, and choose the Menu type. Give the menu a title, and add all your pages.

For each page you want to add to the navigation bar: 

  1. Add a Link Label 
  2. Click on Link, then “What kind of link do you want to insert?,” select “Link to a Document,” and select the appropriate page.

Save and publish!

Run the blog

Now that we have some content to show off, let's check back on the code that will run your blog. Open your project folder once more in the terminal and run the development command.

npm run dev

This will launch a local development server at http://localhost:3000.

Deploys made easy with Vercel

Sign up to Vercel and follow the deployment documentation to quickly deploy your project.

Handle previews

Follow this link to learn how to handle Previews in NextJS.

Customize to your liking

You should easily find what to modify in the code to customize the website: just edit the stylesheets and the templates to fit your design!

Just curious about the code?

If you aren't interested in recreating this project and would just like to look at the code then you can download the project here.

Did this answer your question?