Develop a basic homepage with mock content to learn how to use Prismic's Slice Machine with Next.js.
The page has four sections: Header, Hero, Plan Grid, and Footer. A layout is used for the head of the website and wraps the Header and Footer components around the page content as well as passing the currency context provider.
The Header component contains the Navigation slice so links can be added and edited using Prismic.
The Hero slice uses CSS Grid so the background image can be updated using Prismic.
The currency select uses a context provider to pass the value from the Header component to the Plan Grid slice to update the currency of the plan prices.
To view the website, clone this git repository using git clone https://github.com/louisefindlay23/prismicsm-nextjs.git and then in the terminal, run npm start. On first run, you may need to build the website first using npm run build. Open http://localhost:3000 in your browser to view the website.
If you wish to run Slice Machine to view, edit and create the slices, run npm run slicemachine in a new terminal as well and open http://localhost:9999 in your browser to view Slice Machine.
- Getting Started - Next.js Docs - to create a basic Next.js app using
create-next-app - Set Up Prismic (Next.js) - Prismic Docs - to use as a getting started guide for Slice Machine with
create-next-app - Navigation Menus (Next.js) - Prismic Docs - to use to help model navigation
- State Management In Next.js - Smashing Magazine - to understand state management in React to pass currency between select in
Headerand the prices inFeatureGrid.
- Backdrop Filter - CSS Tricks - to use the backdrop-filter property for the Hero slice
- Positioning Overlay Content with CSS Grid - CSS Tricks - to use CSS Grid for the background image so the image can be set in Prismic.
- Beautiful CSS
box-shadowExamples - CSS Scan - to obtain CSS for abox-shadowfor the pricing cards
- Pricing Table Module - PowerPack for Beaver Builder - used as design inspiration for the pricing cards