Starters

On this page, you can find full-fledged starter projects built with Prismic and Next.js. You can launch these projects yourself and then — if you want — customize them to your needs.


Choose a project

Explore the starter projects and choose one for yourself:

BlogSimple Blog

A minimalist personal blog with a list of posts on the homepage.

Multi-languageInternational Business

A multi-language business website to target international users.

Multi-pageInformation Site

An informational website with multiple pages and navigation.

Choose the project you want to install and run the corresponding command in your terminal:

  • Blog
  • Multi-page
  • Multi-language
Blog
Copy
npx prismic-cli@latest theme --theme-url https://github.com/prismicio-community/nextjs-starter-prismic-blog --conf sm.json
Multi-page
Copy
npx prismic-cli@latest theme --theme-url https://github.com/prismicio-community/nextjs-starter-prismic-multi-page --conf sm.json
Multi-language
Copy
npx prismic-cli theme --theme-url https://github.com/prismicio-community/nextjs-starter-prismic-multi-language --conf sm.json

Further learning: What does this command do?

The theme command from the Prismic CLI will clone the project locally, install necessary dependencies, and create a Prismic repo.

Run Slice Machine

You now have a working project, but you don't have any content models or documents, yet.

Slice Machine is Prismic's desktop application for creating content models and syncing them to Prismic. Run this command to start Slice Machine:

Copy
npm run slicemachine

Open Slice Machine in your browser. In the Custom Types section, you will see the Custom Types models for your project. In the Slices section, you will see the Slice models for your project.

Open each Custom Type and click Push to Prismic. Now you have content models in Prismic, and you can use them to create content for your project.

Create content

Next, add content to your newly-created Prismic repository. Go to prismic.io/dashboard to see your new repository. If your project needs a menu or homepage, create those documents. If your project needs pages or blog posts, create at least one of each.

Run your project

Then run the following command from the root of the new project to see the site in action:

Copy
npm run dev

Open the link from the terminal to view your project in the browser.

Customize, deploy, and preview

To learn how to customize your project, you can return to Model Content and proceed through Fetch Data and Template Content to learn the basics of development with Prismic.

To deploy your project, read Deploy your App.

To set up previews, read Preview Drafts.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.