All Technologies / Next.js / Quick start

Quick start

Beta

These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

Before you start

To use Slice Machine you will need to have at least version 12.16.1 of node installed on your machine. You can check this by running the node -v command in your terminal. If you need to update, we explain how here.

This short, one page crash course is aimed to get your project running ASAP and it's designed for experienced Devs.

Need a more detailed guide?

If you need a more detailed guide, then check out our Step by Step tutorial.

Install the BETA Prismic CLI

Install the latest BETA version of the Prismic CLI. (Check your version by running prismic --version and compare it to the latest version released on npm) You can do that by running the following command:

  • npm
  • yarn
Copy
npm install -g prismic-cli@3.8.3-beta.0
Copy
yarn global add prismic-cli@3.8.3-beta.0

If that doesn't work try using sudo.

  • npm
  • yarn
Copy
sudo npm install -g prismic-cli@3.8.3-beta.0
Copy
sudo yarn global add prismic-cli@3.8.3-beta.0

So wait…what’s Prismic?

There’s every chance that you’ve made it this far without knowing what Prismic is. We’re slightly offended, but we’ll get over it.
Prismic is a Headless CMS that offers unlimited custom types, API calls, and a bunch of other great things. You should really check it out.

Create your new Next.js app

Create a new next project

  • npm
  • yarn
Copy
npx create-next-app my-new-app && cd my-new-app
Copy
yarn create-next-app my-new-app && cd my-new-app

Run the Slice Machine Command

Now you can run the Slice Machine setup command to configure your project.

Copy
prismic sm --setup

This command will ask you to create a new Prismic repository and configure your next project to work with your newly created Prismic repository

This also added as a dependency a cool set of open source components for your project that you can see here or contribute here.

Add the SliceZone to your project & Render the component based on a prismic document

Create a [uid].js file in your page folder

Create a new [uid].js file at the root of your page folder that will generate dynamically page with the different components

Import the necessary dependencies in your [uid].js file

You can add the Slice Zone component to a new page called [uid].js by adding the following code, here we have specified this Prismic custom type 'page' and this page's route will dynamically be populated by the URL.

Copy
import { Client } from '../prismic'
import SliceZone from 'next-slicezone'
import { useGetStaticProps, useGetStaticPaths } from 'next-slicezone/hooks'

import resolver from '../sm-resolver.js'

const Page = (props) => <SliceZone {...props} resolver={resolver} />


// Fetch content from prismic
export const getStaticProps = useGetStaticProps({
  client: Client(),
  uid: ({ params }) => params.uid
})

export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  type: 'page',
  fallback: true,// process.env.NODE_ENV === 'development',
  formatPath: ({ uid }) => ({ params: { uid }})
})

export default Page

Run your project

You're now ready to start your Next project. Simply run the following command and follow the link to your localhost.

  • npm
  • yarn
Copy
npm run dev
Copy
yarn dev

You can now visit http://localhost:3000/test to see the empty Slice Zone.

The empty Slice Zone as seen here will allow you to jump straight to Prismic to create a page.

You can now visit your newly created repository by following the button in the empty SliceZone or going to https://prismic.io/dashboard.

Slice Zone. Where the magic really starts.

The Slice Zone is a custom component that we created to be the entry point on your pages for all your components. It’s where any components you’ve created or any components libraries that your are using are added to the page. It also automatically queries your Prismic repo, so less work with BIG results. There’s lot’s more you can do with the Slice Zone, check out the docs.