Next.js Full Website Tutorial Course - with Prismic, Tailwind, and TypeScript

🍿 NEW COURSE 2024 🍿    • Build a Dark Modern Animated Website ...  
Featuring Prismic's new Page Buidler! 👆

In this full course, we'll unleash the power of Prismic as a Headless Website Builder alongside Next.js, the popular React framework. From installing the essential tools to building vibrant, responsive components, this course has it all.

You'll start by understanding the key concepts of Slices and Page sections, followed by hands-on tutorials on installing and configuring Next.js, TypeScript, and Tailwind CSS. Along the way, you'll build beautiful Hero Slices, optimize SVGs, style your pages, and learn to create repeatable fields and content relationships!

With our guided walkthrough, you'll also explore the Prismic Page Builder and Slice Machine. The course provides everything you need to know to transform your ideas into a fully functional website.

🔗Final repository: https://github.com/a-trost/flowrise-p...
🔗Figma File: https://www.figma.com/community/file/...

---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections that you can connect to a website builder for your client or team. They will create pages from there, and you get that content back to your code through our fast API.

► [Tutorial] Build a Next.js website while delivering a page builder to your team:    • Creating a Project With Slice Machine...  

► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters

► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters

► [Learn more about Slice Machine]: https://prismic.club/slice-machine

---
Chapters
00:00:00 Intro
00:03:10 Website and Figma file walkthrough
00:05:27 Why we focus on Slices / page sections
00:07:36 Get the Figma project for yourself
00:08:40 Install Next.js, TypeScript, and Tailwind CSS
00:11:25 Tour our Next.js Project
00:15:51 Remove boilerplate code
00:18:33 Set up project fonts with next/font
00:32:21 Install Prismic and Slice Machine
00:36:18 What did slice-machine-init do for us?
00:36:18 Tour the Slice Machine UI
00:43:20 Create Settings custom type
00:51:04 Open Prismic Page Builder
00:52:39 Fill out Settings document
00:58:01 Next.js Routing fundamentals - Layouts and Pages
01:03:33 Instantiate Prismic client for fetching
01:07:00 Metadata in Next.js
01:11:25 Fetch data from Prismic - Site settings document
01:20:12 Create Header component
01:30:45 Create Footer component
01:36:18 Create Homepage page type
01:40:45 Create Homepage document
01:41:36 Build homepage with the page snippet
01:47:24 Create our first Slice - Hero Slice
02:04:00 Explore the auto generated types
02:05:31 Style the Hero Slice
02:30:35 Refactor "Bounded" component
02:39:51 Refactor "Button" component
02:45:25 Refactor PrismicRichText component styles
02:47:30 Refactor Heading component
02:57:50 Export component screenshot from Figma
03:01:56 Add Hero Slice to Homepage
03:05:58 Create variation of Hero Slice
03:19:50 Style Header component
03:23:48 Export SVG logo
03:25:19 Optimize SVG logo
03:26:58 Convert SVG to JSX
03:29:00 Style Footer component
03:32:49 Create Feature Slice - Repeatable fields
03:58:54 Export all Slice snapshots from Figma
04:01:00 Introduce Content Relationships
04:02:07 Create Testimonial custom type
04:04:30 Create Testimonials Slice
04:17:20 Fetch content relationship documents
04:27:45 Style Testimonials Slice
04:33:02 When do I choose repeatable fields or content relationships?
04:34:20 Create Text with Image Slice
04:39:04 Style Text with Image Slice and variation
04:45:10 Create Call to Action Slice
04:52:02 Add all Slices to Homepage page type and push changes
04:52:37 Add content to Homepage in Page Builder
04:58:48 Create background gradient
05:01:40 Set up Prismic Preview in Next.js project
05:04:07 Set up local previews in Prismic.io settings
05:07:35 Create a repeatable page type
05:09:07 Create Next.js route for repeatable page type
05:14:04 Create Features page
05:18:15 Create About page
05:21:40 Push project to GitHub
05:23:43 Deploy site to Vercel
05:26:28 Configure content updates - Next.js revalidate
05:29:43 Set up Production previews in Prismic.io settings
05:34:08 Course wrap up and outro
---