This is a Next.js project bootstrapped with create-next-app and configured to use SliceMachine
First, run the development server:
yarn && yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/[uid].js. To create more pages on Prismic, you will need to clone this endpoint on a SliceMachine cluster.
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.
To learn more on SliceMachine:
- Next Slicezone documentation - features and API
- React essential slices - default data + front-end components
- The Prismic CLI - port to Next is a wip
Default slices use theme-ui. To change the default theme, merge your own theme with it (see /utils/theme) and pass it to the ThemeProvider in pages/_app.
Local slices can be previewed in Storybook. To do so, I ran the command npx prismic-cli@alpha sm --add-storybook --framework next. Each slice created via the --create-slice command comes with a Storybook story and a mocked API response from Prismic.
Deploy command depends on your provider
yarn build && yarn export && cd out && [deploy command]Each SliceZone page implements a useGetStaticProps methods, that returns a Next.js getStaticProps function. It's responsible for making queries (getSingle or getByUID) to your Prismic API endpoint. It then returns data props (slices, uid..), that get passed to the page component.
It also creates a registry (an object with slice names as keys and components info as values). This registry is used to create an sm-resolver file, used by the SliceZone to import the right component. As this file is generated on each call to getStaticProps, you should not have to update it manually. However, you will have to create it manually first in order for the SliceZone to not break. If you used the prismic sm --setup command, this file should be bootstrapped already.