Prerequisites

• Next.js React Framework
• Prismic CMS
• Slice Machine
• Storybook
• Chromatic (Optional)

Prismic Setup

1. First, run the following in the root of the project. This will log you into Prismic and allow you to create a new repository or use an existing one. The repositories it creates for you are kind of special in that it won't work with legacy repositories that didn't setup with Slice Machine.

npx @slicemachine/init

2. Content types should be added automatically! However if you need the JSON created by the custom types then just check them out in the /customtypes directory. Once you're setup after the next few steps, visit the Slice Machine UI and ensure that the follwing content types are added to the UI. You must then click "Push to Prismic" from the UI to ensure those get deployed.

• header: Singleton with repeatable links and social links
• footer: Singleton with repeatable links
• page: Repeatable content type with uid for page creation

Getting Started

First, run the development server:

yarn install

The following will concurrently run Slice Machine UI and Storybook together.

yarn dev

• Development Site: http://localhost:3000
• Slice Machine UI: http://localhost:9999
• Storybook: http://localhost:6006

Caveats

There are a few caveats that you should be aware of before creating a Slice Machine project.

1. Storybook Controls are missing from Slice Machine UI generation. Anytime you create a new slice or content type in Slice Machine it will generate a new story with mock data. You must make sure that if you manually add controls to the stories, you shouldn't resave that component via Slice Machine's UI or it will be overwritten I reached out to them about fixing this but they're choosing not too.

2. Mock Data could be handled better and is automatically generated from Slice Machine UI whether you like it or not. It would be nice to be able to control what mock data gets added. You can only really add custom mock text on "Key Text" fields which is annoying. I hope they improve the controlability of mock data in later versions.

3. Every field/content type must be added in Slice Machine UI and cannot be updated in the Prismic repository.

4. You don't have the option to open links in a new window if it's an external link. Instead an externalLinkComponent must be set on the PrismicProvider in _app.js. This contains the global link component but will open it in a new window instead.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Add Prismic Webhooks

If you included any statically generated pages in your project, you'll need to add a webook to deploy a new build on Vercel to make sure those pages update.

1. In your Vercel project, go to "Settings," then "Git Integration." Scroll down to "Deploy Hooks." Create a hook for your main git branch (note: your main branch could also be called master or something else). This will create a URL. Copy the URL.
2. Go to your Prismic repository, visit "Settings," and then click "Webhooks." Create a new webhook by choosing a name and pasting in the webhook URL you just copied from Vercel. You can leave the "Secret" empty.
3. Now, whenever you change your content in Prismic, the changes will be reflected on your site.

Add Prismic Preview

The project should already be setup with Prismic Preview capabilities but make sure you add the correct development URL and staging URLs to the Prismic repository settings.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!