Getting Started Next.js without Slice Machine

The best way to get to know Prismic and Next.js is to start with one of our examples projects from which you can build upon and explore all the features Prismic has to offer. This article will guide you through the steps to get up and running.


1. Install the Prismic CLI

The first thing to do is install the Prismic CLI (command line interface), if you haven't already. This tool will allow you to interact with Prismic from your local machine for things like creating repositories. To install it globally run the following command.

  • npm
  • Yarn
Copy
npm install -g prismic-cli
Copy
yarn global add prismic-cli

Sometimes it's possible that a global (-g) command like this doesn't work because of permission levels on your machine.

If that's the case for you, try executing the sudo command below:

  • npm
  • Yarn
Copy
sudo npm install -g prismic-cli
Copy
sudo yarn global add prismic-cli

2. Install a Sample Project

Now choose from one of the sample projects below. You can see a preview of what the project will look like and then run the theme command for the project choose. This command will clone the project locally, install any necessary dependencies, create a Prismic repo and populate it with demo content. Then it's just up to you to run it and see your content.


Sample Blog

This sample blog is an excellent starting point to explore Next.js and Prismic. Get it up and running in minutes. Modify and adapt it to your liking; it's all yours!

Run the following command in the terminal to launch this project locally:

Copy
prismic theme --theme-url https://github.com/prismicio/nextjs-blog --conf prismic-configuration.js

Sample Multi-Page Site with Navigation

Want to see an example of a multi-page website using Prismic? Look no further! This project provides all the code you need for a personal website with a homepage, information pages, and navigation.

Run the following command in the terminal to launch this project locally:

Copy
prismic theme --theme-url https://github.com/prismicio/nextjs-website --conf prismic-configuration.js

Multi-language website

This sample is compatible with Next 10, which introduces support for Internationalized Routing and allows you to set up Translations and Routing in the blink of an eye!

Run the following command in the terminal to launch this project locally:

Copy
prismic theme --theme-url https://github.com/prismicio/nextjs-multi-language-site --conf prismic-configuration.js

3. Run your Project

Now you can run your project with the following command and view your published content locally.

  • npm
  • Yarn
Copy
npm run dev
Copy
yarn dev

Next Steps

Suggested Articles

Now you've got a project up and running, you can jump in to the other features that Prismic has in store to make managing your content a breeze. Here are some suggested articles to read.

Create a Page, Add Content, Publish.

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.