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

Featuring Prismic's new Page Buidler! 👆

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.

---
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.

---
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: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
01:03:33 Instantiate Prismic client for fetching
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:07:35 Create a 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:34:08 Course wrap up and outro
---

[TrostCodes]

I'm so excited to see how you enjoy working with Slice Machine and the Prismic page builder. Please ask any questions, or let me know what you'd like to learn to build next!

[AnupomRoy-ispc]

One of the best tutorial available on Youtube. and Prismic has my heart now
💌

[marcuadrian]

I launched a tech startup and I will forever use Prismic just because this video. Thank You Gus!

[kluplau]

This is amazing. Prismic is by far the best headless CMS I’ve tried - and I’ve tried most.

[akbar.Corradino]

Hi. This is by far the best video I have found online about integrating Prismic with NextJS. So, thank you very much for that. I'd love to see more videos that cover things like building a blog listing page and then navigate to detail pages for each blog. Or like in general listing pages with detail pages. Also, one question regarding the PrismicRichText components. Can we define nested tags? like I have a <strong> tag inside a <ol> tag that I want to target, rather than targeting all <strong> tags.

[JK-pvtu]

I made it through, whoop whoop! Thanks for a great tut! If you are doing this in 2024 some of the tools have had a bit of an update but mostly the same. If you add slices and things hang just restart your slicemachine.

[londelidess]

This is just a start up company’s YouTube tutorial… dang much better than some coding YouTubers.
I found the best channel end of the 2023.

[FrancoBarrera-nvrt]

Thank you very much for these Nextjs videos, they are appreciated.

[juliengamerbike]

Incredible video, great teaching and technology.
I've been looking for a cms that suits me for a long time, and now I've fallen in love.
I'm going to use it for a lot of my projects.

The design logic is really clear to me, unlike what I've seen elsewhere.

The feeling of creating a fully customized site is insane.

thank you very much

PS: en plus j'apprends que Prismic est français cocorico🐔!

[IanArmstrong-ty]

If your'e running this a year later, at 4h 51m everything goes sideways. Repeatable groups now have to be in named containers so after the promise you need to do something to the effect of => {" instead of "slice.items.map((item) -> {"

[felipesalascasasola]

Love your energy bro! Awesome tutorial. Can't wait to use this in a cool project :)

[rbessaadv]

Thank you so much! This video was fantastic and exactly what I needed to better understand the functionalities of Prismic and how to upgrade my site with the latest version of Next.js.
When possible, create content about internationalization and a smart way to work with tags using Prismic.

[samadams]

Dora next tutorial😊 Awesome teaching, subscribed and thanks for the great content, waiting for the next 🤜🏾🤛

[_RajeevKumar-mxsq]

simple and effective way literally i love it 😘😘😘😘

[jonathand]

Congrats Alex, this class is fantastic!

[bmind]

Thank you, Alex. Amazing work, as always! Lots of great nuggets that helped me!

[mycoffeemachine]

Thank you!! Amazing work publishing this easy to follow tutorial (:

[WilliamDavies_web_developer]

probably good to mention that you need the tailwind vscode extension for tailwind intelisense

[Astromono]

At first the fonts weren't working, but I had installed the current version of node.js instead of the LTS stable version. Just in case someone else is experiencing the same issue!

[maxshoji]

Fantastic video! Please tell us what your terminal theme is!