Netlify's homepage is very tricky to build, but let's give it a shot. We'll use Next.js, Tailwind CSS, and Prismic Slice Machine. Prismic Slice Machine allows developers to define slices (like components) in their local machine before sharing them with content marketers.
**Get a $100 credit with Prismic (Sponsor)**
prismic.club/james-q-quick
** Resources **
Source Code - github.com/jamesqquick/netlif...
Prismic Next.js Docs - prismic.club/nextjs-docs
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
*STAY IN TOUCH 👋*
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
Newsletter 🗞 - www.jamesqquick.com/newsletter
Follow me on Twitter 🐦 - / jamesqquick
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
** Timestamps **
00:00 - Intro
00:30 - What We'll Build
02:00 - How to Build with Prismic.io
03:30 - Prismic Exclusive $100 credit
04:00 - Clone the Github Repository and Next.js Project Setup
06:40 - Setup Prismic and Slice Machine With Next.js
15:40 - Creating the Hero Slice with Prismic Slice Machine
22:00 - Define Custom RichTectComponents for Prismic Slice Machine
30:45 - Update Screenshot Preview in Prismic Slice Machine
31:00 - Create the Zoom Scroll Image Slice
34:30 - Next.js Configuration for Remote Images
37:40 - Creating the Counter Callout Slice
51:00 - Create Home Page Type
55:00 - SlizeZone to Display Slices In Next.js Page
58:00 - Wrap Up
Негізгі бет Getting Started with Prismic Slice Machine and Next.js
Пікірлер: 31