Develop a simple 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.
The site is deployed to Vercel using SSG.
- 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