Add the Dev Tools to an Existing Project
These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.
On this page, you'll learn how to add The Prismic Dev Tools to an existing Next.js project including any dependencies you might need.
1. Install Node
So we'll allow William Vincent and his slick tutorials to take you through the process.
Before you start - Node Version
For this project to work correctly, 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.
2. Create a New Default Next App
For this example, you can download a default Next.js app to build on top of. Do this by running the following command (You can see the full guide for creating a Next app here):
npx create-next-app my-new-nextjs-app
yarn create-next-app my-new-nextjs-app
Once it is finished, the Create Next app command will install all the dependencies for the default Next.js app. To see your newly created app navigate to the project folder and launch it:
cd my-new-nextjs-app && npm run dev
cd my-new-nextjs-app && yarn dev
3. Install the Prismic CLI
So now we'll 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 install -g prismic-cli
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:
sudo npm install -g prismic-cli
sudo yarn global add prismic-cli
You will need to make sure you're using the latest version of the CLI, which you can check on npm. (Check your version by running prismic --version).
4. Sign in to Prismic with the CLI
If You Don't Have a Prismic Account
After installing the CLI you should be able to create a Prismic account by running the following command:
If You Already Have a Prismic Account
After making sure that you have the correct version of the CLI, you can log in to Prismic by running the following command.
5. Run the Prismic Setup Command
The following command will automagically configure your project with tools to start your Prismic development journey.
prismic sm --setup
What Does This Command Do?
This command does a lot of different things for you, including:
- This option on the command will automatically connect our default Component Library and add any dependencies necessary to use the tool. This is done by adding extra configurations to your next.config.js file.
- Adding the sm.json file with the default configuration.
- Adding the sm-resolver.json file.
- Creating a Prismic repository with a standard "Page" custom type. You should receive a confirmation email, and you can see your new repo by the following link from the email you received or by going directly to Prismic.
- Installing dependencies required by Slice Machine and the library you selected, like node-sass, sass-loader, and essential-slices
- Installing libraries to fetch and display Prismic data like @prismicio/client, next-slicezone, @storybook/react, and next
Was this article helpful?
Can't find what you're looking for? Get in touch with us on our Community Forum.