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

hello and welcome to this full course on next.js 13 and prismic in the next five and a half hours we're going to cover everything you need to know to build a production ready marketing website you'll learn how to build with next js13 and the new app router we'll use prismic to manage our content we'll style our website with Tailwind CSS and we'll make our code more reliable by using typescript my name is Alex I'm on the developer experience team at prismic and I am really excited to dive into this project with you this course already assumes you have a grasp of react HTML CSS and JavaScript it's good if you're somewhat familiar with nexjs but don't worry if you're not we're going to be covering the new app router so you'll be up to speed in no time you don't need to know typescript or Tailwind I'll walk you through both of these in this course now here's the question why are we choosing next.js to build a website with well nextjs is a react framework that has a ton of features like react server components file based routing and optimizations for things like fonts and images it's the most popular JavaScript framework and a great choice for for quickly shipping high performance websites and apps for our content we're going to use prismic which is a lot more than just another headless EMS it actually lets you ship what's called a headless page builder to your content team it has best in-class sdks and developer tools and once it's set up your editors can ship Pages without bugging developers each time so what are we actually going to learn in the next five and a half hours so much so look at this list look at this list all that and more seriously I've packed so much into this course but let's break it all down real quick first we'll look at our figma file because we are treating this like a real project you are going from design to development then we'll set up next js13 with app router and we'll configure our fonts typescript and Tailwind then we'll add prismic and its devtool slice machine which integrates deeply with nexjs and makes our development experience so much better for styling we're going to use Tailwind CSS it's what's called a utility first CSS framework and it's where everything from text colors and sizes to flexbox and grid are all individual utility classes if you already know CSS you'll pick up Tailwind in no time but don't worry if you're new to it I'll be walking you through it as we style our components we'll also be using typescript a superset of JavaScript typescript improves our code quality it catches errors sooner and it makes the code more maintainable on top of that it offers better tooling with features like autocomplete and type checking once again if you're nervous about using typescript in this project don't worry slice machine and the prismic sdks do most of the heavy lifting for us we'll only write our own types a couple times and I'll be guiding you the whole way the whole time we'll be following best practices by committing to git and once our site is finished we will deploy it to verscell a hosting platform by the company that also creates nexjs so by the end of this video you'll have a fast modular SEO friendly website connected to a powerful headless Page Builder and the best part we will be using prismic and versel's generous free plan so all of this won't cost you a dime so let's not waste any more time let's Jump Right In and let me show you what it is we're actually going to be building in this course all right so I'm going to give you a high level overview of the website that we are building as I said it is a marketing page so we have some some familiar Parts like a hero we have testimonials here we have uh you know image on the left text on the right we have a few of those here and we've got a feature slice here and we have a CTA at the bottom so that's our home page we're only going to be making really the home page and just one other page you can see we're reusing some of these components because that is what we are all about here I'll explain in a second and uh this is a different hero but it's still a hero so this one has you know text centered with an image below and this one has your image on the right with your text on the left so if we look at our figma file we can see that we have a few pages just like I was showing you we have a home page we have features and we can also build an about page but you might notice uh as I said we have some of the the same components repeating uh throughout each page and even on on the same page and those page sections are called slices and those are really what we're focusing on today um we can build any number of pages I could sit here for a 10 hour video and build a thousand pages with you adding content to a CMS isn't the most fun thing or at least it's not what this tutorial is about uh really what we want to do is we want to build these page sections that we at president called call slices and that is what is going to make up our page so here we have uh two variations on a hero one is like a big show stopping um hero it shows the dashboard for you know the fake app that we are making the site for uh and the second one is more kind of traditional where there's an image on the right and text on the left and a CTA button in both then we have our text with image slices we have two variations here so you can either have text uh on the Right image on the left or text on the left image on the right we have our mobile styles that we can reference as we're building we have our feature slice like I showed you we have a testimonial slice and we have a call to action slice so we are breaking that entire page down into those pieces and what this does by focusing on page sections it gives our content team the ability to say actually you know what this testimonial slice I want it up there right after the hero that's going to be the best order for this to be in oh and you know what this feature slice we've had to bring that to the Top This slice this doesn't make any sense anymore or maybe I change the content in there right but with the ease that I'm moving things around here in figma we'll be able to do the same thing in prismic and that allows your content team to use these slices like building blocks to make any number of pages so really we could go ahead and like copy this about page over we could pull in some rightly let's get a feature slice and pull that in and just like that like it's that easy to make more pages so that's that's kind of the mindset I want you in as we're building out our prismic nexjs site is focus more on these page sections and not so much on oh I have to design this feature site uh sorry this features page as you know something where the hero always comes before the test or the the feature slice and then we always have this part by building with prismac you are getting a headless Page Builder and it's all about flexibility it's all about being able to move things around your content team can do this on their own and they don't need to come back to you each time so that's the concept of slices this is the site we're going to be building and I just want to point out that this is going to be using industry best practices it's using the latest next.js app router like this is all real high quality building practices so that you can take this course get out there and start making marketing websites for clients for your company for whatever you need and you have this power of just making unlimited Pages once you make just a few slices so that's our project let's get into it so just like as if you were you working with a real designer working on a real site we're going to be getting our designs from figma and referencing a file for our images for our assets for everything so that means you're going to need a figma account that is free go ahead and sign up for one and we're going to need a file that I've published to the thingma community so if you go to figma.com community here and you can search for something like prismic or flow rise can do both and there you go it should come up there or if you hit enter it should come up here so something like this will be there go ahead and click that you go ahead and click open in figma and that will give you exactly what you're looking for by clicking open in figma you will have your own version of this so you can use this however you want you can edit the slices you can do whatever you want with it it is yours to you so if you want to kind of use this to launch your next project go for it but definitely get the sigma file we're going to be referencing it a lot all right to start out we're going to create our next JS project and first we're going to head to nextjs.org this is obviously the site for next.js we can go ahead click get started and this brings us to the docs you're going to want to keep the docs open throughout the entire course we'll be referencing code here pretty often so it'll be handy to have them here so you can copy paste rather than having to type everything out the docs will also be handy when you come back and want to add more features or if you have to troubleshoot something or if you just want to add something to your site that is outside the scope of this course so we're going to go ahead and click installation and it says system requirements you have to have node.js 16.8 or later if you're not sure go ahead and click that or you know figure that out you probably have Mac or Windows another thing that it doesn't say here but we're going to need for the course is that you have git installed on your machine so we're going to come here and we're going to grab this code right here you can either copy it right there or you can click the little copy button right there and that's npx create next app at latest so with that we want to open up our terminal I have one right here I like to put everything in a little repos folder that's just what I do do whatever you like and I'm going to go ahead and paste that and hit enter it's going to ask me if I want to install the following packages I just hit yes or why project name all right so it asks what is my project named this doesn't really matter this is just what it's going to be called in my file system but our project like the name of this fake site that we're building I called it flow rise it's a you know a little company kind of thing you can name yours whatever you want if you want to name it uh prismic next JS site whatever I'm just going to call it flow rise prismic just like that and hit enter now we are going to go with the defaults that the next JS team recommends as we go ahead and configure next.js so they're going to give us a few of these we are going to use typescript for this course so I click yes or I hit enter do you want to use eslint yes would you use Tailwind CSS yes and the source director yes I'd like to use the app router they even say recommended there yes and would you like to customize the default import Alias we're going to hit no and there we go it's going to install it tells us the dependencies that it's installing as it does it and yep and it even says like app Tailwind so that's just kind of a uh they have a bunch of versions that kind of combines all of these so we have app router and Tailwind it's going to install I'll fast forward to the end there all right once that's all set we are we have it installed and we're gonna go ahead and open that in vs code or whatever code editor you are using all right once our project is created let's take a quick look at the files and folders that we have so far here we are in vs code and I just want to kind of show you real quick that we have this layout TSX and this page TSX so we're going to touch more on these files as we build but if you're familiar with nexjs at all this will look pretty different than what you're used to but don't worry you're going to pick up the concepts really quickly and at the bottom we have our Tailwind config and that was all set up for us we're going to make some changes here in a little bit but we see that we have Tailwind all set up we also have our package.json and we can see the exact packages that were set up for us we have exactly what next.js said that they would install right so this is all we have right now there's no prismic there's nothing else but we do have tailwind and typescript and that's we're just misim prismic for the most part we also have a couple helper libraries for types and for linting so nothing too wild here all what we expect now let's get our next JS Dev server up and running you can either go back and use your standard terminal you can do that I personally like to use the terminal inside vs code so you can either hit command and then little tilde or control and that tilde like I'm a window so I'm going to do that and it brings up a terminal here use whichever terminal you like just make sure that you are in the flow rise prismic directory or whatever you named yours so if I was using this terminal again I would say CD flow rise prismic and then I'd be in that in that directory so all right we're gonna get our next JS server up and running so we're going to run npm run Dev and just like that we have it open on localhost 3000 so you can click this link or type it in manually if you would like either way localhost 3000 and there we go nice slick next.js landing page there so it says get started by editing Source app page.tsx and if we look at that page we'll see exactly that content here get started by editing all of these classes here this is all Tailwind because we're using the Tailwind version so all of these styles are done through Tailwind so yeah we'll edit this more in a little bit but I just want to show you that our Dev service running we have a page already everything's running smoothly so we're going to be using git to Version Control our project throughout this course so now that we've kind of finished one step we want to Version Control it you can either if you're if you're using uh vs code you can come here to the source control tab here I like this a lot myself uh and you can click initialize Repository or you can go ahead and open your terminal I'm going to terminate the uh the server by hitting Ctrl C I'm going to type get init just like that and a git repository was initialized here it is using the git ignore here so it's not going to back up things in node modules in PNP Etc so you can see the things that aren't going to get backed up here and that's good and then the rest of our stuff everything here will be committed to git and that's Version Control that's going to make our lives a lot easier if you ever make a mistake if we need to roll back and when we want to push this to GitHub and then deploy it to versel our host git is the easiest way to handle that so we've just initialized our git project we need to add all these things to our current commit so I'm going to type git add period if you get a message like this don't worry about it and then I'm going to type git commit hyphen M initial commit that's a pretty standard first commit message when you are initializing a new project so close your quotes and hit enter it committed all of our files and so now we have our first commit congratulations we're not going to publish it publish it just yet but we have initialized our next JS app and we've committed to git all right so while our site that we get out of the box is pretty cool it's pretty slick it doesn't look anything like our figma file so we're not going to use a whole lot of styles from this in what we're building so we're going to take a second and kind of gut what uh nexjs has given us so right in the Tailwind config here we can go ahead and uh you can go open that up and in Tailwind config we can eliminate this background image part you can keep theme and extend we'll use that later but go ahead and remove that hit save we're going to hit a couple other places so globals.css should be right in source and app we're going to go there global CSS we want to keep lines one two and three because that's how we get Tailwind if you comment those out or if you remove those entirely you'll see that our site quickly falls apart oh our Dev server isn't running you're going to want to run your Dev server again so npm run Dev do that real quick keep that error in the video because hey everyone makes mistakes everyone forgets to run their Dev server up but see this is not a mistake that's exactly what we expected because we removed Tailwind so all of those classes don't really do anything if you see something like this in your site build as you're building check to make sure that your Tailwind is uh working properly once we bring that back and save we'll see that all of our Styles come back so uh we are going to get rid of everything else though so I'm going to delete the rest of globals.css that should change our background image and then we can also just uh gut the page so I'm going to go from you can go from the bottom of the top up to you I'm a I'm a top-down kind of person I guess I bottom up I don't know but we're gonna remove everything inside Main and I'm going to just put an H1 that says hello world the classic right hit save and there we go it's a little bit centered because of these Styles here um we can erase those if you'd like up to you so we have a little hello world at the top um it's small because if you're not familiar with Tailwind those Styles sorry these right here uh this completely wipes out every style so that all text H1s paragraphs you name it has the same base styling and that makes it easier to build up you don't have to worry about other styles coming in and kind of tampering with your design so we just cleared out some Styles we are in a good position now let's set up the fonts for our site so here's the next JS docs we're going to go here to optimizing and fonts and it says font optimization and it has a bunch of examples and everything these stocks are fantastic if you couldn't find it here just know that you can come up here and search it'll open this you can also hit Ctrl K on your keyboard or even just forward slash on your keyboard and you can type font and it'll bring us here so the next JS docs the more you get familiar with them the more comfortable you are with them uh the the better you will be as a Nexus developer so next.js has a built-in font package that automatically optimizes our fonts and it works with both local and Google fonts so if you want to download a file from font squirrel or somewhere or your designer gives you a font it can still work with that the best part of all honestly if you're using a Google font is that no requests are sent to Google by the browser that means that you're not going to run into any gdpr issues just for using a font because if you use Google fonts in the typical way and we have our fonts here I'll show those to you in a second but if you use those in the typical way you are sending a request to Google every time you load that page and that can get you into some gdpr issues but not with next font the other great thing is that it cuts back on your layout shift because it uses some cool CSS trickery because it knows what fonts you're using so it's just a wonderful package definitely definitely use it if you are building an xjs site so if we look real quick at our website we see that well so I'm uh control clicking or command clicking on individual items or you can go over here to Dev mode and we can start to inspect things so we see here ah we have font family nunito uh or we can click here and CBR we have font family nunito Sans so we have those fonts that we need to add to our website uh you might think okay is nunito and nunito Sans the same exact font they're close but one is built for display so here I have it here you can go to fonts.google.com you won't need to I just want to show you uh you know where we're kind of pulling it from you see nanito has these rounded uh letters where these have more like it feels more like helvetica or Ariel and this is just a bit softer so we're using the rounded nunito for our headings and then we have our sharper Sans serif for our body copy so that's why we're using two fonts and we want to see how we do that so if we go to the example here we see that we're going to be importing the font so in this example they're using inter very popular font uh from next font Google so if you see here the base is next we already have that installed in our project so we don't need to install anything else it's already ready to go we are going to be using a variable font so we won't need to specify the font weight luckily nunito and nunito Sans are variable fonts and then you call this function so enter and nunito all of these are going to be functions we pass an object with with our settings and then we assign it to a variable and it just seems that the practice is to name it after the font that makes a lot of sense and last but not least you want to pass it on to the HTML element as class name into dot class name pretty simple but we are using multiple fonts luckily they have us covered as you can see here they have inter and Roboto mono but they are using a separate file and that's one way you could do it but really they are preparing you for uh if you're going to use Roboto mono in just a couple um Pages here or there right so like you're pulling it in to certain elements but not not others uh but since we're using Tailwind we're actually going to scroll down a little bit more so alternatively you can create a CSS variable and use it with your preferred CSS solution you'll see why we're using this way in a second so we're going to go ahead and import our two fonts just the same way that we did it or or that the first example showed with inter we're going to do it with two things and we are going to add this property where we assign it to a CSS variable and then we put both of them on our HTML element just like that so we're going to reference this code as we add these fonts to our project so go to layout TSX and we can see we already have enter imported here we can go ahead and change this to nunito nu-n-i-t-o and nunito it should start to uh auto complete for you here nunito Sans and if you like you can see all the fonts that are available there uh pretty much every Google font is available as far as I know but go ahead and get both of those you'll see that inter starts to break and we're going to fix that now so I'm go ahead I'm going to go ahead and copy this once again this is in the next docs go ahead and copy that just for ease of use uh because I want I want the subsets I want the variable and with the display so instead of enter I'm going to use a lot of copy and paste here I'm going to do nunito and then I'm going to copy this again and do nunito underscore Sans just like that all right I'm going to continue to rename things nunito and then nunito Sans and font nunito and new Nito Sands just like that alright so now we have enter class name we need to change that out but we need to add two classes so they show that we want to use backticks and then with a dollar sign so we use these template literals and that is one way to do it we can start out by doing it that way that's fine that that'll work but since we are using Tailwind there is a very very handy package that we might as well start using now because as we progress we're going to use it just more and more so I'm going to actually open my terminal I'm going to stop my Dev server and I want you to go ahead and install a package called clsx so npm I for install c l s x just like that it's a tiny little package it does something really small like it's going to seem trivial but I promise it's going to make our code a lot easier to read and write in the long term so added we can start up our Dev server again npm run Dev or so so what what you can do is you can start the dev server and then if you click this button or if in in your terminal like if I'm using my terminal I could create a new terminal and have both of them running you can do that and anytime we install something or whatever you can have it in the second terminal and in fact we're going to be doing that because we're going to be running a second Dev server for slice machine in just a minute but for right now I'm going to go ahead and import I can do it anywhere import clsx from CLS X just like that and now instead of enter class name we're going to call clsx and parentheses and then we're going to say nunito .classname you see the three things it has on it class name style variable and I'm going to say class name comma nunito Sans dot class name so we're referencing these two variables that we've we created there and what CLS X is going to do is it's pretty much going to handle what this is doing for us it's going to combine these class strings into one and handle a few edge cases for us and over time as you use uh styles with things like Tailwind in functional components it is a really nice package to have highly highly recommend it so your top should look like this nunito and nunito Sans and then we have on the body we can actually move that from the body to our HTML element should make a huge difference but um the the boilerplate that we installed had it on body the docs have it on HTML I I'm just going to move to the HTML it seems like it it won't make much of a difference one way or another now we are almost there the last thing we need to do is we need to set this up with Tailwind now I said there was a reason why we are using CSS variables and this is why we're gonna go to our Tailwind config.js again and we kept theme and extend here I'm going to open up extend and we're going to type font family and you see that because of this type it's going to help us out and it's going to say which font thing do you want right um we're going to be using a lot of typescript in this course it's going to just make your life a lot easier so font family we're going to give it an object just like that and then we're going to call these fonts kind of whatever we would like to call them I like to say body for you know the font that we're using for most of our body so just say body and then it needs to take an array with a string inside and it's looking a little funky and then we need to say VAR because it is a CSS variable hyphen hyphen font nunito Sans so remember our body font is going to be Nonito Sans the like sharper one and then our display font and that's what I like to call it you can call it heading you can call it whatever you like display that's going to be an array also VAR I have an hyphen font new Nito and no Sans just nunito so hit save there and those should be available to us now so if you were to go to page.tsx go to your H1 and we can say class name and I'm going to say font hyphen we should have a font display right here and if we hover over that see how it says font family of our font nunito and so I'm also going to say uh text let's go so I'm I'm using the autocomplete a bunch here just to kind of show you uh if you're trying to figure out what something has like okay what does text have on it or like what sizes are available to me uh it's really handy to have that so I'm going to save this with font display and text 5xl that should make it pretty big and we should be able to see there we go so um that is nanito Sans I believe did I mix something up display you need to Sims and each of Sands interesting is that new Neato Sands why did that become nunito Sans that's my question all right I almost made a mistake there we don't want to use class name here we actually are trying to Define this CSS custom property or this CSS variable so instead of class name we want to change these to be variable v-a-r-i-a-b-l-e and saving that and heading over to our page we have this text 5xl and we can do font display just like that we can see that yes that is working we are getting our nice rounded font we can do font bold and because it's a variable font we get all of the weights of our font so that is working we have our fonts set up let me just make sure font body that should be the same sort of style yeah you see those L's very distinctive L's on nunito and yep we got very distinctive L's so our fonts are set up let's move on all right so our Tailwind config should look like this with theme extend font family and two properties body a display each of those have VAR font nunito Sans for the body and font nunito for the display just make sure that this part right here in the middle there uh matches up perfectly with what you have here for variable you can put anything here but just make sure that that matches perfectly and then make sure it's nunito.variable and nunitosans Dot variable and you should be set all right but before we're finished with fonts um we did a couple changes as we can see here we installed uh clsx and we wiped our Styles and we added fonts to our site so we can just say here um feet added fonts and cleared boilerplate you can also do this in the terminal however you want to handle your git uh commits but I like doing this here it's nice and handy to see everything in a nice little UI hit commit and we are set it's just that easy so don't forget to save along the way all right now it is time to install slice machine and create our prismac repository where we will create all of our content we can do all of that by installing slice machines so what we're going to do go to prismic IO I'm going to show you the docs here it's really important to have you know the docs for everything that you're using you go to resources developer Docs then it'll ask you all right well what framework are we using we're using xjs and we want to go to install prismic and we see create next app we already did that we've set up a bunch of stuff and now we want to run the setup command for slice machine so npx at slice machine init at latest I'm gonna go ahead and I'm going to click copy and we're going to head to our terminal so open up a new terminal for this one you can either open it there in vs code like we've been using or if you're using uh you know a standalone terminal go ahead and open a new tab either way open that new tab we're going to paste in that npx at slice machine init at latest and hit enter same thing hit Y and enter and it's going to go through and install process so we saw quickly uh we have our framework detected next 11 to 13 somewhere in that ballpark there they were able to detect Beyond core dependency installation with npm so that's running in the background while we set this up I'm logged in and pick a repository to connect to or create a new one if you are not logged in you can create a prismic account or log in through it the CLI should walk you through that once again prismic is a free account everything we're using today from figma to first cell to GitHub to prismic all have free accounts for using all the free stuff so just make sure you sign up for an account and come back to the CLI when you are logged in and signed up so we are going to create a new personal repository so go ahead and hit enter and we have a couple rules here you can go ahead and name it whatever you like I'm just going to keep flow rise prismic for you that will be taken if that's what you're naming it but you can name it like flow rise prismic Alex or flow rise prism make your name whatever you want to call it or 55 right but uh this will be taken as soon as I hit enter so it is now configuring slice machine in our project it's creating a new repository on prismic that I'll show you in a little bit it's pushing some data to prismac and it is initializing uh everything in our package Json Scripts and just like that we are set up so we have a command right here called npm run slice machine so we already have npm run Dev running on a separate window that's our next JS app that's our next JS Dev server and we also want to run a second server uh where we're going to run slice machine so npm run slice machine is what we're going to run all right we get this message that it's running at localhost 9999 so that does not over lap with oh it's really big because I've been zooming in for the font that doesn't overlap with our next.js project as it should not and here we are we are in slice machine so we'll get into this in a second but before we do uh let's just save that progress right so let's commit our changes before we get into anything more we see we have a bunch of uh files that were generated for us that's super cool I can explain these in a little bit and right now I'm just going to say feet for feature prismac slice machine init and hit commit and we're good there all right let's take a look at what running slice machine and it actually did for us so first and most notably we have slice machine UI installed I'm running 1.6.0 you'll probably have something newer we put out releases for slice machine pretty much every week either bug fixes or new features we're constantly working on it so you'll have something newer but it should be pretty much the same uh we also have slice machine adapter next and that allows for a deep integration between slice machine and next.js you'll see what I mean in a little bit but this makes it really nice working between the two we also installed a couple prismac packages up here in our dependencies so we have prismic client and that is how we are going to be fetching our data from prismic and pulling it into our next.js application we also have prismic next and prismic react and both of those help integrate uh your content into your react or next.js apps uh react covers more generic components that can be used across different react projects and then the next package allows for you know a deeper integration it'll handle things like previews for us and we'll see some benefits there soon and last but not least we have a new script added and it's just simply slice machine so if you run npm run Dev it'll do this npm run build it'll uh build your site with next but if you run npm run slice machine it will start slice machine we also have a configuration file here and it uh just lists a few things so a repository name yours should be different don't use this one because this will Point directly to my repository uh but also you shouldn't have to touch this file this is auto-generated for you so don't worry about it but I just want you to know what's in here your adapter right it just says like what uh adapter are we using and we're obviously using the nexjs adapter it points to our slice libraries and then we will talk about slice simulator in a little bit now we also have this file prismic io.ts in our source folder here and this does a couple things for us most notably this is where we create our client and the client once again is how we're going to be fetching our data this handles a bunch of boilerplate for us so it actually Imports the config from our slice machine config and it uses let me open that up again it uses our repository name in order to fetch our uh the the data from our actual repository so if we follow config we see that we are pulling the repository name off of that and then we are using that to instantiate our client and that is how we make requests to the the right repository so that's already set up for us you don't have to do any of that kind of API work uh one of the best parts about slice machine is that a lot of the requests made to prismic are already handled for you and you just get to kind of like work on the fun stuff you don't have to worry about like all right I need to figure out how to request from the API in the correct way oh I'm passing the wrong arguments oh no like all of that's handled for us we even have some code out of the gate that is making the caching features of the new Next app router easier for you than they would be if you had to set it up by yourself we even have some preview features here that we will be using later on but just want to kind of point out that this file is auto-generated for us but this is one that we will be editing uh and we even have a nice to do here that says update the routes array to match your Project's route structure and we'll be doing that later on so that is what running slice machine and it does for us it sets up a whole bunch of things that you would have to set up by yourself otherwise it installs a bunch of packages that you would have to install it just makes our lives easier now that our project is set up let's get to know prismac's powerful local development tool slice machine once again you should already have it running if not run npm run slice machine and it's all all one word when you run the command and do that in a new terminal window so here I have next.js and here I have my slice machine you can if you're using the terminal inside vs code you can even rename these if that helps so I'm just going to call this one SM and we'll know that this one is next cool now it's easier to tell which one's which um so we're gonna head to our Local Host I already have it running but uh yeah open up there and this is what you should see you should see something like this as I said the version might be different let me increase the size here I'm at version 1.6 you might have a different version that has a different landing page you should be on something like this so don't worry too much all right but let's talk about what slice machine is think of slice machine as a Craftsman's Workshop or where we can create and shape our data models all while reaping benefits like git versioning component previews and auto-generated mops within this tool we create two main types of data models we have our types we have page types and custom types and then we have our slices so let's start with our page and custom types when building with prismic page types serve as templates to create documents these documents typically correspond to pages on your website and when they don't we'll use custom types custom types can represent a multitude of elements such as navigation menus site-wide settings blog posts authors you name it this part of slice machine helps us build our slices we have talked about that quite a lot those are the page sections that we're going to be focusing on to really deliver value in our website and here we have our changes area where as we create changes as we create page types and custom types and slices and as we edit those we can push those up to prismic this does not deal with Git this is about what does prismic know about our slices and our page types and everything so we push changes to prismic from this window here and last but not least this broad overview of the dashboard we have flow rise prismac this is the name of our project and here's the URL for our prismic dashboard if we click this button here it will open up our uh prismic repository at prismic.io it's walking us through kind of the setup because it doesn't see any page types it doesn't see any custom types or slices that have been pushed because we haven't created any so you don't need to walk through this we will be making it happy in just a few minutes I just want to show you if if you need to get to your prismic dashboard that button right there will get you there all right it's time to create our very first content type we're going to create a custom type that we will call settings it'll be where we put site-wide information like the title of our site where we Define our navigation and where we put fallback SEO information so we'll go to the custom types Tab and click create new custom type so custom types create and it is important here to choose a single type so with any custom type or page type you can either have a reusable type so if this is something that you want to create a lot of like authors right you might have you know 20 authors across your site that is something where you want to reuse that but this is going to be a global navigation or global settings file that we want to have here so this is a single type we don't want any repeats of this type I'm going to call this settings and we have a custom ID that automatically gets entered for us you can change that but that's exactly what we want it to be hit create and there we go now inside our settings custom type we see that we get two options static Zone and slice Zone the slice Zone by default starts as off because typically you use slices in Pages primarily but you can still use them here if you need to we'll get into the difference of static zones and slice zones primarily when we build our home page but for now we want to add Fields just to the static zone for our settings file we're going to click add new field and we see that we're giving a bunch of options of different fields that we can create this is part of what makes prismic so powerful you can add text images embeds links and lots more you'll be familiar with lots of these content types first we want a field for the site or the company's title it's nice to have this for use in a bunch of different places for example it's what will come after the page we're currently on like features hyphen prismic or in our case features hyphen flow rise we see that if we look through all of our options we pretty much have a choice between Rich text and key text so everything else isn't really a text field it's kind of something else still very useful but not what we're looking for the best way to think of the differences here is that key text only allows you to enter a plain string value while Rich Text allows for multiple paragraphs headings bold italics links lists and all of that complex text so for simple short strings key text for Rich content Rich text and for the title though we just want a string we just want to say flow rise right so we're going to go with key text and now we have the option to name it and give it a field ID this is the label that's going to show up in the editor so we want this to be descriptive enough that our editors know what they're changing here so we're going to call this site title and you'll see that the field ID gets filled out for us automatically you can change this if you would like but it's easier if you just kind of leave it alone just so you know editors will see this editors will not see this this is just what we're going to reference in our code and there you've done it you've created our first field in slice machine let's keep going and soon I'll show you how this looks in the prismic page builder so for SEO and social media it's a good idea to have fallback content for any page that doesn't have meta descriptions and OG images entered not every page needs a unique OG image right so let's create fields for fallback meta description and OG image for The Meta description we're going to click add field or add an add a new field and once again we're going to go with key text mainly because we don't allow any formatting with a meta description like in Google you can't have bold you can't have any of that it's just going to be easier if we use a key text here so I'm going to call this meta description and hit enter and that gets created now we're going to create our first image field so I'm going to click new image sorry New Field go to image and and we're going to call this one OG image now you'll notice this little pencil here if we click this it brings up our edit modal for this field and every field has this some Fields have more settings than others but you can see that we can do things like rename the label rename the ID and also set up some responsive views we can lock in what size this is we we could lock this to the OG image size but for right now we're just going to leave it as is so I'm going to hit cancel or save doesn't matter same thing excellent we've created three Fields each of these fields will appear once in the settings document because they're in the static Zone finally we'll tackle our navigation menu so we check out our figma file we see that we have a nav menu up here of just links so for this we'll add a group field with that will include a link field and a text field inside of it so if you click add field we see group here and it says a group of prismic fields that's what we're going for we're going going to name this navigation click add there is a little add field button now on that group field because group fields are a little bit different in that they hold Fields inside them makes sense right you have a group of fields now we're going to add a link field make sure I'm going to go back make sure you're adding it to the group field don't click up here click here we want to add the link there so a typical link a link to a web Media or prismic document don't choose link to Media this is more for files documents and media we want a link field right like that I'm just going to call it link I'm going to click add and now that's going to handle the URL but we still need a field for the string here so we can link to the features page but we also want the editor to be able to put in the word features or whatever they want to call it so I'm going to add a second field to our group here and that is called key text or the the type of field is going to be a key text field and I'm just going to call this label hit enter and we are set we have our navigation I'm going to show you how this looks in the prismic page builder in just a second this might be a little confusing as to what this will look like for editors but basically every time they add a new link to the navigation they will see a link and a label combined and if they want to add another one they'll get another two Fields so every every instance of the group contains every field inside that group so we're going to click save at the top make sure you click that otherwise this does not save so hit save custom type save successfully before we push that let's just check it out real quick we have custom types we have index.json and we can see that in our custom types settings we have this index file and that is exactly what we just created so this in in instead of making you write all this Json out yourself by hand or how however you would typically do it we got to use a nice UI I just got to click a few Fields type in a few boxes and we get all of this made for us now we want to push this to prismic so that prismic knows about this custom type so changes we see that we have one click on changes and it says Ah we have this setting it is new would you like to push it and we can click push changes that'll take a second and it'll come back to us and say all slices and types have been pushed so now we can head to our prismic dashboard to see is is that true and immediately it it is different from what it was before because it's saying all right it looks like you've set up your project what's the main language you'll be writing content in for me I'm going to click English United States if you couldn't tell and then we should be set up so we can start creating content your page builder is ready for you we can click this for this it's the same but it takes us right into the settings because we only have one option uh typically like a bit later on we will see that it'll ask us all right do you want to create a new testimonial or a new page or like what do you want to make here but right now all we have uh the option to create is a settings document so that's what it gives us right and if you look we have I'll make this a little bit bigger we have site title meta description OG image and navigation we have our link and our label it's exactly what we would expect so custom types settings let's compare those site title meta description right it's exactly what we expect and like I said with the navigation we have this option for link and label and every time we add a new element it gives us a new link and a new label so if if we were to add a third thing here like icon or image that would be link label image link label image link label image so just so you kind of understand how group Fields work they repeat everything inside that group every time you add a new element in our navigation field so now that we see what it looks like in our page builder let's actually fill this out so that we can then fetch this data back in next.js all right I'm going to add site title I'm going to say flow rise meta description I'm just going to put one in here right now just flow rise is the best tool for finding your focus We'll add better content later now for OG image in case you're not familiar that is what shows up on social media sites when someone shares your website right it's that image so we actually have one in our component Styles and assets we have an OG image over here that we can come to you're going to want to open it up in your figma file because we are going to come down here and we're going to actually use figma's export feature and Export this we can actually rename it if you'd like we can call it uh OG image and that should change there we go export OG image you could have named it you know in this flow if you'd like but either way uh you have OG image I'm going to actually remove the space there to say OG image and hit enter now if we head back to prismac I'm going to click here we have some uh default images that just come with your prismic repository if you want to get up and running quickly and just kind of play around with it those are there as just free defaults but we're going to upload media we're going to click our OG image that we just exported I'm going to hit open and just like that we have our beautiful OG image and this will act as a fallback for any page that doesn't like put their own forward so when working with images in prismic we always want to add alt text the this is the one exception because OG images don't really use alt text it's just not part of the way that that's set up so don't worry about the alt text here but every other time we're going to add something that describes the image and now last but not least we're going to add a link and a label let's actually add a couple so that we can actually start to build on build out our navigation even though we don't have Pages yet so I'm going to click link it says what kind of Link do you want to insert I'm going to put link to the web and for these two I'm just going to put prismac IO just for some kind of a link to be there and then label I'm going to say about and same thing here I'm going to add a link to prismic you can add it to your favorite site up to you and this is features and I'm going to hit save up here and then I'm going to click publish and it gives me some options so I can click either publish it now I can publish it at a specific date and time this is great for like all right we have a blog post coming up going out tomorrow that we want to schedule for like you know 8 AM sharp so that you don't have to come back at 8am and publish it or we can publish it during what's called a release and release allows you to make a whole bunch of changes or create a whole bunch of new documents and bundle them to together into one release so that if you're not just you know pushing out one blog post on uh Tuesday at 8am but you're launching an entirely new initiative you've changed a whole bunch of pages changed a whole bunch of content and you want it all to release at the same time in the future that's a release so if that's what we wanted we would choose that we're not going to be touching on releases in this course but they are great for Content teams they absolutely love that feature so publish it now and click publish and just like that our top turns green because we don't have any changes to be published this is a published document so just to recap we created our first custom type we created settings we modeled out our fields we created the document in prismic and we published it so we did a whole bunch in this part of the video now let's add those changes to our repository we see that we only have uh two files that have changed one I already showed you and this is the actual schema for our settings custom type but this other one you might be saying I don't remember changing that right and at the top it says code generated by slice machine do not edit that's good advice we don't want to touch this but I said earlier that don't worry about typescript too much slice machine and the prismic sdks are going to be taken care of the vast majority of our types and this is what I mean when we create our settings custom type this gets generated for us I personally uh would not like to have to deal with all the types for all of the fields and the slices and everything that we are building in this course but slice machine does it for us so don't worry about anything uh this is going to continue to come up in our get changes this is such a wonderful feature you will see exactly the benefits when we start to fetch our data but for now we're going to add both of these to our stage changes once again you can do it in the terminal if you would like and now for our message just going to put feet for feature create settings custom type I don't know why I capitalized everything but hey you do what you want to do hit commit and we are set those changes have been committed now let's fetch that data and actually build out our header and our footer alright we are ready to dive into customizing our website's layout file but before we do that we need to really understand the difference between pages and layouts and how routing works in the new nexjs app router because even if you've used nexjs before it's changed quite a bit now you're definitely familiar with the pattern of having something like slash docs slash app slash building your application routing and they show examples here of acme.com dashboard slash settings now the difference between the old way that we did it in nexjs Pages router and the app router is that the way that we actually name these segments is by using folder names all right so we actually name each segment by folders not by files all files have to follow a couple naming conventions but our folders is where we can name it whatever we like so here in this example of dashboard settings we see that the root is in our app directory and that's what we have right here our page in the source of our app directory is sorry in in the root of our app directory is going to be our root page it's going to be our our home page and then if we create a folder like dashboard and then a folder like settings we can Nest those routes and then put a page inside settings and that that that's what we'll render if you go to this URL in the example now it is important to know that there are a few file conventions we see layout and page in our project already the layout is going to contain any shared UI for this segment so in other words for this page but it's also going to affect any children so if we create a folder inside this app directory and we will have that layout the the UI elements that we put in that layout will affect those child Pages as well then we also see page and that one's probably pretty self-explanatory that is an actual page and that is a publicly accessible thing you can't go to a layout and visit that but it a layout is used by a page these others we're not going to touch on too much in this course uh they can be very useful for creating apps and things like that but we're not going to be running too much of these we have a couple routes actually so you see this route file type here we actually have a couple of those that were put there by the slice simulator Sorry by the slice machine init and if you open up API we we won't touch on these Jesse yet but we do see a few routes and these are server-side API endpoints that we can hit and it's going to run some code for us we will touch on that in the preview section and when we are deploying to versl but we see that we are following the route naming convention so just to illustrate how this works let's head to localhost 3000 this is our next JS app in page.tsx I have I'm going to move this over a little bit I have our H1 that's saying hello world I'll add another exclamation mark there just to show that it's updating it's it's working uh and then in our layout what I want to do is start to build out the actual settings that I have so I'm going to go to the website um or or not the settings but the layout so I have a heading there and I have a footer there and I want that to be consistent across all pages it's going to be there and there and yeah you get the idea and so and so this reference to Children Here is actually anything coming from our page so I can wrap children in our header and our footer and they will render above and below whatever we put inside our page so let's go ahead and do that now inside your body let's do header it's going to do a typical HTML element first I'm going to say header and like exclamation marks because they are exciting uh let's do footer at the bottom and footer now if I save this we can see that we get our header up top and our footer underneath because children is coming from our page now if I were to create another page then header and footer would appear above at whatever content I put in there so this is a nice way to define the header and footer in one place and then our Pages can be as lightweight as possible and not have to include all of the content uh or or rather it doesn't have to include the header and the footer and whatever else you might have if if every page on your website has a sidebar you're going to want to put that in the layout as well so just anything that's shared across every page or at least across pages in this area in in this route or in child routes you're going to want to put that in a layout file layouts can also Nest inside other layouts but that's going to be outside the scope of this course we're just going to be creating kind of a standard marketing site and you're not going to be nesting a lot of layouts and doing really complex stuff that's going to be for more for like app dashboards and things like that so this new app router is really powerful we're going to be using some of its features but not all of them all right so right now we're going to be working just in the layout file I can close my page because we just want to work on the header and the footer so first let's get our data from prismic as you might remember earlier I showed you the prismic io.ts file and we are going to be getting our data using this create client function right here so we want to import this into our layout file I'm going to go to the top of the layout file I'm just going to hit enter here and say import now it's going to be a named export so we need to use the curly brackets create client we don't want to use this one because that is the uh one coming from the prismic client package and we see it right here here now this little at that that we're going to use that is an alias for the source directory so we can save a lot of time and we can avoid any kind of like confusion like if you've done the whole thing of like dot dot slash dot dot slash and then like trying to figure out like what folder you're in uh the the way that nexjs sets up their projects now and that should be in the I believe in the TS config we get this little uh at sign maps to source so anytime you use this you can kind of um fill that in for starting in the source directory so if we had a file uh you know deeply nested we could go at and then slash settings slash pages right like so we could go from Source directory but right now that that uh prismic i o file is just in our source directory so we're referencing it there and this little ad is going to save us a lot of time throughout this project and it makes it so that you can move things around even like up and out of folders and you don't need to change your Imports It's a Wonderful feature now if you've built next.js sites with the old page router you know that you really had one good place to fetch data and that was at the page level so if you fetch data outside of a get static props or a get server-side props function you could really hurt your performance because you'll be fetching client-side so you had a lot of fetching done at the page level and then you had to pass props to child components or through using context it was you know limiting you you would benefit from server-side rendering or just from like good good performance on your fetching but you you had to fetch in one spot and pass that data around that problem goes away with the next JS app router so with app router the best practice now is to fetch in each component as far down the tree as as you can so if a component uses some data from prismic or some data from some source fetch the data within that component it keeps the component more independent and more flexible each component fetches what it needs it is a game-changing way to fetching your content and just to building out sites and apps in x.js even better nexjs is smart enough to de-duplicate requests when made in quick succession so if we make three requests for our settings document only one request really gets made so you can access the same file across your entire site making what seem like you know 20 fetch requests but next is going to say ah this is the same thing here's that data already I already have that data I've cached it alright since we are in the layout file let's start with the information that we need here which is our metadata now if we head to the next JS docs under optimizing we will see metadata and there are a couple ways that we handle metadata with the new next.js app router we can go config based metadata or file based metadata because we want our metadata to come from prismic and we want that because then our content teams can edit it right so they can change this image they can change this content without having to come to a developer we want to make sure that we are not using static metadata so right now that's exactly what we have on our page so if you see this metadata right here our title is static so I can go in and it has to be changed in the code and we see that it gets updated there in the title of our nice little app so we don't want this right like I don't want to get a phone call saying hey can you change the description for this page whatever that's what prismic's for so we're going to be getting rid of this in just a second so we don't want to use static metadata we want to use Dynamic so for that we need to actually call a function or we export a function called generate metadata and that in Fetch metadata that requires Dynamic values so here in this example they're using it on a page but we can use it on our layout we export an async function called generate metadata and everything here in this example happens within that function now they are reading an ID and they are fetching you know just an example fetch request based off of that ID and then they are returning some of that metadata they're returning a title and an open graph image and we can get into this uh so make sure you are on this page because we're going to be copying some of this stuff over so I'm going to First grab the import and come over to our layout file I'm just going to put this at the top import metadata resolving metadata from next uh oh we already have we already have that import I'm just gonna I'll I'll keep that one that's fine cool we already have that um and now we want to to bring in this export async function generate metadata I'm going to copy the whole thing down to here and I'm going to wipe out the metadata export that we have so from lines like 19 to 22 if you have the same line numbers as me you might not uh and I'm going to paste in what we just grabbed so I I know there's a lot going on but just to kind of uh give you an overview of our file so far once again this is layout we have our two font declarations here we have our generate metadata function that is going to handle that and then we have our root layout which includes our header and our footer and all of our children and just basically you know the HTML and body elements so back to our generate metadata function we see that we see that it's already yelling at me over props missing and resolving metadata missing because uh I'm not importing them right so here's props here with metadata but we don't need any of these parameters uh we're not going to be using these these Arguments for anything so you can wipe that out so it just says export async function generate metadata empty parentheses and then this is the type so this is what uh this function will be returning so it's going to return a promise that will resolve the type metadata and this type is really handy because it's going to help us out in this return down here in just a second and here we have this optionally access and extend rather than replace parent metadata so that's a really uh handy way of handling your metadata further down the line but remember the layout is like the absolute root for everything so this is if if no metadata is added to the page it will fall back to this so there's nothing from like there is no parent to get data from so we can erase all three of these from the ID product in previous images we can get rid of those and and we'll just have our return now we are going to be using this create client from prismic that it's yelling at us saying you're not using this yep we're about to so we come to our generator generate metadata function and we we're going to say const client equals create client just like that we're going to call it as a function and you might wonder uh how does it know what like you know what my repository is remember all of that is already baked in so it's already configured for us it's all set up it's going to handle the next JS cache for us it's going to act differently in production I can talk to these features shortly but just know that uh we now have this client that allows us to fetch our data and it comes with a bunch of Handy functions on it and let me show you some of these so we're we're not going to fetch our page so we're going to say const okay age equals and we're going to await because this is going to return a promise so we we need to wait on that to resolve so client and then if you push period or type period we see that we have a whole bunch of functions that pop up here so we have get get all by every tag get all by IDs we have a lot of options for how to query our content in prismic so whether you want to get you know all of your blog posts or just a single blog post or um you know get by a specific uid the client is how we're going to fetch our data from prismic but right now we are going to use what is called get single and this is not a dating website function this is I guess maybe a divorce website function anyway this is for getting single type documents now remember when we created I'm going to go back to slice machine remember when we created our custom type it is a single right so if I go to create another one single type anytime you create a single type it's easy for us to then query it and say hey I know there's only one settings file go ahead and get that settings file so settings all right so that's all we have to do we just have to say get single settings and then it will know that we are returning a settings file so if I come down here to our title we can go page and then if we look I'm going over to slice machine if we look at settings we'll see that it tells us exactly where all of our data is actually going to be so it's going to say data Dot site title so we know that these are all going to be coming off of data this one is data.navigation.link and so on so we're going to go page Dot and if I hit control space it shows me my options and there it is it's data we also have a few other options that we could use if if we wanted to like first publication date but we're focusing on what we're doing uh page.data Dot and then I get my options here So Meta description navigation OG image and site title obviously for title I'm going to go site title but I do want to have a fallback here just in case something isn't entered in prismic so I'm going to say flow rise but I'm just going to put fluorize fall back for now we'll fix that but I just wanted to show that the the debt is actually coming from prismic right so if we see flow rice fall back we know that we screwed something up here and now our open graph images um actually let's first add a description because we do have that now the nice thing about having this type here for the return type we can hit control space right here and we see all of the metadata properties that we have available to us so there's a whole bunch um we're looking for a description so you could type description or you can go through and kind of pick and choose whichever you like now this is going to take let's see a string exactly so string null are undefined once again this is the beauty of types so for the description we can go page.data dot meta description and we'll also have a fallback here but this will just be something you know fluorize is the relaxing app for you uh this is you know just good practice as a developer you don't want it to be that if your content team screws up forgets to put a description in that you don't have something there obviously put something a little bit better but uh never leave it so that you know they can ship a broken site that's kind of the goal and last but not least uh oh and we need to come at the end here last but not least our open graph images so here we don't have previous images because like I said we got rid of that one line that uh would allow for that because this is the root of our project we're not going to have previous but for images we're going to get rid of this and we're going to go page dot data dot OG image now here's the thing OG image is not the URL um and it's yelling at us for that so OG image has on it a couple of attributes remember I said we can set the alt attribute if if we if we had that we could put that here but obviously we wouldn't for URL so we want OG image dot URL and it's still yelling at us and that's because this could be a string null or undefined and that's if nothing is ever added to the image field it will return either null or undefined so we need to give it a fallback and for this we're just going to put empty quotes um just for now you could go ahead and have a local image added and reference that that's fine uh but for now we're just going to put an empty string just to make it happy so I'm going to hit save and we're gonna go look at our page and we're going to find that we have our first error congratulations we are getting a link resolver error declare type home page expected one of settings so basically the prismic client is yelling at us saying hey hey you told me that we either have home pages or pages but you're asking for settings what's going on and that is because over here this big to do update the routes array to match your projects route structure uh we didn't touch these from the default so we see that it's expecting either a type of home page or a type of page and we don't have either of those in our project just yet we don't need to add settings to this because settings is something that we're not going to route to right like no one has a heading or like a footer navigation page this is for routing so we're just going to go ahead and comment out these two objects for now and we will actually come back and use both of these later like these are good defaults to have but comment out that whole line so that you just have an empty array and hit save and that should fix you up and up here we see flow rise in our heading if you want to check that you can go ahead and say test hit save hit publish and that should make it so that if you reload the page you get flow rise test up there awesome I'm going to change that back but we have our CMS wired up we barely had to do anything uh and we are already wired up to our CMS that'll update in a little bit and I'm going to go ahead back to the layout and remove flow rise fallback I just wanted to prove that it wasn't coming from right here oh let's also look for our open graph image so let's see inspect or yeah we'll inspect the page we don't have a whole lot we have some script we have our footer we have our header we have our main and in our head somewhere in here we should see an open graph image and right here we see content images prismic i o I'm going to double click it and we can copy it we can view it over here and there it is that is the OG image coming in from prismic if they change it in prismic that will update perfect that's exactly what we want to see and also takes care of the Twitter image for us so well done we've set up the metadata for our layout now if a page doesn't have any metadata it'll fall back at least to this all right let's make a little quick Atomic commit uh we can go ahead and add both of these and say feet add fallback metadata to layout click commit and there we go we've saved that bit of work now what we want to do is create a proper header and footer component in react in react we'll typically have these as separate components and that's what we're are going to do so here in our source directory we have source and app and slices we haven't built any slices yet but we're going to create a new folder I'm going to right click on Source click new folder and I call this components all right we're going to create our header first so I'm going to right click new file header dot TSX so that's typescript and jsx all right we have our file all right now we need to declare a function in here so I'm going to say export default function header parentheses and brackets all right and we're going to want to return at the end here return with parentheses and let's just grab our header for now pull that out put that here so that we have return header I'm going to hit save on this it doesn't really do much but I want to import it into our layout so import I'm going to come here and say import header from and it's going to autocomplete for me at components header exactly and I'm going to swap out our well I already got rid of it so header and I can put slash just like that and that will give us the same result if we're lucky let's see header there it's still there cool and our title changed back just as we expected now if you remember I said that with the app router we are using react server component so we want to fetch our data as close to where we are displaying it as possible so if the component is going to use data we will fetch it there so what we could we you know you could fetch it in the layout and pass it down to header but we're not going to do that we're going to follow the new best practices so we're going to copy our create client from at prismic IO right there and we're actually going to also copy our cons client equals create client and our page for settings actually you know what uh before we go I just want to change this from page to settings it's a bit more descriptive because we are not actually fetching a page here are we so yeah go ahead and change that to const settings and then it'll be settings.data that's the only thing that should change across your generate metadata export so just change that it's a better name for it I'm going to save that and uh all right so yeah change that to settings and then we want to copy client and settings we're going to import that right here cons client equals create client con settings equals await so it's yelling at us here though it's saying hold on a weight expressions are only allowed within async functions and the top level modules got it so we need to actually change this to an async function just like that and now it is happy now it will be returning a promise instead of returning this header straight away it's going to wait for this to resolve before returning it Now settings we can use in our header and we can immediately say settings dot data dot let's go site title and we should see in our header flow rise because that is whoops because that is what we have here right so we're already using the information that we've fetched we can even do the description So Meta description put that there and we'll see if flow rise is the best tool right so we're getting our data in from prismic and we're using it in a second component here in our header component so what do we want to put in this header element let's take a look at our figma file we really just need the logo and the navigation so for right now we're going to put a placeholder for the logo we'll just add the word flow rise from our settings file and then we want to really render out this navigation so let's focus on that I'll change this back to the title for now site title and we are going to add inside here a nav element just like that and your nav element should have inside it an unordered list so type ul and the way that I'm creating these brackets like that quickly is I'm just hitting tab so there's a plugin called Emmett that should ship with your vs code or whatever code editor you're using so you don't have to type in you know bracket UL bracket anything like that that autocompletes and that's nice but that's how I'm kind of being quick with this and then like Li you just hit tab so in case you're wondering all right so inside this unordered list we want to map over these navigation items we know that we have an array of these two and if you're not sure we can go and see okay data.navigation is an array and on that array we're going to get link and label just just know that it's not DOT link it's going to be like the array item all right now for inside our unordered list we want to map over the items that we have in our navigation array so every time someone clicks add a new element navigation that is going to create a new item in our array and in slice machine we see that data.navigation is how we access that array and then link and label are the two items on the array all right now to access that we want to go settings dot data dot navigation and from here we want to map over that data so type map and then in parentheses we want to put an arrow function in here so I'm doing a little bit of that um I actually I'm going to remove the squiggly uh brackets and I'm just going to return a bit of jsx when we're done but first I want to destructure the prop that we're getting in here because uh we we can get an item right so like we can see that that is coming in as a settings document data navigation item right it's already typed for us that's really nice but I actually want to destructure off of this item so if I hit control space we see that we have label and Link um not only is that handy but it also kind of shows us all right our code is good so far right so we have link I'm going to grab that and I'm also going to grab label so nice and then it even shows us what it is oh it's a key text field right so once again we see how typescript is really really handy and we didn't have to type this right this was done for us by slice machine all right so now we're going to be returning a list item inside of our unordered list so all right we need a key for inside this list item so type key equals and then curly brackets and I'm just going to use the label because that should be unique every time now if we go to slice machine and see show code Snippets this is going to be very handy in the future but I kind of want to show you that it does say that link should be using prismic next link this field is isn't going to be accurate for what we have right now so go ahead and copy this you can either click copy or you can copy it right from here up to you but that code snippet's nice and handy so we're going to paste it in and we're getting yelled at a bunch because it's saying hey I don't know where this prismic next link comes from what's up with that also this isn't like I don't have a data to reference but instead we're just going to remove data.navigation and just choose link and now it's happy there but it's still saying I don't know where prismic next link comes from if you click Quick Fix we should be able to import it right from prismic IO slash next because it finds that in our package and just like that we have import prismacnext link from prismic IO next now you might be wondering what is prismic next link well prismic next link is a wrapper around next link that adds some prismic specific features to it perspect next link is going to be really handy for internal linking especially once we uncomment this route resolver and tell prismic next link what our routes are and it will be able to say oh okay I see this document is this certain uid or this certain page I will link to that URL so this is essentially all of the benefits of next link plus some specifics around how to navigate within a prismic project so it comes with this default link text in the middle that's not what we want though because we have a label so if we type label we should have Let's see we should have about and features once again those are not styled because we are using tailwind and we haven't added any styles to them yet but we see we are linking to prismac we have features I'm looking to prismic with about and that's exactly what we would expect you can change those links if you want to see if they're different or something went wrong but this is exactly what we would expect both about and features are showing up and it it acts like a typical link if the JavaScript doesn't hydrate in so even as a fallback uh next link and please make next link are just fine for using with links all right now we want to have our site title also link to the home page but here's the thing we're going to actually use just regular old next link for this so if we type import link from uh I thought it might come autocomplete let's try to get a link uh from next link there we go I just I type too fast um so we have link and the only reason we're using this here is because we know that we're going outside of prismic for this uh and we're doing that because I know I want this to take me to the home page every time so we're going to type link href equals forward slash and close those with angle brackets and we're going to move that around and now we should have a link that just takes us to forward slash which is home if we inspect this we see it and I'll make this a little bigger for you ahref forward slash flow rise so that's what we want there uh that's when you would use just link if you know like I'm I'm routing to just a specific page here all right we have our header and our content coming in there it's not styled to match yet but we're not going to be selling it just yet we'll get into that a little bit later here right now I'm going to go ahead and make a footer so same thing in our components folder we're going to create a new file footer.tsx and just like our header we can go ahead and say export default and we already know it's going to be async because we're going to be fetching data inside this function footer and so just like we did for our header we can go ahead and pull this fetch over here so we're grabbing the client and the settings going to paste that in there it's going to say what what's create client you can either copy it over or I might be able to use the Quick Fix in vs code Quick Fix add an import from at prismic IO client we want this one remember this is the create client function locally so make sure you are in in your components you're not calling the one that we are pulling in from uh prismic client but we want to import the local version of create client because that already has our config and everything wrapped up in it so we can start it there we have our client and our settings and similar to our header we want to return not a header but a footer so we can grab the one the excellent one that we have over here footer you can cut that out and we can say return parentheses footer and we can just hit save on that it's not it's not using the settings yet but we can import it into our layout so just like we have our header we're going to import our footer so I'm going to start typing f-o-t-e-r and we'll see that vs code has said hey do you want this one from components let me say yes close it with a slash and a closed angle bracket and now we should see no change footer but it's a new footer save that new footer cool so we know it's importing from footer.tsx so now if we look at our figma file just see they're pretty similar right that's our header that's our footer I didn't design them too too differently but the footer does have you know the copyright it's kind of a kind of a must-have right so we can go ahead and bring over some of the same stuff that we have here we can use this link again right it's it's pretty typical that footer logos have a link so I'm just going to copy that line going to bring that over again I'm going to get rid of uh new footer but you know pull up link kind of paste that there let's see if we can quick fix it you can always write the import yourself if you'd like but yes import from next link and we can actually take this nav over as well so or or actually in a page you should really only have one nav element you shouldn't use those over and over again so we're just going to grab the UL and the rest of this can pretty much stay as is so I'm gonna uh sorry tab to the wrong thing so I'm going to paste that there so we have our ul and it says hey what what is this specific next link right I'll stop explaining that part but we'll fix that there and we should see on our page flow rise about features now we have the same thing above and below only thing we need to add is copyright 2023 flow rise now uh I don't know how to type this typically I always have to Google it so I'm just going to copy the copyright symbol from there and we're going to go back to our our code I'm going to make a paragraph and I'm going to paste that Copyright symbol right there and then we don't want to have to update this every year and also we don't want to you know put the year in prismic that's a little bit silly so instead we're going to use curly brackets I'm going to say new date get full year just like that so date is a function we call that and then on that we call get full year and that should give us the year let's check it out copyright 2023 if you're watching this in the future hope it's going well and then we want to use the site title again this part will eventually get swapped out for the logo but this we will actually keep so see 2023 flow rise awesome and then flow rise is a link these are both links there you go that's our header and our footer it was as easy as that it's nice when you can copy most of your code over right so we have a working header and footer let's go ahead and commit this work feat add header and footer components I'm going to commit that and we're good to go so just to kind of celebrate uh you are fetching data from your CMS pretty pretty easily I would say too right like this isn't a lot of convoluted code that we had to write and then we are rendering that data out to our page and we did some basic text but we also did in our layout we have where is it uh in in an image right it's just a URL but this is a good start we're going to get into some more complicated more you know I think it's like Rich text and the way that we handle images in prismic when we're rendering them to the page uh we're going to get to those but this is a fantastic start awesome job all right we have our layout built and just to kind of check make sure that you know we actually have that we have a main which is right in the middle there we have our header and we have our footer so this is exactly what we expect we have our header our main and our footer and the you know as we said the header and the footer come from the layout but everything inside the main that's going to be what we consider our next.js page so now that we have our layout thanks to that settings file we're going to move on to creating our home page let's check it out in figma again here is the home page now remember the home page by itself isn't really all that interesting uh really what's interesting here is all of the parts that make it up right these slices are the real stars of the show you take those away there's not much left on that home page I'm going to control Z input those back but yeah just really want to let that sink in where it's it's really about slices so let's go go ahead let's create our very first page type opening up slice machine Let's head to page types and yeah we don't have any yet so we go ahead and click create we do not want a reusable type here so typically uh Pages can be a reusable type and we will create a reusable type page but this one is a little bit special we want to have just one home page I'll explain why in a little bit but for now go ahead and hit single type and we're going to call this home page I just do all one word and hit create and there we go once again kind of like our custom type we see a static Zone but this time the slice zone is turned on and whoa they are drawing our attention to it because they as I keep saying they know these slices are the star of the show so they're saying like hey do you want to make a slice we will get there because we are going to use the static Zone as well let's talk about what each one is used for static Fields always appear in the same structure for every document made with this custom type they're great for Content that every document should have now we represent our page sections with slices and each slice has its own set of fields which we'll get into soon slices can be added reordered or removed from any document for a custom type that they're added to so I can have a slice that is only available to be added to my home page or a slice that's only available to be added to a page that isn't my home page so we'll see that in a little bit so first we're gonna we're gonna set up some static Fields similar to what we did in our settings but these will apply just to the home page so we're going to add a new field we're going to choose key text again and we're going to name this title I'm going to hit add and just like that we have a title I do want to point out before we go too deep we have a pre-built SEO and metadata tab here so over whenever you create a page type you see that we get um a few Fields already built for us and this is going to be really handy for our editors once we push this to the page builder I'm going to hit save real quick and show you how back at our custom type for settings we don't have that we could add a second Tab and that's just a structural thing that doesn't change the shape of the data really but it just you know helps for organization but for our home page as soon as we create a page type prismic gives us a little a little bit of help and says all right you probably want a meta description a meta image and a meta title I'm actually going to move this meta title up to the top I like it up there it makes more sense so you might be wondering why do I need a title and a meta title isn't that the same thing it could be but I think that a production site really needs both so this title we're going to use this for what appears in the browser tab so right right here right that's what the actual title will be here this meta title is what's going to come up when you share it on Twitter or in slack or on LinkedIn that's what the meta title The Meta description and The Meta image are all going to uh like that's where they will show up but this title this is mainly for just the actual title what what goes between the title tags in our HTML all right that's all we're going to put here for now we will add slices shortly but right now I want to make sure you save we're going to head to changes and we're going to push these changes to prismic you can see once again just like settings it says hey you have a type to push and it is a brand new type all right great we pushed that change now we had there's the docs head to your dashboard once again if you can't find it go ahead and click that little arrow it'll open up your dashboard right now we just have that settings file we can go ahead and create new and once again it just created a home page automatically because that's all we had available to create so it just assumes all right I guess you want a home page right and this little X this is saying all right do you want to add a slice but right now we don't have any slices it's a very boring document so far but right now we're just going to say home for our title SEO and metadata we can say uh flow rise home page and then description just you know we can put in more flow rise uh is the app that will help you relax and hit your focus goals and meta image we can just use this one again for now uh hit save and publish and publish again great so now we can request request this data back in our page component now here's the thing I could either show you the prismic docs or I could you know tell you how to build this page out or whatever but slice machine makes this even easier on all of us so if we go back to our home page I I went back to page types I went to my home page up here at the top you see page snippet if we click that not only does slice machine know that we're using the app router and that we're using next JS but it knows like like it's going to help us query our information look it even helps us with our generate sorry metadata function and it is giving us our title and our description from that like this is such a shortcut that like this is why I get excited about the integration between slice machine and next.js this is what that adapter does for us this is one of the many things that that adapter does for us so it's says here add a new route by creating an app slash homepage slash page.tsx file if the root should be necessed in each other so we're not going to follow this exactly because we don't want it to to be at forward slash home page but if we did right that's where we would put it but instead we're just going to put it in our uh home page file but go ahead and copy this and we're going to head to our uh did we make any changes uh we we can commit those later go ahead and go to your page.tsx file should be in Source app page.tsx we can pretty much wipe this out there's not a whole lot going on here anyway but you can paste in what we grabbed from this page snippet pop-up and everything but this is ah okay so it's saying hey we don't have any slices what's going on uh which makes sense right we don't have any slices yet maybe we can comment that out uh or it's just going to yeah I'm not sure if that's going to break on us we will we will find out and we'll deal with it in just a second uh but we can see that it is going to query that single in both our page and our generate metadata function so it's going to give us our title our description and once we have slices it will render them in this slice Zone here so we'll talk about this shortly when we have slices uh for now just to play it safe I'm going to say after our uh query I'm going to say return it's going to put a div I'm going to say it worked exclamation mark we're always excited here and I'm going to comment out that slices bit because uh you know maybe maybe that's going to throw an error and I just don't want an error right now so here we go we get it it worked starting to kind of Stack Up well let me see if I can put a class on this a class name equals text Red 500 let's go just so we can see our text there we go it worked and now we should see uh flow rise homepage yes for our title I'm not sure how small that is for you there we go fluoride's homepage that is coming from our home page uh uh it's coming from our home page page type I know that's a mouthful but think about how fast this was to set up for us just now we had some boilerplate code that we were able to copy from slice machine they already built this whole thing out for us they already wrote the query for us uh it already you know wired through the metadata for us and you'll see soon as soon as we have slices that's going to be taken care of too I can't stress enough how easy and fast it is to set up a prismic site now that we have slice machine it is it just makes so many things faster uh you're only seeing kind of like the the beginning of this so let me explain uh what what we just kind of copy pasted right so uh we've already gone over the generate metadata function that's a you know a very familiar thing that's almost identical to what we have in our other page the only thing that we're going to add in maybe a minute actually yeah what what we'll add it in just a minute um the the only thing that that will add soon is the OG image there but we don't need that just yet uh then we have a page just exporting our page we instantiate our client we fetch the single home page and right now we're just showing that it worked but soon this slice Zone element or uh the slice Stone component is going to take in two things it's going to take in what it gets back from prismex so these are the slices that your content team says they want and it's going to return an array so each slice is going to come back in order with the content that they have within them in each field and then we're also passing in our components and those are the actual react components that we will soon create that represent each slice and then slice zone maps the data to those react components and renders them in order on our page so we don't have to do anything like it's it's it's just taken care of for us it is nice and handy so we've set up our home page it only has uh it it only has a little bit that's actually rendering I'm going to change this to home page and I'm going to save that and I know we've got a few things that commented out and everything but just to kind of wrap up this mini section let's go ahead and say feet add home page page type cool gonna hit commit and that's saved there all right it is the moment that I have been hyping up this entire video at just the moment that you've all been waiting for we're gonna create a slice we're going to create our first slice now it's going to feel a lot like what we've just been doing with creating page types and custom types but don't let that you know ruin the enthusiasm that we've had all right we're gonna click new slice and it says all right great what do you want to call your slice I'm going to call it hero and it says Target Library Source slices yup that's where we're going to save pretty much all our slices we're not going to deal with uh multiple slice libraries here that's a nice way to organize your slices if you have so many that you want some just for your blog uh pages and you want some just for your home page and you know you you just have so many that you need to organize them better but we're only going to make five so we're going to click create and there we go similar kind of layout except we do have an interesting you have no screenshot yet uh image over here and we can update that screenshot we see simulate slice up at the top we'll talk about that in a second we see that we have it says default and then variation ID default and it says you have one variation and we can create variations we will be doing that not not just yet but we do have a non-repeatable Zone and a repeatable Zone and this is similar to what we saw in page types with the static and the slice Zone where everything up here is going to show up just once hence the non-repeatable and then down here are things that can repeat so if you want a field to appear just once in the slice you put it in the non and if we have some repeating Fields like for instance this right here you know this is a repeating field where this repeats to that repeats to that repeats to that those are going to be repeating fields that we will work on but this in that same slice is going to go in the in in the non-repeatable zone so for that one we have a heading and then we have repeatable uh items but for right now we are going to start off with this beauty right here this hero up at the top so as you might be able to see we only have um one of each thing right so we have a heading we have some body copy we have a button with some text and we have an image so I am you know I know you can see that but I'm deliberately going through that so we can kind of all um get in the mindset of what it's like to build a slice because building slices is kind of looking at your slice design and I might come over just to my slices here and kind of breaking it down into What fields you need for that slice so once again we have a heading we have like body copy we have a button and buttons always need two fields for them so one is going to be a link and the other one is going to be a key text for the label and then we just have an image that that might seem more complicated but it's just a snapshot of a UI so this is just an image so we have one two three four five fields that we need to create all right so let's get to it first we're going to add this heading so I'm going to click add new field in the non-repeatable zone and I'm going to choose Rich text now I'm choosing Rich text because I want to receive back a specific kind of element and I'll explain why in a second so heading is what we're going to call this you can either hit add or enter and then you're going to click the little pencil and we see ah Rich Texas is is interesting because it comes with a few options here we could put a placeholder so that our editors see something right so maybe this is like if you need to explain something about the hero itself you could put a placeholder there we're not going to do that right now but what we are going to do is we're going to change what this field accepts and so we can say that we want the content team to be able to use anything that they want so they can make paragraphs and heading ones and heading twos and they can just go wild in this field but this is not that that kind of a field right you don't want them to put an image in here you don't want them to put bold and italics like the designers would kill you so we're going to go here we're going to unselect all and we're just going to choose H1 so we turn everything off and then turn back on the H1 because that's all we want coming back from this field we're going to click save and you can click save the file system but you know we're going to add some more Fields so great we've got our heading there and if you did click save it would be Peak over to our file system we do see ah now we have some slices so now you can uncomment the import because there's something there right we have this index file that it's importing from you can turn your slice Zone back on and we can remove our home page shout so now that it it has a slice the import is happy I'm actually curious what our home page looks like it doesn't really say anything just yet because it's just going to be that the header and the footer with nothing in between right because there's no slices coming back from the home page yet we will amend that don't worry all right we have our heading let's keep moving let's move fast all right we're going to add another Rich Text field we're going to call this one body and just to remind you this is matching up to this I'm just going in order and you want to keep these in order so that your content team isn't confused so I'm going to click body and click add but this is a rich text field and once again I don't want them to put in H1 here so I'm going to unselect all and I'm going to allow paragraph bold and italic there I uh you know let's pretend I talked to the designers and they said no link shouldn't go there images shouldn't go there right so I'm just going to allow that and that's it for that field next we'll add the button text I'm going to say add a new field and we're going to just use key text and I'll say button text ad now key texts are really simple they don't allow for any settings right Noble no italics in case you were wondering and next we're going to add the link for that button remember buttons need two things links and labels so we already have the text there and now we need button link and hit enter now links don't have many settings but you can allow Target blank on them and then that that's a setting within prismic we're just going to leave that off for now and last so we have four fields we need our image field so last field we click image we're just going to call this image click add and then save to file system cool all right so now we can actually build out the code portion of our slice because uh if we go and look at the file that it auto generated for us and yes it created a react component for us Isn't that cool um it says placeholder component for hero and it uh shows us the variation that we currently have uh it's it's nice it's handy it's cool that we didn't have to create a component and write out like you know const hero equals and do all this export stuff and it yeah it it Imports things for us it exports for us that's a nice time saver right now it's just a placeholder component but how can we see this component without going into prismic and adding the slice and doing all that stuff like I don't want to have to do that right I don't want to have to go and add dummy data in here to refresh this page add that slice and all I don't like that workflow that takes a lot of time I have to write some lorem ipsum in there I hate writing Laura mipsum I don't want to have to do it so slice machine actually gives us a really great way to build our components quickly first before we go there I just want to make sure that your next server is still running if it if it is then this page should be working for you right um but in your slices hero default you're going to click simulate slice and that's going to open a new window and it should say simulator hero something like that and we'll just wait a second and here it is this is what is called slice simulator and this allows us to preview our slice with some mock data so you can see over here this is actually matching up with our field so we have heading body button text Etc heading body button text button link and image so you can see that in body they added a little bit of uh of Lauren ipsum that I don't like writing in heading they have a word right and we can change these so I can say this is my text and I can save that mock content and we can actually use this content to build against if you've ever used something like storybook where you're building slices or sorry where you're building components in isolation this is very similar where we are building slices in isolation and we get this free mock content to build against and it's auto-generated and we can even grab images from unsplash we can do all kinds of stuff here this speeds up our slice creation so much so not only do we have this simulator to check the and see what our our current slice is looking like and I'll show you once again as as always we get excited and we see ah look it instantly updated awesome so not only do we do we have this simulator but if I want to start to pull this data in that's going to hit save in case I didn't uh we have over here this show code Snippets button and as soon as I click that each one of these fields reveals its corresponding code snippet that that allows us to display that field so if we see heading here we got prismic rich text field equals and it already Maps it so we don't have to do a console log and find out where is that heading on your right like is it slice dot main dot heading or what is it so copy that snippet for heading and we can head over to our slices hero index.tsx file and we can just erase this I'm going right in between the section and I'm pasting in prismic Rich Text of course we need to import it just do a quick fix and in import that and I'm going to hit save and we should see if we go back to the simulator this is my text right it's exactly what I put here uh we can you can change it uh hello YouTube right so you can type that there and you're going to see it update over here you might be thinking I thought we said that was going to be an H1 we did and once again it's just that Tailwind is removing those Styles so don't worry we are getting back exactly what we asked for now that we have this mock data to build against we're going to pull in all of our data so copy each one and just paste it in so I'm going to hit enter I'm going to paste the next one that's our body I'm going to paste the button text well actually for the button link and button text you could even swap the order up to you but um because you see your prismic next link and then link is in the middle I'm going to do it just like that and then button text I'm going to paste that in the center of that so I'm going going to remove link from the middle there I'm going to paste that I'm going to remove those empty brackets and I'm going to hit save and it should format because we have prettier in this project and last but not least prismic next image I'm going to grab that and put that underneath prismic next link now it's saying hey neither of those are here quick fix go ahead and import those from your projects if you're not using quick fix or if Quick Fix isn't working for you here they are right here next image and next link come from the next project and prismac Rich text comes from prismic react alright so hit save and then back in our simulator we see that we have our image we have each aspect that we expected we expect this body text and then we have our little button that uh if we Mouse over it we see it is indeed a link and a a huge image that is definitely out of control but that's all right we don't have any Styles or anything on any any of these elements but we are pulling this in and if we were to go ahead and push this all to prismic uh this like our data is already piped into our component once again getting data from prismic is so easy thanks to slice machine we don't have to do anything we're just pulling the data off of our deconstructed slice and it tells us exactly where that data is it gives us the right components it makes building so so simple I'm not sure if you've used any other cms's but uh in my experience you pretty much have to start console logging and you'd be looking at the shape of the object and trying to figure out how to get at that data notice we haven't really had to console log anything yet and that's not because I'm so brilliant and I know everything it's because slice machine is handing it to us like this not saying we're not going to console log at all but this makes it a lot easier well that and typescript right now here's the thing um in our layout we got our text in and we just kind of said all right uh just show me the site title or I guess rather in in the in the header we just rendered the label without wrapping it in any kind of component right uh for our footer we just have site title right there it's just a string and it comes out now why do we have to wrap or or not wrap it past our body into this prismic Rich text component why can't we just do this like we're doing for our button text well it's because Rich Text can't come back as HTML it actually comes in as a Json object that you then need to parse in some kind of a way to render the jsx that is required somewhere on the wrong page looking at this so uh heading is going to come back as some Json from the prismic API and prismic Rich Text will then parse that and render our H1 for us so if you're using a rich text field you need to use prismic Rich text to render that field if you're using key text you can just go ahead and render that because that is just a string it's not complicated if we were to try to render heading it would yell at us for rendering a Json object all right and one last thing before we move on I just want to point out what comes in the template for each slice this data slice type and this data slice variation this doesn't actually affect anything but what it does do is when you're looking at your page I'm going to inspect and I see this section data slice type hero data slice type variation default that makes it a lot easier when you're trying to debug something or trying to figure out like all right what is this component it makes it much easier because it's not going to have any kind of signifier or any kind of like marker other than this so I recommend keeping that there just for yourself for later it's not going to change anything slice machine doesn't use that to do anything fancy but it's just a nice to have alright so just in this little part we looked at and we built our first slice so we matched the fields from figma or we we match the elements from figma to our Fields here we created those fields we then brought the data into our slice with these handy code Snippets and we rendered out our mock content in the slice simulator we're going to be using the simulator to style our slice it's going to make it things a lot easier so now that we're all set with that let's bring in some Styles all right so we just built out a very basic hero slice and there was one thing I kind of glossed over that I do want to touch on uh this automatically got built for us this export type hero props slice component props content hero slice so that is really nice because it tells typescript exactly what this slice takes so it knows what to expect and that's how it can kind of help us know what is on our objects right so slice primary heading it knows what it what it is it knows that it's there if we try to do something like for fur it's going to say whoa that's not there that's that's not a thing so it helps us not make a mistake so I do just want to point out uh I I am skimming over some of the typescript stuff and I don't mean to so just want to say that uh the props for hero here are auto-generated if you were to control click this hero slice thing it'll open up prismic types d dot TS and if we scroll to the top here we see code generated by slice machine right so this is automatically generated and as we change hero slice this will also change so it will update as we change the different fields on our slices and on our page types and our custom types so this is handled for us and we just get to import it and reference it as we build out our slices and as you can see it's saying this slice is of the type hero props or rather the props we get in are of that type all right so now that we have our slice we're going to go ahead and style our Fields using Tailwind then we're going to refactor two components in order to make our Styles more reusable so if you're not familiar with Tailwind you can head to the website tailwindcss.com the docs here are fantastic and you're definitely going to want to reference them uh maybe not throughout this course but if you continue to use Tailwind if you get stuck on anything or if you're just curious they are you know it it might seem like a lot but that's because there is a class for every single thing you can do in CSS just about um and it is it yeah so if you're not sure how to you know do text transform uppercase it's just a class uppercase if you're not sure how to do text transform capitalize it's just capitalized right so if you need to find anything uh there is probably a Tailwind class for it if you know CSS you'll pick up Tailwind pretty quickly I think all right now first we're going to style that heading let's check it out in figma we're going to be styling this I'm actually going to go to Dev mode and we see that we get our classes here and it kind of helps us start to style it we see has this certain color text align Center font family so on and so on you see our Styles there and we can head to our hero and see here's our heading now you might be tempted to just pass a class name on this and add your Styles but if we start to type that we see oh it doesn't actually have a it doesn't take a class name where if we do that on the next image there you go it takes a property class name so wait if we can't pass a class name to our Rich Text how do we style it well it's not how prismic rich text works because prismic Rich Text needs to be able to render so many different kinds of elements like you know headings and images and links and paragraphs and lists we can't just pass styles that apply to all of them we don't want to right like we we want to handle each of those in a separate way most likely we want to handle headings differently from order lists and images right so instead prismic Rich Tech expects us to provide a component's prop and if we start typing see it says components so yes it takes this components prop and that takes an object so uh I'm going to put an object so two sets of curly brackets and if I hit enter here and if I hit control space it gives me my option so what does what properties does the object for components take well these are kind of things that we might expect our headings one through six a hyperlink an image a list right all of these things that our content team could ostensibly use when they are using our prismic Rich text now for this particular prismic Rich Text we only need to handle the heading one so we'll click that heading one that's all this instance of of the rich text can return now this takes a function that will return some jsx so we're going to make an arrow function and just in case you're not sure uh the curly brackets there mean that there is not an implicit return so we'll have to use the return keyword but if we use just a paragraph or yeah just the curly braces right just yeah the parentheses that's what I'm looking for all right but if if we use just the parentheses it's it's called an implicit return and whatever is inside here will be returned all right now for the props we're going to want to destructure children off of these props and we are going to just want to make an H1 here oh it's not taking that let's go H1 and then we're going to put children inside there all right so if if what comes back from prismic is a heading one we're going to pass in the children and render them inside of an H1 element we can put anything we want here so if you weren't using Tailwind but you're you're using chakra UI or something like that this can be literally anything that you want it to be in fact I'll uh testing I'll make this a testing element all right it's it's going to yell at me because that's not that's not a real element sure that's that's fair so I'll put I'll make this in H5 right that's the wrong element that's not what we're actually looking for but I just want to show you and you don't have to follow along with this part I just want to show you what we get back here is uh what we're rendering there so see we have an H5 when it's passing children inside that so whatever we do to this element that we're returning that will affect anything coming back from prismic so we're making an H1 and we're going to add a class name to it and we're going to make that let's say text 7xl nice and big and let's see do we trying to get back to the slice simulator do we see that change did I save it I thought I did text 7xl this is my text what did I do wrong where did I go wrong text 7 Excel so that should be pretty big let's see if refreshing this simulator does anything ah okay so it's not working and here is why because so so as a debugging step right you if if Tailwind isn't working for um some reason one way to debug it is to go to the Tailwind config and make sure the component that you are writing your Styles in is within this content array this is where Tailwind checks to see are there any Tailwind classes that we need to add if not it doesn't make it into the bundle so it's not going to show up as a style you can see here we have pages that will reference the old Pages router we we don't really need that but it doesn't hurt to keep it we have components and we are using that but you'll notice that slices is in a different folder so we're going to copy this components line make a copy of it and I'm going to put slices and this should fix what we have going on let's go ahead and save that let's see there it is all right so that's what it is um we weren't doing anything wrong in writing our Tailwind but Tailwind didn't know to go and look in the slices folder I don't think that's I I don't think we need anything else but if we do if uh you know Tailwind isn't working for some reason in the future come back here and make sure that where you're putting your component is in your content array great now that that's set we have have our heading amazing so once again anytime that the content that returns from prismic on on this heading object comes back as a heading 1 it's going to run this function and return what that function returns it's going to render out what that is sometimes you're going to have you know maybe heading one heading to you're going to have multiple things on this components object right now we just have the one so now that we know how to style with prismic Rich text let's finish this heading uh I'm going to close this I didn't mean to make that little error there we go so I'm going to leave that text 7xl for a second I'm going to say font hyphen bold I'm going to say leading oh with one day tight and if we hover over that it'll show us that it that um handles the the line height or the or the space vertically between our lines so we want a tight leading at 1.25 tracking tight and that is the letter spacing so that's uh you know on the x-axis between each letter we're going to bring that in a little bit font display and if you remember that's our font nunito that's the rounded one and we're going to go with text to slate 700 and that is like if we come here I don't think I can make this any bigger I would if I could but I can only zoom in here but in your figma file you can see we have slate 700 and that's what we're going to be using so we have text slate 700 and last but not least we're going to make this a little bit responsive so in Tailwind the way we do responsive Styles and we'll bring up the Tailwind docks I think it's right at the top here responsive design we have this prefix that we get to use so that everything defaults in Tailwind to Mobile so you have to think mobile first and everything above mobile you can kind of opt into so if we want everything from 768 pixels and above to be a certain way we would say uh you know like MD and then with 32 or MD text red and then it would only be red on medium screens and above so that's how that works and they have some great demos on the site so you can go ahead and look and say ah okay I see what's going on this is an actual demo that matches with this content so what we would like is we would like for on medium screens and above it's going to be this text 7xl but I'll show you in the simulator if we make this like if we go to mobile that's pretty big especially if I'm going to bring in what what flow rise actually has in their design I can go ahead and do that now productivity that flows with your life like that's that's so big right uh and I didn't save my my edits so that's why we're not seeing the the right font so man that is real big uh that looks great on desktop sure but on mobile we're going to want a smaller size so we're going to say how about on medium screens and above we do text 7xl but on small screens so just you know everything under medium we're going to do text 5xl just like that and the Order of these doesn't really matter but now you can see that on mobile it gets a lot more reasonable right like this isn't so bad all right that heading is in a pretty good place now we're going to do the same two hour body text so if we head back to our uh hero component we have our body text here we're going to do the same thing so component sorry components pass that an object open up that object and this time we're going to type paragraph and see we start to type in it says is that real one and it is it is what we want so uh before we get into that I do just want to show you real quick that in the prismic docs we have handy little places that you can go and kind of get this information if you forget about it so if you're using custom react components this is the part that you want to grab you see heading one you see paragraph in case you forget this syntax that it's an arrow function that goes into you know the jsx that you want to return it's it's all here in the uh it's all here in the prismic documentation so just want to point that out to you in case you're you're trying to find it later all right so let's get to it I'm gonna make another arrow function um in there I'm going to pull off children I'm going to make that Arrow and we are going to return a paragraph or I guess a paragraph element so I'm going to put angle brackets and there we go so in there I'm going to put children just like that and the real key here is that we're going to be styling it with the class name on this paragraph element so class name equals uh let's go ahead and just add a um just just one thing super quick to let us know that it's working so text LG let's go ahead and change the size like we did for the The Heading itself uh it's a little bit bigger right let's just let's just go text Excel I'm going to change that there we go it's a little bit bigger we we see that change uh taking effect it is working for us all right so now that we saw that it worked we're actually going to get the the real styles for this so we're going to go and inspect and we're going to see ah we see that font size is actually 1.5 Rems so we can go ahead and remove text LG text hyphen and we're going to want to find the one that is 1.5 REM so you can use the arrow keys and see add is text 2XL that is 1.5 Rems right there so I'm going to choose that hit save and there we go we're seeing that it's taking the right size you can also see that it is nunito Sans so we can set it to the body and also uh sorry the the body font and we can see that font weight is 400 and we also have a bit more line height than we might be used to and our text align Center so let's add those real quick so let's start with text line sentences I just said that text Center all right uh we had what was it uh font weight or yeah so font and uh it's it's like you don't you don't type font weight but it's font thin font extra light you go through and it's font normal that we're looking for what else do we have in figma we also had a line height of 2.5 REM so once again that is leading it's an old typography term so looking for 2.5 Ram letting 10 will work for us and last but not least we want font body and that is nunito Sans perfect I just want to check that yep that looks good we're also going to add a little bit of margin and we're going to add the text color as well so we're going to go text slate 600 we're going to add some margin below and above I'm going to use some responsive Styles here so MB mb4 on small screens that's margin bottom four so anytime you see an m with Tailwind that's going to be margin so margin bottom one rem or 16 pixels and then on medium screens and above we're going to go mb8 so I'm going to save that let's see what we've got looking pretty good right I mean come on that's a that's spot on I'm going to copy the text from here I'm going to put it in our MOX here and uh oh we see a problem what's our problem that looks good that looks not good so we need to add a Max width onto our element so I'm going to go back and I'm going to say uh I can put it at the end Max W for width and we're going to go to medium 448 pixels or 28 Rems that's perfect now we will fix the placement in in a little bit don't worry about that we're gonna be using some CSS grid but right now that is that that looks good that's what we want now all of this might seem like a lot of extra steps especially with the components like this feels like a lot of boilerplate right uh like why can't we just pass this class name this is a bunch of extra code don't worry we're going to refactor this in a little bit it's going to be a lot easier going forward we're doing a lot more work right now but we will refactor and creating headings and uh text and other things in in the future will be a lot easier I promise all right now let's style our button because prismic next link is always going to return in Anchor tag or or in in a element let's call this anchor tags I meant to say an a element we can go ahead and style that in the usual way so this also takes a class name right on there because there's just that one element that it has to return right so that's the difference so for this we're going to go through a few Styles uh I'm just going to kind of read these off to you and we're going to put them in together rather than kind of going back and forth from figma the whole time but it is Handy to come back and inspect and see what we've got going on if you ever need to double check or if you just want to get familiar the new figma depth mode is really really handy so we're going to first uh set it to display block just by typing block W is fit that's with fit content so that's going to shrink it down to the text that's inside of it our BG our background is going to be cyan that's going to be one of the two colors that we use a lot in this project so I'm going to say cyan hyphen 700 on Hover we want this button to to change colors a little bit so we're going to say hover colon BG cyan and then 800 transition colors and what this does is this sets it so that anytime a color changes we're going to animate that a little bit for a bit of a smoother transition that it just it's not just snapping we're going to set that duration to 200. we're going to ease in and out of that animation we're going to have padding on the y-axis of 0.7 REM so it's py3 gonna go PX 12 rounded faux font display text white font bold text is going to be the base size so that is a lot of classes that we just added but the nice thing is we're rolling enough to do that one time we see that ah it looks pretty good it's telling us to get better we'll we'll work on it I'm going to change that text to try it for free or try for free however you want to put it so that looks pretty darn good that matches pretty well I think I think we're just missing some letter spacing actually let's see ladder spacing yeah let's get a little bit of letter spacing so that is what tracking right yep so you want tracking um we want to go at least normal maybe tracking wide let's see how that looks that's better that looks more like our button right maybe a little bit more wider is the next one up cool Perfect all right we we even improved upon it nicely done all right next we're going to do the same thing with the image we're going to style that uh here we have a few things we have a shadow and yeah that's kind of it we we want to set a Max width so maybe we can get something in the ballpark of 60 REM uh but for the most part we just want to add the shadow to this element so let's do that if we head to our code we see prismic next image like I said this also takes a class name oh didn't mean to do that class name and for this we want to do rounded oh uh no no sorry we're not going to run it we're going to do a drop shadow drop shadow and if I see which drop Shadows we have available there are some that are smaller we're going to go for the XL one honestly it's like you know kind of personal preference or it might be close to what your designer has uh put there and we we can't really see it yet I'm going to close the editor right now we can't really see the effects because it's going all the way to the edge so there's no Shadow to show but if we add a Max width to this element it'll work a lot better so max W 4 XL and uh that's going to be as as wide as it can possibly go but other than that we want the width actually be just 100 so w full all right so we have it seems like there's a shadow there I can't totally tell but I think it'll be a little bit better once we are um once we are on the actual site and working with it all right now each individual part is looking good but we can agree that the layout stinks right so on wide screens we want our content centered and on smaller screens we want to have some padding let's show uh mobile once I'm padding between like the edge and our butt we don't want it right up against the edge like that so let's add some styles to our section element to make that happen let's go up to our section right here and we're going to go ahead and say class name I'm going to say PX remember P is for padding PX4 so that's going to be padding on the x-axis py10 so that's padding on the y-axis or up and down and then on medium devices and larger so MD colon py14 MD colon p x 6 and on large devices and above we want the padding to be much larger so py 16. so if we do that ah now we see that we've got some padding on our Slice on both sides here it looks pretty nice and then on desktop it is a little bit bigger padding off the side it's it's it's looking a little bit better already right adding some padding always a good call now let's add a wrapper div just inside our section so inside the section to wrap around everything inside there I'm just going to create a div and I'm going to move this part all the way down to the bottom so you should have section div and then all of our prismic stuff and then div section all right that's how yours should be set up and inside there we're going to add another class name I'm going to make that MX Auto and what that means is margin left and margin right are both set to Auto so it'll Center whatever is inside uh with or or Center itself depending on you know the parent element it can be width full so that's with 100 and then Max width 6xl which is a hundred yeah sorry 1152 pixels so I hit save there and okay hmm doesn't seem to be all right it doesn't seem to be centering everything but that's because if we actually I'm going to give it a quick border right so if I go into this inner div here let's say border I'm going to save that and it's just going to give us a little line and if we see that little line it it might be tough on my screen to see but if you look at yours you'll see actually this looks pretty good uh it's nice and centered if we go even wider so we can change the width here to like 1500 uh we see that ah it is still Centered for sure we have some padding above and below the only thing that we don't have is that our inner content isn't centered the rest is looking pretty good even if we go to like mobile that looks pretty nice we just need to Center everything inside so to Center everything we're going to add one last div I know this might seem like a little bit of div overload it'll make sense later just trust me I know we we could style it here but we're we're going to style it with this one additional div because we're refactoring later so stick with me just through one more uh I'm going to create a div and I'm going to once again wrap all of our prismac content so we'll have section div and then div section all right stay with me class name and we're going to put and here we're going to put grid grid calls and that's grid columns right this is all shorthand grid columns one so we just have one grid column we want to place up items Center and we want to do text Center so if we save that we should come back and oh oh this is looking a little bit different now very nice so productivity that flows with your life this is looking pretty good we have a little bit of a spacing issue here we'll take care of that but this is already looking a lot better don't forget to remove your border from there but yeah this is looking pretty good we've centered everything we've added this text Center which goes down to our component right here and we have Place item center that is a nice little grid trick to get everything centered and we just have the one column it's a nice nice solid slice all right last thing for the Styles here as I said we need to style that button a little bit more uh where's our button press the next link we're just going to add some margin bottom here so mb8 on small screens and then on medium screens and above we want m b 10. see how that looks there we go that looks fantastic and it looks a whole heck of a lot like what we've got going on here we could probably make the margin a bit bigger between the button and and down there but for right now we're going to hang on to that and that looks really good all right this is our first slice but we've already learned how to style with uh prismic Rich Text prismic next link and yeah we are a slice styling experts just within that one but here's the thing I already know that we're going to want to reuse some of this code for other slices I want all of the slices centered and aligned with each other so I really want to reuse those slices see how the designer has it so that uh these elements are lining up along the sides there you want to make sure that that all aligns as you go down the page maybe that one's not maybe I can fix that that might just be a me thing but uh in our code it's definitely going to be so we want to make sure we reuse this code and this code we also don't want to uh have to put hey we want to use the font display for our heading every time right like some of these heading Styles will change but most of them are going to stay the same that's just the style for our headings and a lot of our body text will stay the same too so there are a few things here that we could copy and paste them between our slices but that's going to leave us with a lot of markup like we're seeing here we have a lot of these functions in the middle of our jsx and it gets kind of messy and also we have to keep re using this and if you ever want to change it it just gets it gets sloppy it's hard to manage right because like let's be honest this prismac Rich Text for our heading this is one two three four five six seven eight nine ten eleven lines of code I just don't want to have to have that in my jsx I like keeping that a bit tidier if possible so let's refactor these and this is where that clsx package is really going to come in handy for us so we're going to make some more components and starting at the top we're going to refactor uh the wrapper dibs essentially we're going to refactor this section so go ahead in your components folder and create a new file called bounded b-o-u-n-d-e-d dot TSX hit enter and we're going to go and create our function bounded we call it bounded because this component creates the outer bounds of our for our slices so anything inside of this function or in inside of this component is going to be bounded by Nature right we're going to create our function so export default function bounded parentheses open those brackets return parentheses there we go so we are going to be taking props here that's pretty important for boundary because it needs to you know return children and a few other things so we are going to allow for an override for the parent element with the prop as we'll see that more in a second we'll also pull off class name uh children I forgot to put a comma there and we're just gonna let if if there are any other props that are passed in there we're just going to catch them on this one variable called rest props you can call that whatever you want but just the the rest of the props right and now here's the thing because we're using typescript this is the first time we're really going to have to write our own types because we are creating this component so at the top here go ahead and type the word type we are creating a type called bounded props and that is going to be equal to an object just open that and we're going to type as with a question mark to say that it is optional we did you know the the uh let's say as with a question mark to say that it is optional we don't have to get this as a prop and so it's not going to yell at you if you don't pass this so but this is going to be a react dot element type and if we look at that put a semicolon at the end if you look at that we can see that that is pretty much any HTML object so a whole bunch of element types or I guess I should say a jss jsx object but pretty much everything in there is an element type that will yell at you if you uh try to pass it something that isn't a typical HTML element right then we want class name and that is a is also optional so put a question mark and then colon and then string it's just a generic string could be anything there and then children and we're going to type this and and notice we don't make that optional we need children type that as a react dot react node all right now we can come down here to the end of where we are destructuring our props put a colon here I want to say bounded props so we've now typed these props with this type that we created nicely done so for this as this is going to be like what are we importing this at or what are we rendering this component as we're going to set this to comp so Capital comp and then we are going to set a default so in case there's nothing passed in we want it to be a default of section and we can close it so inside we are going to add our comp let's open that up comp and we can close that open that up I'm going to put a div inside here for a little bit more styling because if you remember we we have those that nested div inside the section so we're going to put our our div here actually I'm just going to copy it from our hero here it is this is what we want this one with MX Auto W full Max w6l copy that bring that over here it should auto complete the div but if it doesn't you go ahead and do that and then inside that div we want our children and we're also going to copy off the class from right here so we're going to off off of this section grab that class name I'm gonna I'm just going to cut it out and we can go ahead and paste it on our comp the other thing we need to add to our comp is to spread these rest props and if we don't do that we won't pass this data slice type through because it's going to say that it's it's not expecting that right so we're going to go ahead and make some curly brackets and type dot rest props that will spread it in this component for us so this looks really good we're going to go ahead ahead and hit save um oh the only thing we need to do is we need to allow for uh this class name right now we are just uh using this only it um you won't be able to add anything to this component's styles with the way it's written right now but by allowing users to pass in class name or I guess not by users but you right as as we're making this uh we can use that clsx function to combine the string of classes that we have here with whatever is passed in so we're going to go ahead and do that import CLS X from clsx we're going to come down here to class name we're going to put some curly brackets around our string just like that and then at the beginning we're going to call the function clsx open those parentheses at the end of the quote we're going to put a comma I'm going to type class name and then close that parenthesis and it all should be good I'm going to put that on a new line and hit save and so now if they pass in any kind of a string here it'll get merged in with the rest of our Styles and yeah this allows for easy customization that way so all we have to do back here is get rid of this outermost div right so we can keep the section for now get rid of that div keep this one with a grid we have to remove one of these divs from down here I'm going to get rid of that and now we need to import bounded into this file so I'm going to say import bounded from at slash components slash bounded and I'm just going to copy and change section to bounded we don't need to make any other changes there to make sure it updates here too so that you don't have a section anymore you just have bounded and remember it defaults to a section if you wanted to change it in any way you could say as and then change that to I don't know like it it gives us all of the options available to us if you wanted an article you can change it to an article and it would render a stack but we want it to be a section and so we're going to hit save and now if we go back to simulator we shouldn't see any changes and that's that's that's exactly what what we're hoping for right it still looks good um if you inspect that which we can do you'll see that we have a section it still passes through the data slice type hero and all that information so it's so easy to debug and it has our styles with it and these two will help to Center all our content help to keep them all in line so now all we have to do is just type bounded and import that component and it's going to keep our whole project nice and tidy we're going to use it on our header and footer elements it's a very handy component to have around so nicely done on that refactor all right we are not done refactoring yet now let's refactor this button so we have prismic next link right here we are going to want to use this button in a few places you can check the figment design and see you know it shows up a bunch so let's refactor it into its own component it's essentially going to be like a pre-styled prismic next link so let's go ahead and create a new component I'm just copying this first and then components new file save button dot TSX and I'm going to create the function export default function button just like that and I'm going to return that's going to put what I copied and pasted or yeah what I copied I'm going to paste it right there so so once again we're going to pull in clsx from CLS X because we want to do the same sort of thing we want to allow for any kind of overrides in fact this margin bottom is going to be removed from here and we can add it back later on the actual button component that that we uh yeah we'll we'll pass that in because we don't want margin bottom on every single button so that's something that we can add in a little bit but first we want to handle our props and we're going to deconstruct those props so we're going to take class name off of that and we're also going to take rest props now why are we stopping so quickly to just take rest props and there's so many things that we could potentially take including like the slice and everything else right well we well we are using rest props to accept any props that prismic next link supports so for example we could pass a Target prop without needing to explicitly add Target equals Target when we uh render the button out so here's what we're going to do we're going to import some types from prismic i o next the package that that we we've been using so import curly brackets because these are named exports say prismic next link and that'll get that to stop yelling at us but we also want to import a type so prismic next link props perfect so now if we use this type right here and at the end of our destructuring here we type colon and paste that in now we see that ah okay we are saying hey whatever prismic next link can take we want to also be able to take that on button so now instead of field equals slice primary button link we are actually uh going to remove both of these we're going to close this so that it is it doesn't have anything inside we're going to remove that and it's going to be a self-closing component and we're just going to spread rest props here I'll do it after the class name curly bracket.rest props caps locks and I'm going to hit save now if we go back to our hero component we still have our prismic next link here we're not going to wipe out everything because we're actually passing two things to particular next link that we still want to keep there right we are only really handling class name and we'll we'll handle that a bit better with clsx in just a second but that's the only thing that that isn't going to get passed through field will get passed through because it's part of rest prop so that'll get added to prismic next link there and the children also will too so if we change this to button and we import it from components button then field will get passed children will will get passed in the normal way and we can remove everything from this except for the margin bottom Styles those will not get passed through just yet but everything else if we go back should be working yeah and see we just lost our margin bottom again but we know why we're about to fix it but the rest is coming from our refactored button component so now the same way that we had to do with bounded where we called clsx as a function we uh combined our baked in styles with whatever stylus are passed in we're going to do the same thing with button so I'm going to wrap the whole thing in a curly bracket CLS x parentheses and at the end I'm going to say comma class name and close parenthesis there you go key a key uh character there so now let's see we got it back we got our margin bottom back and that's exactly what we're looking for perfect and now as I was saying if we try to pass something on button that prismaconnect link doesn't take so let's just try to say uh you know Sports it's like what you can't pass that dude that's not a thing but if we try to pass Target yep it takes Target so that button is a wonderful one dollar wonderful wonderful little refactor for us and it works pretty similarly to how we expect and look how much tidier look that oh like just visually compared to what we had there this gets tucked away and now look at our jsx already getting so much better here we have a nice bounded section here and we have our button this is wonderful and enter so next we are going to refactor some of our Rich Text Fields now we see that we have a components object we're passing here and a components object we're passing here and each of these are pulling different properties off of that so why don't we combine this into one components object that we reference at the top so that's what we're going to do so scroll to the top of your component let me go just below the props for hero I'm going to hit enter here or you know what I'll put it above that that makes sense it doesn't matter where you put it but we're going to say const components and we're going to type this so type colon and then we're going to call jsx map serializer and we can see here that we have we can see right here that we have an Auto Import from prismic IO react so we can import that and we see that we have this type that has heading 1 heading 2 and so on so that's what we want so jsx is jsx map serializer equals object so we are declaring this components object we're typing it with jsx map serializer and we're going to add in here our um our properties from down here so come on down and we're going to cut out heading 1 here I'm going to cut it down two there and I'm going to come up here to my jsx map serializer and paste it just like that I'm going to do the same thing for our paragraph out of components so cut and I'm going to come up to here hit enter and paste it in so now we should have uh two properties inside our components object now I'm going to change this so it says components equals components and I'm going to do the same thing here components equals components I'm going to hit save and we can go over and see that nothing changed and once again that's refactoring right like we don't want any change but like look at how much tidy our our jsx is we can see it all within one window this is getting better and better so this already looks fantastic but there is one last layer of refactoring I want to do and I promise that all of this work will be worth it you might not see the the benefits just yet but as we make the rest of our slices it's going to be so much easier so we're going to refactor uh our heading here into an actual heading component and it's going to make so much of our CSS going forward easier let's build it first we can explain the benefits that we're going to get so components I'm going to say new file I'm going to say heading dot TSX we've done this a few times now you can go ahead and do it yourself if you like export default function heading and and we're going to destructure the props and just like we had in bounded where we had as comp section we can actually copy this out if you would like um yeah let's grab class name and children as well we don't need rest props for this one but yeah if you want to copy some code from your bounded component that works great so as comp but instead we're going to default to an H1 you could default to an H2 that might might make more sense actually but uh we'll just keep it as an H1 for now we are also going to need one more prop here we're going to say size and this is going to default to LG so we have export default function heading we have our as we have class name we have children and we have size is equal to LG LG is just going to be the the default same with H1 now we want to type this so create a little space and say type heading props equals and open up some curly braces we want to type that as first and that's going to be optional and that is going to be uh you know we're going to basically allow either an H1 and this is how we allow multiple strings on a type right so we are creating a union so this can either be an H1 an H2 and just to use that pipe operator uh H3 and so on so you kind of get it right I'm going to go up to H6 all right and next uh okay so so actually before we go on so this show says that as can be anything as long or or it can be one of these it it can't be anything if they pass as it is optional so it can be undefined but if it's uh if it's defined we have to pass a string that matches one of these exactly all right next size same kind of thing it's optional and we're going to have a bunch of strings as a union measuring a copy just for the sake of faster typing I'm going to copy this off and I'm going to change the H1 to XL LG MD and sm all right gonna semicolon at the end children react dot react node so that is how you pretty much type children every time when you're writing a react and then class name that's optional and that is a string so just notice that we only made children the mandatory one so if someone calls heading and they don't pass in some children we are going to throw an error so now we want to come down here take heading props and we want to type our props as heading props just like that and now typescript knows what these are it's still going to be a little frustrated that we're not using them but at least it knows what children and everything else is just like in our bounded component we want to return comp and so here we're going to say return parentheses angle bracket comp and in the middle here we're going to return children all right now we're going to be handling these Styles because our H1 and our H2 and our H3 should all be styled slightly differently and we can use this size prop to help with the size so let's go grab our heading styles that we have I'm going to grab this whole class name here we're not going to use all of these across all of our heading Styles but we're going to use most of these Styles right so I'm going to say comp class name equals we're going to put the curly brackets around because you know we are using clsx import CLS X from CLS X so now we're going to call that function clsx parentheses I'm going to wrap that in our parentheses just like that now here's the thing we want to handle these sizes differently so if we get a certain prop for size we want to return different text sizes based on what we get there so one more great thing about clsx is that it allows us to do some logic in here so we're going to say size equals a triple equals XL so if size is equal to XL we're going to say end and text hyphen 5 XL MD colon text hyphen 7xl so that's basically what we have here so I'm going to remove that bit and keep the rest now we need to do that for each of the other sizes so if size is equal to let's go LG and and text is for Excel nmd will go text 5 XL so we see this working we're adding this logic in and this will combine our style so size equals sorry triple equals MD and and text 3 XL MD text for Excel and last but not least size triple equals SM and and text 2XL MD text 3 XL so we've covered each of our possible sizes that get passed in just notice that we aren't basing it off of the component itself this allows for some more flexibility so you can have H2S on a page that are styled slightly differently that's really handy to have sometimes you can get kind of stuck with some systems that force you into using like an H3 when it shouldn't be an H3 so just want to say uh don't simplify this it's good that the style and the semantics are separate now at the very end we want to still be able to override this heading with a little bit of our own Styles if need be like some margin or something so just put class name at the end and now these Styles will always be there we will always have font bold letting tight tracking tight Etc this is logic that will be run so these uh you know one of these four will run by default it's going to be this one the the large one and then if we pass in any class uh any more styles that that will be added and we'll have one big string so that is all we need for this heading component go ahead and save that and we are and we are going to go back to our hero slice and come down to this H1 and we're just going to swap this out so instead of using an H1 here we're going to say heading let me see if we can import it from components heading gets added to our list and then we want to say as it it will default to H1 but let's be as specific as possible and then size we're using NC it gives us these options that's why typing is so great because Excel so if you go extra right it says whoa whoa that's not a thing that's that's not a thing that you can do so it makes everything much much easier as we're building out our components save that and once again we should see no change and we don't see any change now last but not least we can go ahead and remove this class name because I was probably getting added on there twice and there it is we have a much much tidier heading here that's really nice uh now actually let's add a couple Styles here class name let's go ahead and add uh some margin because I don't think we have that on here yeah we don't have any spacing so on this heading let's go ahead and add uh MD MB 8. so on medium screens and above we're doing a margin bottom eight margin bottom four on small screens margin top 12 and if this is the first item I'll talk about this in in a second but we want to handle first and last items in in a group so first colon Mt 0 and last mb0 so let's look at what these styles do if this is the first child we want to remove the margin top and if this is the last child we want to remove the margin bottom that allows us to add some margin both top and bottom that if it's next to something it will have a little bit of space it's it's not going to bump up against that but if it's the very first thing we don't want a big gap between it and whatever is below so see how it is the first item so we don't we we don't have any margin top but it is not the last item so this doesn't trigger and we don't have any and and we do have margin bottom so nice little style here go ahead and add that to your heading and that's all we had to add is just um some styles that are specific to to this use of that heading everything else is abstracted out and it's going to make every slice faster from now on all right we have done a whole lot uh we created a hero slice and we refactored it and styled it and everything this is a big big section but let's go ahead and commit it uh this might not be the most Atomic tidy commit but oh well so I'm going to say feet uh create hero slice and helper components cool and hit commit oh and I forgot to Stage everything so go ahead and Stage those and yeah we're going to hit commit awesome job next let's learn how to use this slice by shipping it to prismic all right now that we have our slice styled and saved we're just about ready to push it to prismic but we first want to get an image for each of our slices from figma so if you noticed here we have a uh you have no screenshot yet kind of message and we want to get a screen screenshot for the component so that our content team knows what slice they are choosing so let's go ahead and grab a snapshot for our hero we're going to go to slices and we see our hero right here this is the hero that we are focusing on first so I'm going to go ahead and I'm going to hold alt and I'm going to drag a version off of it now with this version we are using an instance of the figma component this is really nice because if I change something here if I you know add my exclamation marks it'll update across all of the other instances so that's really nice if you want to change it in one place and have it update everywhere I don't want that so I'm hitting Ctrl Z to go back but because this is an instance of my component if I change this it only changes this one instance so I'm undoing those uh exclamation marks again but I'm going to select this instance once again I hold alt click and drag off or if you want you can go to assets and you should see uh local components you should see a few things here under slices we can go call to action features hero that's the one we want and we have two options hero or hero mobile we're going to grab hero and I'm going to drag that out so how however you want to get it you can create an instance of the hero in any way that that you would like what I'm going to do is I'm going to click fill because right now it is clear in the background that way we can use it on our website and we get that cool gradient in the background but right now I need just to give it a background because I don't want to upload a transparent PNG it it might look weird right so Phil I'm just going to click the the word fill it should give us a default white and that's good enough for me I don't need it any more detailed than that you could give it a little light green but we're not going to come down to export open that up the default these are fine it's going to export at the size it is as a PNG just click export hero and I'm just going to save it in my pictures folder as hero great now back in slice machine I'm going to click here and say update screenshot and I'm going to select file and choose hero it uploads that I'm going to click upload nope that's not what I meant to do uh and then that should just be good we can click the X and don't need to save it or anything go to our changes we see now we have a little screenshot there we have our hero we still haven't push this to prismic but we have modified our home page wait a minute why did we modify our home page here's why because we have the ability to say what slices get added to which page now we didn't add it manually but because we clicked the new slice button within our home page slice machine went ahead and said all right well you clearly wanted to add this to this page type we can remove it if we wanted if if we didn't want this hero to show up on the home page if you didn't want it as an option we can remove it but obviously we do want it as an option and so we're going to leave that checked and we don't have to have to save because that's already done so we are creating this slice within prismic and we're also saying hey you can use this Slice on the home page so go ahead and push our changes and uh I'm putting that out mainly because if you've pushed a slice and you don't see it where you're expecting to see it that might be why so now we've uh pushed our slices and our types so we can go over to our dashboard I'm going to refresh this page I'm on the homepage already but we don't have a slice yet until now and now we do we see hero there it is right there I'm going to click it I'm going to I'm going to choose that slice and let's go ahead and grab some content from figma that's another great great part about figma I I can delete that component right now uh other great part about figma is it kind of uh holds our content for us so I'm going to click that element if you hold Ctrl click it helps you like dig into the element that you're clicking on or command click if you're on a Mac because if I click once it chooses the hero itself if I double click it drills in but if I start out here and I hold Ctrl or command it lets me click on the actual element that like my mouse is over so go ahead and click on the heading hit Ctrl C and then I'm going to paste it there and Yeah we actually do want to have this like line break here just for the the way that it's styled great I'm going to go to the body going to copy that I'm just tabbing back and forth quickly not explaining too much here because it's just content copying for button link for the sake of this course we're not going to do like a whole sign up thing because that might be like part of your app or it might be like HubSpot or something right so like that's outside of the purview of this course but I'm just gonna you know do the thing I've been doing prismic Dot IO link to that page perfect and for image I need to export this image luckily it's over in our assets let me find it it's right here so if you need any of the images that we're using we have them here uh we've got you know some icons here that we will use later the logos here we'll grab that in a little bit but we're going to grab this app screenshot and I'm going to do the same thing I'm going to click export it's just called image one but I'll I'll rename it as I export it I'll say uh the app screenshot sure it doesn't really matter but I'm going to go ahead and click in and upload that app screenshot that we just exported from figma and I'm going to choose that and then for alt text I'll say the flow rise dashboard all right uh that looks good to me let's go ahead and click save and publish so if you head to the flow rise home page I'm gonna get rid of this and if we hit refresh we should see it load in just like that so yeah that's exactly what what we are expecting I have I have nothing more to say but yeah it is automatically coming in because we've added that slice to our home page and then that home page uh has that slice filled in with content right there and it's it's happening exactly how we would think and that alt text should be on this image Let's see we have where is it oh at the beginning there we go Flo Rida's dashboard and prismic next image brings with it a few benefits in that it wraps around next image which is really powerful and it does things like loading lazy and uh just makes a couple sizes of our component for us sorry of our image for us uh here's a source set that it created for us and yeah it just makes our performance much better as we are using images in our site so congratulations you have your first slice showing up on your website we are in a really good space let's just go ahead it's a really tiny change but let's go ahead and say uh uh feet add snapshot to Hero slice awesome all right now that we have our hero we want to make a variation of this same component prismix variation feature makes it easy for marketers to select a different style of the same slice if we look at our figma file let's go there we'll see that here in slices we have this other version it has this variation right so it has two that's the main one for like the home page and then this is a second hero variation that we want to give as an option it's still technically a hero slice at least in the way that we will be using it so we can make things easier for ourselves and our content team by creating a variation of the hero slice rather than a whole other slice and there's a few reasons why so to get started let's head back to slice machine and let's open our hero slice here it is and we can see here that this is the default variation and every slice has a default variation most slices you'll create will probably just have of one variation but you can have as many as you want all right so I'm going to click add new variation and it asks us for a variation name we can go ahead with you know horizontal so because the items Stack Up horizontally rather than vertically up to you whichever you think will be most descriptive for your team so I'm going to hit submit and oh I skipped over a thing there on the 206 click add again it says duplicate from so if we had multiple variations a second ago we can decide if we want to duplicate from um if we want to duplicate the fields from a certain variation because you might be able to see that the fields carried over so we still have our heading we still have our body we don't have to rebuild those it duplicates those fields over and that brings with it some extra benefits if we have a hero in our page builder like this if at any point they want to switch over to the horizontal variation they don't have to re-enter any fields that stayed the same so if we bring our heading over which we will we we won't have to swap out that content I'll show you what I mean in a little bit But A variation doesn't have to share all the fields or any Fields or it can have more Fields than its other variation so if this variation needed a second image I can go ahead in here and add a second image of Double Image right I could totally do that for variations we'll use them when something is similar enough but uh it doesn't have to match identically you can have some differences there so I'm going to delete that Double Image field just want to show you that we can we can do it and our default wouldn't change at all but for horizontal let's go ahead and keep it as is because these are the fields as as we look at figma we have a heading we have a body we have a button and we have an image just like our other hero so make sure you click save to file system and now we can head over to our code we see that our our types were rebuilt we have some changes within our Mox and our model don't worry about those files those get handled automatically for us but just want to point out that things have happened uh in slices let's go to our hero again so inside our hero you might remember this data slice variation this is uh handy because it kind of shows us where we can get the information for variation we also have it here variation ID horizontal but if we look at this we see that there are two options for this now we have either default or horizontal so the types have already been updated we already know that this can only either be default or horizontal so let's test this in our jsx go ahead right after this div curly brackets slice dot variation equals sorry triple equals and then look as we go to type a string it says all right it's either default or horizontal so we go great horizontal and double and parentheses let's do a paragraph and this is the horizontal slice or I'll say variation so that's the correct term so now if we head to our slice Simulator for the hero we see we don't see that and that's because up here you can see that we are on the default and uh slice simulator doesn't seem to know about our new variation let's refresh slice simulator and now it knows about it says all right oh I think we might have forgotten to save our mock content or it might have gotten overwritten not sure but if you go from default to horizontal this is the horizontal variation right so that shows up when it is horizontal this is default horizontal no other changes have happened yet because we didn't code them to this is all it's all we change so we can change as much as we want or as little as we want and it's completely up to you prismic is just going to pass you a different string for this property that's it we can do something small like making you know some text render or a CSS class change or we can make an entirely different component render it's totally up to you up to what you need so now that we see how it works let's build the variation for real because this is a pretty pretty big change to the layout I'm going to render a different group of elements for the two variations there's just a lot that's going to change and it'll it'll make a little more sense once we are done so I'm going to move our little conditional statement that we've got I'm going to move this outside of the main markup I'm going to copy paste the current hero inside of it so I'm putting this above bounded and for that we're going to have to use a fragment it's just an empty angle bracket it's going to Auto close it for me I'm going to bring this other bit to the bottom so outside of bounded we want to have slice that variation equals horizontal and and and then we want to close that at the end of bounded so not sure if you saw me copy paste that but yeah going to move that bit down here so instead of just returning a paragraph We are going to wrap the entirety of this in a conditional so if we go to size simulator we see it for horizontal but we don't see anything for default because this returns false now now I'm going to basically copy this entire thing and make a second version I'm going to put it above because default being first makes a lot more sense and save and so now we have the same basically the same markup returning uh whether or not the variation is default or if it's horizontal but we just have this code now to work with so we're not going to have to touch the default but we will have to style the horizontal version so to start we're going to shift the way that our grid Works we're going to add in here MD grid calls two just like that and that way on screens medium and larger it's going to be a two column layout we can hit save you can see the results let's go ahead and open horizontal we see that all right that's that's kind of working right like it's it's going uh into two columns but it's not yet what we want for one thing with our two columns we don't want everything kind of loose the way it is right now so this these four elements are all Loose by themselves we want to kind of Stack it like it is in our figma file so in figma we have everything grouped in here and then we have the image all on its own so we want to kind of replicate what we have in figma so let's go to our code so on the horizontal one I'm going to wrap our prismic Rich text and our button in a div so div and I'm going to bring this down just to wrap that button and so already we should see a change yep great so that's a little bit better we still have some styling differences that we need to address so let's go ahead and give this div some Styles class name equals we're going to give this grid oh that's nice grid grid rows now here is a fun little Tailwind trick that we haven't covered yet but I'll touch on it in just a second so go ahead and make square brackets so grid hyphen rows hyphen square bracket 1fr no space just a comma then Auto comma Auto make sure you don't have spaces in that square bracket we're going to space I'll I'll come back to it I'm going to say gap eight and horizontal fit and height or H fit all right we're going to hit save let's see what we have all right that's looking a little bit better just in terms of the spacing between our elements but what is this is this a Tailwind class like what's going on here if we hover over it we see oh okay this seems to be a Tailwind class but um whenever you put these square brackets around something in Tailwind it's what's called an arbitrary value so if you need something specific like top 117 pixels uh Tailwind doesn't actually have a class for that but if you need something very very unique or just specific you can use these square brackets and that will return the value that you're expecting you can do it with pretty much anything you have hexes you have content that you can put in there so anytime you need something like what we're doing here where there is no Tailwind class for uh this grid template Autos style we can go ahead and use those arbitrary values all right so we now want to remove text Center from this div remember we're on the horizontal variation and if we come back here we see that that was left aligned now but I actually made a mistake up above by putting tech center here so remove that from our components object all the way at the top around line 23 or so depending on your file but remove that text Center because that should just be inherited from the div in default so let's see it that's looking better already let's go to default just to make sure we didn't screw anything up and yeah we have uh centered text that's looking pretty good let me copy and paste that a few times just to make sure yeah looking good awesome back to horizontal looking very very good all right so looking at this real quick I think that's actually a bit too big it's a bit too spaced out I think this should be a little bit tighter together we can see it's more like 1.5 REM I believe so this is just a really big gap so let's actually remove that gap eight and I think we should be in yeah that looks a lot better so that's it we have made a variation and that was made a lot easier because of the refactors that we did uh just a few minutes ago so let's just be glad that we refactored all that stuff and only had to you know change a few classes here and we have a whole new component that's really cool so let's grab a snapshot of this I'm going to hold alt and pull this off and I'm going to click fill I'm going to give me a white background click export export hero I'm going to say hero hyphen horizontal and now in slice machine it says I don't have a screenshot make sure you're in the horizontal variation here and I'm going to say update screenshot select file hero horizontal open and that should have gone through let's see yeah okay I just had a little flash but it's there and now I can go to my changes and it says that it's been modified so I'm going to push those changes I'll just take a second because that needs to upload that image everything's been updated we're going to head over to our prismic dashboard and I'm just going to refresh make sure you've saved or published all your changes I'm going to refresh and now we see I don't know if you you might have not seen it come in but this now has a switch variations button on it so if we click that we see ah we have two variation there's horizontal and there's default look how nice this is for your content team to choose between these they don't have to guess at all right they see exactly what they're going to be getting your designers are happy because oh that looks a lot like my design I that's exactly what I designed right so if we switch to horizontal we see that nothing actually like changes here and that's what we expect because we kept all the fields the same we didn't lose any of the content all of that stays right there but now our editors are able to switch up our home page a little bit if we save and we hit publish and publish again we can go to the flow rise home page that we have running locally and I'm going to refresh and just like that we have our hero amazing obviously we would remove the line break if this was the way that we were doing it but I just want to show you how variations work and it's that easy for your team to change between them completely change the feel of your website and not have to re-enter any content so changing it back and we should be able to see our main hero once again so nicely done you just added your first variation it's super powerful and now we get to say feet added or sorry yeah add variation to Hero slice I'll say add horizontal variation to Hero slice all right it's starting to wear on me a little bit so let's go ahead and style our header and our footer they're just looking terrible and we now have our bounded component that we can use in those components so let's head to our header let's do that first not heading that is for our text headings header is different that is our actual header so first things first we're going to swap out header for bounded and hit enter and we don't want to import it from dot slash bounded even though that will work you want to use at slash components slash bounded just that way if we ever need to move this import around it will always work so uh bounded we need to say as because we still want this to be a header and we want to pass some classes on this so we want to overwrite some of the padding that bound it already comes with so we want to say class name equals padding y four on medium and above so MD colon py6 LG py8 we're getting a prettier error not sure why let's see did we oh it didn't finish at the end so just make sure yours autocompletes because if not it it doesn't work right here we go so we already see that it's starting to send itself a little bit we can then add a div to wrap our elements because we need to make this into a flex row like it is over here let's go to our website actually we can go to our components and just see it in isolation so yeah we need to see that as Flex so let's add a div inside bounded make sure it wraps everything and then we're gonna give the class name and inside there we're going to say Flex Gap is four that's going to be one REM between each item so at the very least we're going to have that Gap item Center justify between on small screens we want this to be sorry on small screens and above we want this to be Flex row so you can see that's a flex Direction row and then our fallback or on uh you know tiny tiny screens we go flex call c-o-l for Flex Direction column so now if we hit save there we'll see ah good we see what we want not perfect but it's moving in the right direction and if we open our Dev tools we can do the little slide and we see boom just like that it Stacks into Flex column and It Centers everything that is what we are looking for looking good so far let's have a couple more styles to add so on our unordered list let's go ahead and add class name and on that we're going to say flex and that should be it let's see yep that's looking good we want that to be Flex like that and now on our prismic next link remember this can take a class name so add class name oh I didn't put a capital N there class name we're going to say padding Y is 3 and padding X is also three so really we can just say padding three let's change it to that and that'll handle both the X and the Y because it's just padding we do that because and if we put border you can see this the size of it now uh our links should have a minimum of 42 pixels on either side so we we have to have that padding it doesn't really change the way that it looks all that much but it does change its um hitbox essentially when you're using mobile you want to make sure that if people are trying to tap on something to click it that they can reach it so that looks good I'm going to remove that border just want to show you the actual difference that's happening now our styles are fine here but the main difference that you'll notice is we need our logo so we're going to go over here and grab our logo and instead of export we can just go ahead and I'm actually going to open it up yeah I think group four is what I'll grab it shouldn't really matter it's just I I don't want more nested groups than I need in what I copy out so I'm going to right click and I'm going to choose copy paste as and copy as SVG I'll say copy as SVG now I could go and paste it into my react component but there are a few reasons why we do not want to do that first off this is not compressed at all or um I should say it's not optimized we're going to use a tool to optimize it and then also it is you you don't want to bring SVG directly into react and we will touch on why in a little bit so instead of pasting it in here we are going to create a component for it because we're going to use this logo in a few different places and I don't want to have to copy and paste that SVG all over the place but I'll say components new logo.tsx and we can just leave that empty for now we're going to head over to Google and I want you to search Google for svgomg and and something like this should come up at the top so if it says GitHub Pages go ahead and click that it should look something like this and you should have that SVG still copied to your clipboard so you can go ahead and paste markup just click there and hit paste and you'll see just like that we have our flow rise logo now if you've never used SVG OMG this is a great tool for optimizing your svgs we have a number of toggles over here and even a little slider here that allows us to change the Precision of what we are working with we don't want to really hurt the quality and and it's it's going to change depending on the SVG but I see like the S is already getting kind of wonky there so we want to bring that back up to a two until we we don't really see any loss of quality but we do see down here that we're going from a 3K to a 1.6 K which is you know substantial uh what's even more is that it typically makes the markup a lot smaller right like that that size is an actual characters in our SVG so by using SVG OMG we save some space it's just it's just always nice for the most part we can leave the rest alone we're not going to really need to touch any of that if you want to see what it looks like on a on a dark background there you go but we're going to hit the copy button and that should add this new compressed SVG to your clipboard now we're going to a second tool because we need to convert this SVG this compressed SVG to jsx so if you Google SVG to jsx you'll find something like SVG to jsx.com or svgr I prefer the first one but uh you know you'll have Success With both it doesn't really matter so go ahead and paste that in we see the paths that it has and it returns to us a function like it turns it into an actual react component for us we don't need anything or what what actually yeah we can just copy this whole thing we'll just remove the react import so go ahead paste this in and the reason we are removing the react import is just because it's unnecessary in nexjs now they automatically import react into any file that needs it so if we hit save we have our logo here and the only thing I want to do is add a little bit of accessibility here so just above the path or sorry just above the first path because there are multiple paths above that first path go ahead and hit enter and we're going to add a text element oh not text area text I'm gonna have to do it like that there we go uh we are inside an SVG so the elements that you have at your disposal are a little bit different and just write flow rise because that is what this SVG essentially says so this gives us a little bit of accessibility it's a nice touch and now we can head back to our header and we can replace this title with our logo so I'm going to delete that and I'm going to type logo it doesn't pick it up as something to import maybe the Quick Fix will work we'll see Quick Fix add import from dot slash logo once again we're going to do at components at slash components slash logo all right save to that and now let's see all right it's looking legit there we go we have our logo we have our links over here that is a solid header and if we shrink it down it Stacks Perfect all right nice now let's move on to the footer it should be pretty much the same thing it's a very similar design right so um actually going to yeah we'll just head to the footer let's remove this aspect I'll I'll just do the uh logo swap first l-o-g-o that's self-closing and then we can either do the Quick Fix we can import logo from at slash components slash logo cool and now we should see in our footer good we have our logo but we need some Styles there so first we're going to swap this footer element out for our bounded element b-o-u-n-d-e-d make sure it comes into the bottom it did this time cool um we are going to say as oh I botched that right I'm gonna try to sign this again let's back up all right we're going to say as footer all right we're going to have an internal div actually no we don't need that we should just be able to do this um no let's go with an internal div that's how I have it written up I don't need to deviate from that plan even if it's not the greatest markup in the world all right let's go ahead and add class name equals I'm going to say Flex then SM Flex row and then Flex call so that on small devices or I guess extra small devices it gets stacked vertically now justify between and items Center and GAP six so that should give us let's see oh boundaries not defined right we forgot to import this I'm going to copy my logo and so what I just stating in case you want a quick tip if you are not selecting anything in particular but you're just on a line hitting copy and then paste will duplicate that line and I'm going to click logo on the second one and hit control or command D to select the next iteration of logo and then I'll type bounded it's just a nice way to make your life easier so you're not you know selecting copying pasting all that kind of stuff so now that we've imported bounded we are seeing a much better result still need to make these into a row but already this is looking much more like our footer so for our paragraph we'll say class name equals text we need to go let's go small I believe let's go extra small much better cool we all want you know what the copyright to be too loud right and next next we can go ahead and bring over those same styles from our header so here on our unordered list we just have flex and then you know let's do that first so unorder list class name flex and then on our on our actual item we have padding three so on specific next link sorry not on the item that's the Li on pressing next link I'm going to copy this uh class name equals P3 and that should give us the same setup down there awesome well there we go we already have a much better header and footer well done we can go ahead and commit that and yeah well let's do this in chunks right because I I like uh I like this version of git because I can I should save my work here um I can pick and choose which items I am adding so feet add SVG logo that'll be one commit and then feed style header and footer awesome all right we're all set all right so well our one slice and its variation are pretty awesome we did a great job with them uh it's not really enough to build out an entire website with right so it is time for us to build our next slice so let's head over to figma let's check out the feature slice this is the next one I would like to build because we're going to be learning a couple new Concepts I touched on it before but there are some differences in this component compared to our hero namely that these elements need to repeat it'd be bad to hard code for icons four subheadings and four descriptions right like you don't wanna you don't wanna have to do that because what if they want three what if they want six and it's just it's just a pain in the butt to code that instead we want to model this once and let our content team choose how many they add that's where repeatable fields are going to come in handy so let's get into it we're gonna head to slice machine and we're going to you you can either uh create your slices from your home page or you can just go to slices and say create a slice just know that if you create it from here they're not attached to anything but that's fine we can add them later in fact yeah let's do it from here so I can show you how to attach one to a page type so go ahead and call it features and hit create now let's look again at our figma design just to see what fields we need first there's this heading now I don't want to give the content team the ability to create multiple headings right that's once again the designers would kill me if I gave them that ability it's only setting them up for failure so we want to add this field to our non-repeatable Zone that way it'll just show up once so we choose Rich Text we call it heading hit add and we want to edit it and just like we did with our heading in the hero component we want to unselect all but here's the thing Heroes typically have an H1 because that is like this is is designed for being the top part of the the web page right like that's kind of like the hero's job right they could they don't call it hero for nothing but every other slice is probably going to be an H2 it really should be so this is going to be an H2 we're going to lock it in at an H2 and we're going to hit save just like that now that's really all that we have there besides our repeatable items so let's create our repeatable Fields we're going to say add a new field and this might be a little bit confusing at first but we already kind of saw an instance of this when we were creating uh our items for navigation so it's similar to that in that any fields we add here all of them will repeat in the page builder all right so what should we add first we really have three fields that we need to handle we have this icon we have this heading and we have this little bit of body content right so you might think all right this is going to be an image and you can go that route but it creates some potential issues our designers only want the content team to be able to choose from a handful of on-brand icons right they don't want them to be able to upload like emojis or just something that isn't these hand-picked icons so this can be an SVG but if we add it to the image field it won't be an inline SVG and I'm not going to get into the technical details of what that means but basically it's going to make our markup be an image an IMG element with this Source pointing towards an SVG URL so it shows up on our page but when you import svgs in that way you lose a lot of their power for things like animation color changing Etc you don't have access to it the way that you do uh when the SVG is actually just in line so instead of an image field we're going to choose a select field and that is right here so it says a drop down downfield of options for Content creators so we're going to choose this and we're going to call it icon I'm going to hit add now we need to edit this this is not one that we can just leave alone like key text uh so we can go ahead and make some options here now these options we're going to make correspond to each of the four icons that our content team can choose from if this were a real site you might have you know 10 15 of these icons but we're just sticking with these four and I'm just going to give them names of calendar bar graph Clover I know this is not like actually a clover but I don't know what else to call it it's that Mac icon right and then hourglass so option one we're going to type calendar for option two we're going to say bar graph all one word all lower case it just makes it easier in in the next step for us option three Clover c-l-o-v-e-r and and hourglass for the fourth leave the first value as default part off we want to make sure we are selecting one so go ahead and click save all right the next field is the title I guess we can say for this feature right we don't want to double up on the word heading title is pretty good too so we'll say add field this should be a rich text and I'll say title hit enter and we are going to unselect all and make this just an H3 because really semantically that's what this should be we have title and now last but not least and last but not least we are going to add another Rich Text field and call it description because it describes this feature right that's that's what I'm thinking about it for this one we want to just allow paragraphs bold and italic because once again we don't want them to be able to shove all kinds of stuff in there it's all about keeping sensible guard rails up so go ahead and click save to file system and now we can template out our slice so let's navigate in our code to our slices folder and see that we have a new folder features there it is open up index.tsx make sure you're in the features folder and let's get to work so this is the same boilerplate that we had for our first slice the hero slice but from the start we can import the helper components that we're going to use so go ahead and we can head to let's see you can also open up our hero it's gonna be a little confusing at the top but just see one says features one says hero go ahead and copy over Let's see we don't need button but we can grab bounded and heading I'll grab all three and then delete button out this kind of stuff makes our job so much easier so remove button we should have bounded and heading that we will be reusing here I'm going to start by swapping out our section element here for bounded just like that we hit save and we can go over and start seeing it in the simulator if you have hero open in slice simulator go ahead and close that and you can hit simulate slice again you have to reopen it small uh small thing but go ahead also uh we're going to be working more with SVG so go ahead and keep these two tabs open as well those will come in handy so we have our placeholder for our feature slice and we can already see we've got some styles that are that are taking effect they are centering it a little bit even though there's not much going on on mobile we'll see a little bit of space on either side right so our bounded element is already making our lives easier so let's start by getting our heading let's go uh show code Snippets in the non-repeatable zone and we get prismic rich text just like that hit copy let's go into our code and we can remove the placeholder thank you for holding our place but we don't need you anymore we can go ahead and import prismic Rich text from the react package here so I'm gonna just hit copy and paste that in so we are now importing that let's see that update together that's that's a nice message we can we can copy over our robust features from figma I'll hit save my content and there we go you have robust features but there's no Styles just yet because we aren't passing any components so at the top I'm going to create a components object const components and I'm going to type that with the jsx map serializer jsx map serializer we are importing that from prismic react so it gets added to our Imports here and that's going to be an object now we're not going to need to type this out every time really like I love copying and pasting throughout our project so we'll do that more but I just want to do it one more time just to get you in kind of the um the muscle memory of it so this one is going to be heading 2 and that is going to be a function that takes children or or sorry it doesn't take children but we're going to destructure children off of the props so dren and then then we have our arrow and that we want to use parentheses and then that's going to return heading because we want to use our you know our uh helper components and that's going to be as in H2 and that's going to be let's go size we want MD so size medium and class name equals text Center and margin bottom 12. we're going to close this heading element and inside we're going to return the children that we get so whatever's whatever's on this heading we are going to get it back and let's see if that worked didn't work yet you know why because we're not using components so uh now we need to pass components to prismic Rich Text so components equals components there you go so we have uh most of our styles that that we didn't even just write see like all we had to write here I'll so this will be the last time that I harp on about this but look we just had to write these two Styles how nice is that and it already looks fantastic uh and yeah it's looking really really good so we are done with our heading there now let's get to styling those items so just like we mapped over the links in our navigation we're going to have to map over the items that we get back from our repeatable zone so we're going to map over slice dot items and then we'll be able to pull off uh the icon the title and the description from each of those items so in our code let's go and let's see right about here after our prison which text we're going to say actually let's first create a div just to kind of contain this and then we'll say slice inside of some curly brackets slice dot items dot map item and then we also want index to act as kind of a key and then outside of that parentheses notice we are not destructuring it's going to point that out this is not destructured when you map you get the item and then you also get an index uh so we're gonna use parentheses after that arrow and we're going to have a div inside here so div and we're going to need to give that a key key will be index that's not really a problem because we aren't going to be moving these elements around once they've been rendered to HTML so no worries I'm using the index there whoops it's yelling at me because I'm missing a parenthesis there there we go and I'll need a parentheses at the end here there we go so now it sees that item like it it knows what what the item is and yeah we're not going to yell at anymore cool so now we can go ahead and start pulling our code Snippets from the repeatable zone so we can grab item dot icon right now it's not going to actually point to an icon it's just going to be the word uh but that's fine we can go item dot icon I'm just going to bring them in here so copy your title we got item.title and click copy there as well and we will have a description so paste all those in let's go to our slice simulator and there we go we see we have our heading here this is clover right that's one of our options we can change it over here so calendar uh this is our title and description it's all working as expected just want to make sure that the path through that our our data flow is working well the other thing to note is that it gives us one item by default so we can add more items to this group if I click another item uh hey and then this is text we see that it starts to repeat we can add as many items as we want but we have to you know add our own mocks for each item that we add but still we see that that is pretty cool that we are already seeing that as you add items we don't just get an icon or just a title we get all three every time we add a new item to this group so the icons are going to be a little bit funny but let's handle those first because we just used uh some SVG tools so we're already warmed up if your icons are from a popular icon pack like bootstrap or material design I recommend just using the react icons package if you just Google for react icons you'll find it it's a wonderful Library it's one of the easier ways to work with icons in xjs and it's tree shakeable so only the icons you use get added to your payload but however for our case our designer has done some customization to our icons with on-brand colors and everything so these unfortunately aren't available in this Sense on react icons but for them most part try to use those kinds of libraries make sure your life a lot easier so instead we want to handle these like we would a custom illustration so we're going to follow the same three steps that we did with our logo we're going to copy out our SVG code we're going to compress that SVG code in SVG OMG and then we're going to convert from SVG to jsx so head over to figma we can grab the icon from this little icons part in our assets panel I'm going to go ahead and click the calendar first I'm going to say copy as SVG we're going to get kind of in like a nice flow with this SVG OMG click the little hamburger menu paste the markup paste and there we go we got our little calendar I'm just going to kind of eyeball it that looks pretty good kind of go even lower I can sure that that looks good I'm going to hit copy now remember we go from SVG OMG over to this I'm going to clear this out and uh and and by this I mean SVG to jsx you can upload a file but as you can see copying and paste thing is definitely the faster way to go now earlier I I didn't really touch on why we are using this SVG to jsx because it looks like you can just create your own function and paste in the SVG what's like why would you use a tool here's the kicker what it actually does is it makes it jsx friendly so if you look at stroke line cap stroke width and there's a whole bunch of these types of properties that don't play well in jsx they need to get converted to stroke line cap camel case where here it's Kebab case so there's a couple other changes that a tool like this will do but make sure you are using something like this because otherwise you have to go in and do these by hand it's not fun so it's just this like one extra step and it you know it wraps it in a nice little icon for you so this time I'm not going to copy the export default icon I'm just going to copy the function itself leave everything else out because we are putting this directly into our features component I'm going to go down here at the bottom and hit enter a couple times and I'm going to change it from icon to calendar icon I guess I could get the word icon but we see calendar icon and that's it now we can use this in this component as we wish but before we do that let's go ahead and do the same for the other components I'm not going to talk through these ones as much I've already done this twice now copy is SVG paste it in here it looks pretty good yep it's eyeballing it copy bring it into SVG to jsx paste that in copy out the icon and I'm going to paste it underneath and say bar graph icon next one all right we're flowing copy as SVG this one's Clover that's what I called it paste yeah a nice little Clover it looks pretty good copy that out and paste that in and copy that we are so close we have just one more to go now if I had like 15 of these I might give them their own file but I only have the one so I'm just going to put them underneath the features uh the features component and also I know it's only going to be used here where if these are used throughout your project you definitely wouldn't put them Just in this one spot so copy as SVG last one here we go paste markup and paste there cool copy that and this one was what Hourglass Icon Hourglass Icon cool so we have our four icons all inside our features component now similar to how we have our components object we're actually going to create an icons objects of const icons equals we're going to make an object and we are going to make sure that we are mapping the actual values that we have in that select to the components we just created so first one's going to be calendar I'm going to map that to angle bracket calendar icon close those brackets or uh self close that component next we're going to go bar graph to bar graph Clover to Clover and by Clover I mean Clover icon make sure you put that icon part there and hourglass to angle bracket Hourglass Icon perfect we have this icons object and anytime we use the calendar property it will return this calendar icon component all right now we can change out item icon just delete that and we'll say icons because we want to reference that object brackets item dot icon ah it says type null cannot be used as an index type so to make sure that we don't get an empty value there we're going to go ahead and say item in curly brackets item dot icon and and so we're checking to see if item icon is truthy so if this isn't truthy this will not show up but if it is then we can use it so now typescript knows ah it can only be one of these four values where if this was outside it says hey this could be one of these four values but it can also return null because you're not checking to make sure that that actually exists once we put it inside that check typescript is smart enough to say all right you've you've done your homework you've made sure that this will return something well done so now if we head over to slice simulator we can check and see that that it's working it actually works and we can go in and change it to whatever we like and make sure that they match up right bar graph to bar graph cool calendar to calendar amazing all right so we have our svgs working all right next we want to style our text so we want to actually pass this components object to our other Rich Text components here so I'm going to copy this components equals components and I'm going to paste it inside the prismic rich text components here it's not going to make any difference yet because right now we're only handling the instance that we get a heading to and neither of these can return a heading two this is only an H3 this is only paragraph bold or italic so let's go ahead and add those instances here for heading we can copy The Heading 2 paste that there change this to heading 3 and make this as an H3 we want the size to be small or SM and for the class name we're going to wipe out what we have here and I'm going to say margin bottom 3 or mb3 font medium SM and above we want text left and then text Center if we save that we go back in there we go we see that ah now that we have some styles for our H3 it is picking that up and note we're using our heading again so we save that time all right last but not least we need to style our paragraph So we want to destructure our children off props Arrow function and parentheses so we want a paragraph class name equals to now all right so we start with text base font medium font body text slate 600 SM text left and text Center um I have ah I didn't close that bracket and I didn't pass children here we go so have a paragraph with those styles on it and we have our children inside we should look good and we do uh only thing we just need to handle the width but we will do that in a second we need to style this parent div that holds each item right now this div isn't doing much of anything and neither is this one so first let's style the internal div and inside our map so I'm going to say class name Max with extra small grid SM Place items start Place items Center so if we save that we should see yep it's looking a lot better we have that kind of like card feel like we have in our figma file let's go back to our slice here we go it's looking a lot better obviously we are not repeating the right way that's going to be on the element we use next but I do just want to point out real quick uh what these Styles each do so this sets our Max width this sets it to display grid this place item start makes it so that on small devices and above we are having our Styles uh like everything lines up on the left but then if you look here at mobile we want to Center everything and that's where Place item Center will come into effect once we are on 640 or I guess 639 and Below right so that's what we're looking for that's why we're using the classes that we are because of this centered mobile version so time to style this parent div let's go ahead and say class name grid oh didn't mean to put a hyphen there grid SM grid calls to LG grid calls for Max with 5xl gap X 8. cap y 12 MX Auto SM Place items start and the same thing as before Place items Center so a couple Styles here that I can talk about as to why we're using those but we are seeing that hey it is actually working the way we kind of expected it to it's looking a lot better and as we add items we can see all right looking looking pretty Swanky nice um but this grid calls grid calls aspect I want to just touch on real quick where the default for grid is going to be that it just has one column and if we go to mobile we should see that yep we see that right there but as we go from uh 640 and above we will see two columns so let's see if our tablet does that for us uh let's go something like 645 645 yep we see two columns that's looking good and then as we just saw desktop and above we want a four column layout so that's what we get here so I just want to explain what that was and then this grid sorry Gap X and Y that just changes the spacing between our elements and we just wanted a slightly different spacing for columns and rows all right the last thing I want to do here is just put a div around our icon and give that a little bit of style so class name equals margin bottom five so mb5 and that should look a little bit better nice this is looking great we should be set so you can now make slices with repeatable fields and they are really useful and they're going to be used often so this is one that uh yeah you're going to be coming back to before we wrap up this section let's go ahead and say feet add features that's appropriate for feet and feet features slice going to hit commit and we're set well done I forgot one thing and we might as well knock them all out right now and that is our snapshots so we took a couple for our hero but instead of you know come coming back after every slice that we do let's just go ahead and knock those out right now so we're going to need one for each variation text with image we have two variations there so drag each one of those off remember holding alt and dragging out and then for features we just have that one testimonial go ahead and drag that out and call to action we only need the desktop versions of these so don't worry about the rest for each of these you can go ahead and drag and select all of them if you'd like you can click fill and they should all get white backgrounds and then you can click export and Export five layers and those should show up in well in there it it'll export to wherever you exported them before and we can see that right there we have uh our testimonial our text with image our text with image one our features right so those all exported there so we are set for the rest of the video now we don't need to keep coming back here every time I'm going to go ahead and delete those copies that we made make sure you don't delete the originals and now let's head to slice machine let's make the uh no screenshot yet sad face happy by updating our screenshot let's go select file and remember this is our features slice I'm going to select that click open and we should be set not sure why it disappears like that but if we just hang on a second and come back maybe there it is there's our screenshot so we can go ahead uh push those changes up to prismic if you'd like but we are going to also say add add screen two features slice and now we don't have to copy those screenshots out every time we have them right here ready to go so in prismic a Content relationship is a way to establish connections between different types of content for example you could create a blog post custom type and an author custom type and then use a Content relationship to link the blog post to the author allowing you to retrieve and display the author's information along with a blog post in our case we will create a testimonial custom type each testimonial will be its own document so like if I grab this you can kind of think of it as like that's one document ignore the the that but this is going to be one custom type that we can then reference from our slice and then in the slice our content team can choose which testimonials they want to display now we could accomplish this just the same way we did our features right kind of a similar thing where you you might look here and go oh that's just more repeatable Fields true you wouldn't necessarily be wrong in doing that uh for for this instance I'll explain why we're not going to do that later but for the most part we're just doing it right now so you can learn how to work with content relationships so before we create our testimonial slice we actually need to create the testimonial custom type for our slice to reference so so in prismic we want to go to custom types we have our settings custom type this is going to be a new one and it is our first reusable type well done you've made it this far so let's say call this testimonial and hit create now for our fields we are going to start by noticing that we have a uid all right let's first notice that right off the Jump uh we'll talk about what uid is in just a second I will first add a new field of key text so this is going to be for the person's name let's go look at our actual figma file we have the person's name their Avatar their position or their job right and then they're quote very cool so we want to First grab a key text and say name all right I'm going to add that all right now let's talk about the uid real quick because that is actually very important for any kind of repeatable type uid stands for Unique identifier every repeatable custom type or page type needs a uid so then we're going to grab their job title so it's another key text it's just going to be a string so job title and last but not least we're going to grab some rich text because maybe we want some formatting for our quote so say quote add and we're going to go in we don't want a lot of this we're going to do paragraph bold and italic once again click save and save again up here and the custom type has been successfully saved now remember with custom types it's different from slices where we don't have specific files that are tied to custom types if we go and we look we just have this Json file that was created and our types get updated but unlike slices you don't have to have an actual like TSX file that is linked to a custom type I almost got we also want their picture right to fill out the the little Avatar there we're gonna want their image so add new Field image I'm going to call this Avatar the way of water um so that's it click save and we are now truly set now that we have this customial sorry testimonial custom type easy for me to say we can create a slice that references that testimonial so we're going to call this testimonials might not be the best name but that's what I'm calling this slice and now we can see that in our code we have a lot more that was made we have uh in index file like we've seen or sorry our index file has been updated we can talk about that soon we have a new slice that was created just like the others so a bit more gets created with slices than custom types or page types just to kind of help you figure out the different reference over and over again so so let's see what our actual slice requires besides that testimonial just a heading right so we have a heading and then we have to reference individual testimonials so we are going to add a heading to our non-repeatable Zone heading and go ahead and guess what element are we going to choose if you said H2 you are correct well done then we are going to add something new to our repeatable Zone we haven't used this yet but if you see right here this is content relationship it says Define content relations and internal links so we're going to choose that and I'm going to call this testimonial and remember we're putting it in the repeatable zone because we want to give our content team the ability to choose as many as they would like if we put it up here they would just be able to pick one testimonial if that's what you're going for that's great but that's not what we're going for if we click the edit button we can go in and we can change what they are able to access by not choosing anything they'll be able to reference the home page the settings document the testimonials like any of these would be fair game we want to narrow it down so they can just reference a testimonial we don't want them to accidentally point to our settings document and things get weird so narrowed it down to testimonial I'm going to go ahead and click save and now if I go over to changes we see we have our testimonial which is new and we have our testimonial slice which is missing a screenshot but not for long let's click update screenshot go ahead here and choose testimonial I know it doesn't look like this yet but it will now here's the thing we are pushing this early and I'll explain why in just a second that seems to still be not loading we will fix that bug shortly I assure you uh so we're going to go ahead and push these changes we have to push these a little bit early normally we build this out in the let's sorry normally we would build this slice out in the simulator but right now as of the time of this recording simulator doesn't support content relationships it's a bit tricky because you're doing a reference and it just it just gets tough and we don't have the ability to make mocks yet for uh content relationships so we can't really build this in the normal way so we need to add some mock data into our page builder first and then we can style it on our home page kind of like you would have to do with pretty much any other CMS or like you know doing this kind of in in olden times uh we are working on this problem actively and hopefully uh maybe by the time you you use this content relationships will be able to be mocked but right now we can't I did forget to do one thing though uh we need to go to our home page and you see uh oh in our slide Zone we only have access to the hero we haven't added those other slices like I promised we would so you have to go in here uh say update slices and we need to check testimonials and features click save click save again up here and we see that we have a change we need to push that change and that should be good in just a second there we go so now if we if we refresh the home page we can add a hero a testimonial slice or a feature slice very cool right now just for the sake of building this testimonial slice I'm going to go ahead and create one of those and I'm going to reference what we have in figma so go to figma to say what our users say I'm copying that and pasting it there what our users say uh and oh I need to create a testimonial actually so uh right now I have no testimonials to link to right it's like there's there's nothing there there's no testimonials buddy what do you want me to do so I can just save this real quick I don't need to publish it because there's nothing really to publish we're gonna head back to our dashboard and you can see that our home page has a little yellow thing there that's because um there's a change so if you're ever wondering what that yellow thing is it's because we have saved a change but we haven't published it so instead we're going to say create new and it automatically gave us a testimonial because that is once again the only thing that we can create at at this moment soon we will have multiple repeatable types in action and it'll ask us which we want to do but right now it just says all right this is all they can do so it just drops us into a testimonial so here we're gonna uh do a little bit of content entry just so it kind of looks decent I'm going to copy the name first I'm going to go in order of our fields we have name uid job title quote and then Avatar so I'm going to copy Emily W I'm going to paste that in here and the reason I put the name first is because of this if you have something above the uid the uid will Auto uh slugify that text so if if I were I I don't know if it would work anymore yeah so as I type something so if I like had a title here and I'm like the coolest thing it'll Auto slugify that for me so I always like to move the the uid underneath like what the title of the page is or or what the the title of like my content is so that that is handled for me only thing I want to do is drop that period off of the uid so I'll keep it on the name but I want to drop it off of the uid it's just not great to have a period there so Emily W her job title is ux designer Emily is awesome I'm sure her quote remember I'm hitting control and I'm clicking and then copying her quote Is That Flow rise has revolutionized her workday uh for Avatar we need to actually export our avatars from our assets so let's go over here uh here we go testimonial avatars we have these three go ahead and select those click export export three layers and you can save it in that same pictures spot it's going to export all three that's why it wasn't showing any from before and now for Avatar I'm going to go ahead and click upload media I think I can choose all three of these at once amazing and I'm going to import those and then choose Emily W there we go so now we now have that Avatar we can put profile picture of Emily W and just like that we have our first testimonial I'm going to grab her name and put that up here in the title this does not come with you or like this doesn't come back on the API this is just for when you're looking through your prismic dashboard it is a helpful name there but uh don't worry about that or you know don't worry about it also don't rely on it because anything you put there is is not the title or anything it's just helpful to see it back here uh in the dashboard in or I guess in the documents list right so let's do the other two while we're at it we we could move on but let's go ahead and just knock them out while we're here shall we so we have Mark R and Aisha W let's go ahead and grab those as well so name Mark R I'm going to remove that period his job title is non-profit founder thanks for all you do Mark I'm gonna grab this quote paste that in before flow rise he was always running against the clock and now we need to upload Mark's Avatar I guess just select it we already uploaded it Mark ours picture and I'm going to save that and publish that and last but not least we have Aisha W so copy that remove that period job title digital marketing specialist quote last quote we're pasting in oh uh we lost the actual quote so add those quotes in I'll add those maybe before you yeah I'll do this before you do this tutorial so don't even worry about it and then Avatar we're choosing Aisha and cool I'm going to hit save and publish so now the moment you have definitely undoubtedly been waiting for we're gonna go back to our home page we have our testimonials here now when we select a link it says all right I see some testimonials here which one do you want to go with uh let's just go with Aisha first I guess it doesn't really matter right like this order is not set in stone and if your content team wanted to change it they always could let's just choose three different ones and then let's go with Emily to round it out at the end we can go back and rename these right see how those got Auto named uh from that first field so it doesn't matter as long as you know what you're looking at so publish it now go ahead and publish so now we have that data coming back but we're not going to see it yet because we just have our placeholder content we haven't yet imported or um like we're not rendering any of that content we are still going to get some help so it's going to slice machine let's go to testimonials we're still going to be able to get some help from our code Snippets but not as much as you might think so first let's render that heading go ahead and copy that and we can we have our testimonials element we can paste that in and then let's go ahead and do what we do best and that's copy and paste right let's go ahead and grab bounded and heading from our features component or from wherever else right from any other slice we've built and then we also want to copy out our jsx map serializer components object so grab that I'm going to paste that up there it's going to yell at us for a few things it's going to say whoa uh I don't know what this is I'm going to copy that and import the jsx map serializer I think from yeah from prismic react now it's very happy but I still need to import prismic Rich Text so I'll do that as well from prismic react and now we're looking a little better it's a little bit happier uh we need to I think get rid of the heading three we can keep the paragraph let me just check my figma file um yeah so this is going to be heading three this will be a paragraph of sorts and we might just be styling these um as they are because those are key texts but yeah we're going to have a paragraph and an H2 no need for an H3 so remove that and then we can pass this uh components object to our prismic Rich Text so we have components equals components just like that it's not going to be the Styles we want let's actually go ahead and remove these styles just because they're not going to be what we're looking for we can just fall back to the defaults and let's see our home page remember we can't go to the slice simulator I'm actually going to close it because it just won't work with any kind of content relationships just yet but we do see here what our users say that's what we're expecting we need to add our bounded component let's go ahead and do that bounded and this is going to be as a section so we don't don't need to touch that at all that's looking good so if we check out how that looks that's looking pretty good and now we want to kind of have that stand on its own and then we need to handle looping through our testimonials and displaying one of these cards for each testimonial all right but before we get into our testimonials let's actually console log I think for the first time in this course it's quite the accomplishment so console.log and we're going to go ahead and log out our slice I'm gonna do slice dot items so so go ahead and console log that now here's the thing it's not going to log in our actual console here because this is getting server rendered and so we need to look here to see what is getting logged out you need to check your terminal so we see this is what's getting logged here is our testimonial object but you might notice something a lot of the content that we added in there is not there all right we had all that content and all we really got out of it is Mark R so what's going on here it's because when we query for this slice we only get a little bit of the connected or the content relationship so we're going to need to actually query for these testimonials individually based on the information we get back here so we're going to need to make a query for each of these Ides that we have so we need to import our create client so import Open brackets create client from at slash prismic IO then down here in our testimonials page we are we are going to instantiate that client and we can remove our console log it's going to go const client equals create client oop I didn't mean to do what I just did I think I imported something very there we go create client and then we're going to say const testimonials equals await and now here's the thing because we aren't just making one query here we need to query a few different documents and we want to wait for each of those documents to resolve before we render our component so this is a classic time for promise dot all p-r-o-m-i-c dot all and then we're going to use the slice itself up here that we are getting from our props we're going to say slice dot items dot map I'm going to double parentheses item and then Arrow function and we need to use a little bit of logic here because we need to make sure that this doesn't happen where someone adds a testimonial and then just click save so we need to make sure that our testimonial is filled before we go and try to query for this testimonial right so we're going to use a little bit of or we're going to use a prismic helper called is filled so up here we're going to import is filled just like that off of prismaclient this is a handy helper that is specific to each field type so like I said we need to check to make sure it's filled so we're going to say if parentheses is filled and now we need to tell it what type of field this is and this is a Content relationship you see it right there if is filled relationship we're going to pass it the actual field so it's item dot testimonial so if that if that field is filled and that item has a uid because there's a chance that it doesn't and we're going to need this uid so say and item.testimonial Dot uid see how it's optional we need to make sure it's there then so if if that is true then we need to go and fetch that ID or sorry that document by uid so we're going to return client dot get by uid and we're going to first tell this function what type it is and see it says here right it could be home page settings testimonial so we're going to say testimonial and we can click there see it's so handy when you have types and then item testimonial uid we're going to pass it the uid and it's happy so everything looks good except it is yelling at us because a weight needs to be inside of async so we're going to put it right here in front of the arrow function async and then we get yelled at again this says hey this is not when it's returning right it's now returning a promise so we say promise and then we put angle brackets saying that this promise is going to resolve into a jsx element now typescript is once again happy so now that we should have our testimonials we can go ahead and underneath the prismic rich text let's create a div so I'm going to kind of separate that out from the heading and inside that we're going to map over testimonials so curly braces testimonials dot map and then double parentheses we're going to say item and index try that typing again all right I'm going to try this again sorry I'm freezing if you have an arrow and we are going to go ahead and put a div inside that and that's going to need a key key is index so first we want to show our quote so we're going to say prismic Rich text and then the field is going to be item dot data dot quote it's like that and I don't remember putting this ah so here it's yelling at me saying it's possibly undefined the fact that item might not exist that's a bit of a problem so let's check and make sure it exists item and and there we go now that complaint goes away so this only renders if we definitely have an item so our field is item.data.quote and our components is components and then we just close that component and there we go let's see if we have any progress so far ignore the errors that shouldn't be a problem but we are seeing that we're getting our three different elements or not not three different elements but our three testimonial quotes those are coming through so our fetch to get our testimonials has worked and we are able to see that content coming in through our content relationship let's keep going this is awesome now structurally we we want to separate out uh this part from this part right like we can clearly see that this is going to be a different div it's like a different section and then even here we're going to have Avatar and then that's going to be next to two elements so we're going to set up a new div right here so inside there we can import prismic next image and we're going to be using this in some cool ways so prismic next image you can go ahead and click that right there and on that we can pass some properties that say Hey this is uh what I want the science to be so we want to go width equals I'm going to do curly braces 56 height equals 56 and I'm getting that I believe yeah from the actual figma file if you want to go check it out yourself so that's 56 pixels by 56 pixels the field is item dot data dot Avatar and let's add a little class to it and let's class it up class is rounded foe that's going to make it a circle and margin right four so mr4 and now we get to use a great feature that just comes with prismic next image you won't get this on your actual just next image so we're going to use what's called imagex params you can see that that's a accepted prop on prism index image now what imagex is it's an image CDN that all images uploaded to prismic have access to so you can do cool transforms with imagex params for us we're just going to make sure that if you upload an image that happens to be you know a rectangle of any kind if it's not Square we don't want it to get smooshed we don't get it we don't want it to get weird or anything so we want to make sure our aspect ratio or ar is we're going to put quotes this is a string one colon one so that gives us a square aspect ratio and then we'll say fit is crop now there's a lot more you can do with imagex parameters but here this is just a nice way that even if they upload a rectangle we're going to get a square out the other end close that object and then we're just going to close our component just like that and when I save it'll format to that and now let's go see let's go see our Masterpiece this is coming out great we have our image now let's keep going as I said we are going to be putting this image next to another div essentially and inside here we're going to have our uh kind of stacked text so here we're going to just use two paragraph elements because remember these are key texts we don't need to use prismic Rich Text for these so I'm going to go ahead and just say p and I'm going to put in here let's see what we have left item dot data dot we have name right see how typescript helps this makes it so that when I forget stuff we can just ask typescript what do I have there right job title and so we can display those two I'll see how that looks here we go ihw digital marketing specialist looking good it's not next to that but we don't expect it to be because we didn't style it yet but yeah we have all of our testimonials coming through and rendering as we would expect right now so now we can get into styling a little bit more so this is what it looks like it's like a little card with a little drop shadow it's got a white background uh so let's focus on that aspect of it first that's going to be right inside testimonials map it's this first item div key index so let's go class name oh and actually hold on this key is wrong if you followed my example and did quotes that's not right that's just going to make every single in uh element have the same key it's probably yelling at us in the console probably saying hey those those all have the same key don't do that yeah two children with the same key that's not good so instead of just uh the string index you actually need to have brackets so it's index so it actually changes for each name so class name equals we're going to go border it's gonna give it a light light gray we've already seen that as we were like testing things but I'm actually going to use that there BG White shadow LG rounded LG px8 MD px14 py10 MD py16 grid and content between so if you go ahead and save that let's see the difference um ah so so here this is funny um because it's it's updated uh without like really reloading everything we're seeing duplicates right uh react is like all right well these are different items than these so I'm going to continue to render the things that were marked as index with a key uh but I'm going to render these new things because I now have things with key 0 1 and 2 but if we refresh don't worry it's not a bug that is exactly what we would expect to happen with uh the error that I made so but look at this it's looking good um only thing I would say is it doesn't look like rounded is working did I up that's because that's not how you spell rounded so py16 is also wrong on mine hopefully you did better than me I'm sure you did all right that's looking a lot better cool now on to our uh paragraph text so we need to style this paragraph up here that we are passing into our prismic Rich text right we are passing that maybe we're not yet yeah yeah we are so we're passing that but it is giving the wrong kinds of styles all right so I'm going to wipe out these Styles we might repeat some of them but it's going to erase them for the sake of getting it right so text Excel MD text to excel font normal that's the weight font body that's the font family and text slate 600 large and bottom eight or mb8 all right that's looking perfect looking really really good we actually have to add some styles to our heading as well so we have text Center we have margin bottom nine and font semi Bowl that's looking better too now let's style the div that wraps around all of this we're going to give this a little grid to make it you know a little more gritty so class name grid MD grid calls three grid calls one and gap eight looking better all right now let's come down to the div that wraps around our image and our name and everything let's just give this Flex so class name flex and then here we're going to leave this div alone it's fine the way it is we're going to add some styles to each paragraph So class name we're going to say for the for the name one we're going to say text space font medium and text slate 700 and for the title we're going to say text base text slate 600. it's a little bit lighter and there we go so this messed up something over here and that's because uh this is going to try to stretch and fill the entire div if this happens to go into two lines so if we go back and we have Flex here let's put uh items Center so that if it happens to go into two lines we don't get that effect happening and we can see that if we make marker one or two lines two he's fine she's now into four lines it looks good still all right and last we can kind of see how it looks on different sizes I don't like the way that this is looking here right like that's way too thin I'd rather that have already broken to a single column by now so I'm going to go ahead and change this MD grid calls 3 towards the top to an LG grid calls 3 and it's going to break a little bit sooner it's going to you know go to one column a bit sooner but I think of the two options we have uh this is the better one so yeah I think that's a lot nicer and yeah there we go we have our testimonial slice we are referencing uh a different custom type with content relationships well done now as promised uh when do you choose a Content relationship over repeatable fields like why didn't we just use repeatable Fields the same way we did with our feature slice well you want to ask yourself are you going to use the content anywhere else the content inside a repeatable field and you know I'll add one real quick all right I just added one uh this content doesn't exist anywhere outside of this slice so if I wanted to put one of these items from the feature Slice on a different page you would have to re-enter this content but with content relationships we are linking to separate at documents I could reuse those testimonials across my site without re-entering the content so later I could create a featured testimonial slice that shows one testimonial really huge on the page and it could link to one of the same testimonial documents that we already have if and if I update that document it updates everywhere like if I got Aisha's last name wrong and it's actually a j that would update everywhere I wouldn't have to track that down across every place that I used it so we are done our testimonial slice let's go ahead add this to our get stage changes and we'll say feet add testimonial slice commit and we're set alright so far we have built three out of our five slices we built the hero we bought our feature slice and our testimonial last we have text with image and call to action we're going to try to bang these out real quick we don't have a whole lot that's new in these so let's start off with the text with image slice because this is one that you just can't you can't ship any kind of website without a text and image slice this is a classic so we see here that we have our heading we have a body and we have an image then we have a variation where all that happens is we swap where the image and the text is so let's get into slice machine and let's build this so if we go to slices we're going to hit create a slice I'm going to say text with image and this needs to be Pascal case so click create and just like that we have our new slice like I said we are going to start off with a heading this is going to be an H2 so rich text heading and we're going to see how fast we can build this so H2 we're going to click save next we have some more Rich Text it's gonna be a nice little body we're going to say Rich Text body hit enter and we're going to go unselect all paragraph bold italic and click save and last but not least add a new field we're going to call this one we're first going to find the image and call it image so we have our three Fields click save to file system we can go ahead and update our screenshot select file and we're going to use the one with the image on the left to start with so text with image one go ahead and click open that'll do the little thing where it disappears for a second no worries we'll refresh the page and there it is we've got it well we're here in slice machine let's go ahead and create our variation add new variation on it say this is uh image right and click submit we're going to duplicate the fields from default click submit and we're going to keep everything pretty much except for our uh screenshot we're going to first have to save it it says for Save now we click update select file and we're going to click the text with image with the image on the right go ahead and open we know what happens it disappears we hit refresh it comes right back maybe that's fixed by the time you're using this who knows but we have our two variations our default and our image right so let's get into templating out this slice and we can really see just how fast we are moving so text with image we're going to open this up uh we are very familiar with this by now I'm going to grab those couple of components our bounded and our heading from one of our other slices I'm going to paste those there I know I need to swap out my section for bounded I'm going to click save I'm going to head to my hero and actually copy over this jsx map serializer or rather our components object I think our hero probably has the most similar uh components or I guess the most similar styles to what we are using so text with image I'm gonna paste that in up above it's going to yell at me a little bit it's going to say hey I don't know what this is remember we pull that in I think from ah from react from prismac react go ahead paste that there and yes we are now in better shape so we can come down here we can wipe out our placeholder text we can go to slice machine say show code Snippets grab all three of these one after another and I'm going to paste that in there copy this one paste and copy my image and paste now we're getting yelled at saying hey what's going on we don't know what these are going to Quick Fix and quick fix perfect now we should see at the top we have prismic next I'm going to move that up a little bit we have our components that are getting imported and it's looking pretty good remember we can open this up in slice simulator because we're not using a Content relationship so we can simulate this slice again all right so far so good uh we are not seeing our components because first off we need to change this to heading two and second we need to pass that component into our prismic Rich Text field so components equals components and I'm going to copy and paste that into my other Rich Text field and hit save we should see there we go we see some Styles changed even though those aren't the Styles we want just yet so I'm going to go up to the definition for heading 2 I'm going to say as in H2 and we'll miss that part and then l g is going to be our size and class name we can actually get rid of I think all of this so we're just going to leave that blank for now and then down here for our paragraph we're going to wipe this out we're going to say Max with medium text LG font body text slate 600. and just like that we save we can go back and we see all right change to what we're looking for looking a lot more like what this uh this slice looks like let's keep moving so if you look back at figma we can see that the text is going to get grouped together and the image is going to be on the opposite side so we want to First wrap everything in a div and then so we have our Rich checks together let's put those together and wrap just those two in a separative so now on that outer div we are going to add some style so you go class name and I'm going to say grid gap eight MD grid calls two Place items Center all right let's see how that's looking so far all right already we're seeing like yeah that's pretty much what we're looking for right uh we have some more styles to add though so on this inner div that just wraps our two text fields we are going to say class name and we're going to bring in our old friend we haven't seen him in a little while CLS X and if I click this that'll import it automatically if it didn't import go ahead and import clsx from clsx going to move that up a little bit and we're going to open that function I'm going to pass it a string first and that string is going to be grid and GAP four now I'm going to say comma and I'm going to add a little return here and I'm going to say if the slice variation is equal to and we'll see how this goes so slice dot variation is equal to and it's going to or it should it should provide us with our options but it doesn't all right maybe you were missing a type or something we'll figure it out so if the slice variation is just the default and for that we are saying that this one's the default where the image is on the left then we are going to say so if if this is true then also give us this MD order 2. so that means that if we're looking with the default if if this is the default slice or sorry if this is the default variation then we are going to assign the order of 2 to the text so it's going to come after everything else but otherwise it will come first and did I save it I don't think I saved it so hit save and we're not seeing it move just refresh the page to check let me see oh because I was on image right that makes sense let's go to default there we go all right I was I was getting a little worried for a second uh but yeah there we go so we see that image is on the left and text is on the right and if you go to image right it switches and just like that we have our slice we can check it out on mobile now notice on mobile uh I only have this taking effect on medium screens and up because really we don't want to change the order and that's even reflected in our uh in our figma file where it's always image heading text image heading text no matter which variation it is that's just the way that you you kind of want to handle these things ah but actually I have It reversed look I have uh text text image all right I'm glad I caught that so let's go ahead and fix that so we're going to move this prismic next image all the way up above our div that holds our text so that's going to fix that part but now we have a different problem because you can see image right doesn't actually change to become image right so so we're just going to copy this uh class name and we're going to paste it on principal next image but we're going to remove the grid and the gap for I actually do want to add some rounding so rounded let's go I think LG is a good one to do right border radius cool and then here instead we're going to have our slice of variation and we'll see if we can make that work real quick we can actually get rid of the clsx on this div I'm going to remove that it's unnecessary since we just have that string there so now let's see default uh we we have it kind of reversed right where uh we we want the opposite to happen so instead of say it's variation default we can say slice variation image right so if that's the case then we will have the image on the right otherwise have that image on the left looking really good now glad we caught that and now on mobile it should still be image text text great so just like that within a couple of minutes we have another slice with two variations so let's go ahead commit that feed add image and text slice all right we're one slice away let's keep going all right last but not least we have our call to action slice we see that we have four Fields so we have a heading we have a body and remember buttons always need to field so let's go ahead and create this in slice machine we're going to head to slices and create a slice and we're gonna say uh call to action or CTA for short uh so we are going to put all of these in our non-repeatable field we're going to start off with heading Rich text heading reduce that to just H2 save add a new field Rich Text this will be body and reduce that to just a paragraph bold and italic save and now we want our button link and button text so we can do our button link first and button text will be key text and just like that we can see that the file system we can update our screenshot select our file choose call to action open it disappears I refresh and there is our snapshot and we can start templating so head to call to action open your index.tsx slice and I think you know what to do by now if you want to skip ahead a little bit that's fine but we're going to import both bounded and heading but also I'm going to make a copy of bounded because we need button as well button has joined the party so I'm also going to copy over my components object so cons components I'm copying that from text with image it should be pretty similar adding that remember jsx map serializer comes from prismic IO react so now that's Happy only change we need to make here is SM for the size it's going to be an H2 our class names and be font semi-bold text Center and mb4 margin bottom four so that's for the heading and then for our paragraph We can wipe out this go text Center and text slate 600 margin bottom sorry eight mb8 all right we're set there let's grab our code Snippets and start pasting so we can go inside here I can remove that prismic rich text prismac Rich text and copy our button link in and do that first and then our slice primary button text can go on the inside here and swap that out for link prismic Rich Text we get from prismic IO react so I'm going to import that there and then I'll just use the quick fix on this one so I don't have to do any typing I love it uh we are going to swap out our section for bounded we know how much we love that component but now if we look at figma we notice that whoa this is actually a lot smaller than most of our other components right ctas typically have some kind of like special styling to them and that's exactly what this has this is not going to be the typical full width that our other components go to or at least not for this element so we're going to create a div inside bounded that's going to hold everything all right I'm gonna wrap everything inside that class name for this div we've got a few Styles here so I'm going to say Max width for XL M Auto shadow XL MD px12 PX4 py12 now we're going to say grid Place items Center rounded LG and now we're going to do some gradients in Tailwind so we're going to say BG gradient to tr or top right so this says that uh we're going to be starting at the bottom left and going to the top right now we set our color so we're going to go from cyan cyan 50 which is a very light color see it shows almost as like a white uh via White so that means halfway through it's going to transition to White and then it's going to end so two Emerald 50. so this is Tillman's way of creating gradients pretty cool so we're going to start at cyan at the bottom left in the middle-ish it's going to turn white and then it's going to go all the way to Emerald 50. let's actually change these to 500 just so you can kind of like see the effect oh that's not how you write 500. it'll be a lot clearer if we go from cyan 500 to Emerald 500 just for a quick like example and then we'll change it out let's go ahead and open this inside simulator so go back to call to action click simulate slice open it up and you'll see yep doesn't look good there but you see what's happening it's very clear that we're going from cyan to White 2 Emerald now if we drop those values down to 50 each it should fix a lot of the unsightliness there we go now we see kind of the effect that we're really going for now we need to pass our components to our Precinct Bridge text so components equals components and I'm going to copy and paste the same for our body just like that we should see a pretty big change there we go snake and lorem ipsum great combination now remember all we need to do to uh improve the prismic next link is just swap it out for button and because of that actually I can remove this unused import here we're no longer using that so we immediately get our button right there and it's looking good and that's it we just speed ran a call to action slice we have our image component there all we need to do is commit our changes so feet add call to action slice going to go ahead and commit that and last but not least we need to make sure that these are all available on our home page because we haven't done that for the last two slices that we've created so go ahead add those two click save and then save your home page and then we see changes we see a few changes right so homepage has been modified and we have these two new slices that are only available locally so we need to push those up to prismic all right that's all set all right we have created all five of our slices now we would just like to add our content to our home page so this is a part that maybe um you know might not be super interesting to you but we can do it quickly thanks to uh copy and paste from figma and just adding these slices in if you want to kind of skip to the next section that's totally fine but it might be good just to put this content in at your own discretion uh you know on on your time so I'm going to go through it quickly I'm not going to talk too much uh oh I might need to refresh this page but actually yeah yeah so I'll refresh because I haven't refreshed it since we pushed those slices so now we should be able to see yes here's our five slices so we're looking for a feature slice next we have hero testimonials features uh image sex image text image text CTA that's the way that our homepage looks so scheduling analytics Integrations Focus timer those are the uh the headings across here let's go calendar this is scheduling let's grab this description and I'm going to create my next group so analytics we're using a bar chart our graph Analytics and description cool next I'm going to go Clover that one's Integrations and our description and last but not least we have the little hourglass with Focus timer and use the built-in Pomodoro Timer cool and we need the heading I skipped that one of course so robust features now we have our feature slice I guess I didn't need to publish it yet but I wanted to we have our testimonials our feature slice next let's add our content here now we haven't exported these images just yet so let's go ahead and do that quickly we have assets over here that we can export I'm going to grab all four of these now here's a key thing we're going to want to do something to these because otherwise figma is going to be weird about the export right here is the corner radius if we drop that down to zero it will export uh nice and normally it's it's not going to export a transparent image but if we export it right now it's going to export with this corner radius kind of baked in and it's going to be a transparent image it's going to be weird so make sure before you export these images drop that down to zero click export save and then we can go back here and type 16 for our Corner radius and we should see those images showing up wherever you exported them so there they are now we can use them in prismic so I'm going to click new I'm going to choose the text with image and I'm just going to use these images really quick so upload media let's grab those four we just used it's this one it's basically 16 17 20 and 21 not sure if they'll be called that for you but those are the ones you want um website we're going to choose her first all right great uh her heading is harmonize your schedule gonna grab that body text I'll come back for alt text in a second and then we have these two people smiling and that's going to be image right so just sought that variation we have mindful task tracking for our body we have blend productivity with mindfulness and we have those two folks awesome and the third one is going to be her with productivity and self-care so text with image yep we're keeping the default one productivity and self-care we're grabbing this woman and grabbing that body text all right so we can write some alt text for this a woman meditating m-e-d-i-t-a-t-i-n-g uh peacefully not that you can meditate any other way but you know uh two workers laughing in front of laptops and um a smiling woman and glasses painting all right so we have those text with image slices last but not least we need this CTA it says Unleash Your Inner productivity let's go ahead and add that and uh I just want you to kind of see like how easy it is to build a page out for your content team they might not be as fast on the keyboard as you or me but uh still you see the power of slices and being able to just kind of like fly through and add this content in so uh for this link once again just going to do prismic dot IOP nope dot IO and now if we hit save and we should and if you hit published and we should we are going to be in for a treat as we refresh this page we can see that we have our site built out look at this this is this is the page this is our home page we built it there's only one thing missing and that's the background color but we can fix that in just a second but I just want to show you like look how fast we flew through and essentially cloned our figure site like how cool was that well done for getting here uh we've done a whole heck of a lot to get to this point uh you should be really proud of yourself this is looking awesome so congrats all right so let's now create a little bit of a background gradient so we're going to go to our layout I'm going to click this to close everything because you have a lot of folders open I'm going to go to app and I'm going to open our layout and here we see we have header children footer so just under footer I'm going to create a div with class name oh I keep doing that name equal to fixed BG gradient to top right or TR from Emerald 50. 2 cyan 50. we're going to drop this underneath everything else so we need to give it a z index of negative one so I'm actually going to use in one of those special attributes for this so Z minus square brackets negative one that's an arbitrary value and we're going to say inset oh not inside the square bracket we're going to say inset zero and I can talk about what inset zero means in just a sec and opacity 50. so it's gonna be pretty light but I want it even lighter than it already is going to be half opacity inset is a handy short uh a handy shorthand or like a uh I guess a shortcut I don't know basically it's the same as saying top zero bottom zero right zero left zero it does all of them in just one property so we can say that we want it to kind of cover everything up we got an error what is wrong let's see what we did wrong uh ah we created a div and then we didn't close it that's not good all right so we're not seeing HRC up there we go so it's very subtle not sure if you can you know fully see it but it's just a little a little bit Green in the background um I'll get rid of this opacity zero so you can definitely see it yep it gets to be a lot more green but it's a little too green for my tastes and so opacity 50 is it's just subtle enough that it's not it's not white it's not green it's right in the middle so before we wrap up this uh let's just say that we've added the slices to our home page so add I I don't know if you saw but I pulled those out I'm staging just those changes not the layout changed us yet um so feet add layout no um add slices to home page type all right and then with this just going to add her feet add gradient background all right so we are all set there all right now we're going to set up the Fantastic prismic preview feature that lets you and your content team preview your page before publishing it to the world editors need to be able to preview their work it is a terrible experience if they're just hitting publish hoping the page looks the way that they want with prismic previews they get to see their changes live on the site without your visitors seeing it yet plus if you're on a big team your editor your editors can create as many previews on different documents as they need they can group their edit across multiple docs into a release and preview Everything at Once best of all prismac even has a preview link feature where you can send a specific URL to anyone and they'll see the preview that you are seeing so let's go ahead and add it to our site it's just a couple of small steps from where we are at right now we're going to handle the code portion first we're going to import ant preview from the prismic i o next package so import prismic preview from prismic IO slash next perfect then we're going to import the repository name from this file right here prismic I O So repository name and we're going to use that in our prismic preview so down here underneath the div we just created we're going to use the prismic preview component just like that and then we need to pass it repository name see it's not optional we have to pass that so repository name we're going to use the variable above repository name that can be self-closing just like that all right you can go ahead and save that and that's going to handle a little bit of magic for us we also have three files that were created for us automatically when we slice machine in knitted I'm not sure if that's the verb but uh back when we ran slice machine init that created these three files these two in particular we are using with preview so as you can see preview this is what gets us into a preview and this is what well if you can guess it will help us exit a preview so there really should be no other code changes that we need and we'll talk about revalidate in a second but we can go ahead and just save this and say feed add prismic preview now we need to head to our prismic repository dashboard so here we're going to go back to our dashboard and you should see this little gear down here it says settings click on that now we're going to see we're going to see this previews tab go ahead and click that you can ignore this first part because this is already done for you by prismic preview that's what we just did that uh a little component there handles what this script would do so it's kind of like an older style ignore that now down here it says create a new preview these are preview endpoints we're going to create one for development we'll create one later for production after we deploy our site so here we're just going to say development and our domain is localhost 3000 so go ahead and copy that if you'd like or you can type it out but make sure you remove that slash that's important for the for this field so HTTP not s uh localhost colon 3000 no slash at the end and then our preview route is slash API slash preview and that corresponds to what I just showed you with Slash API slash preview I'm going to say create my preview and just like that we have a preview route so let's play with this for a second uh if we go to our home page we can see productivity that flows with your life uh let's you know do what I love to do let's exclamation mark that we're going to hit save but we're not going to hit publish all right that's that's key to previews you can't hit publish so this is the preview button and that is going to open this and we should we should see down here this little bar that tells us what document we are previewing it says get a shareable link right there but we can tell that this is our preview content right if we open up localhost 3000 in an incognito window we will see that ah those exclamation marks aren't there it's only happening in our preview instance so this is exactly what we're talking about you can change your content preview what it looks like you can add slices you can remove slices you can preview all kinds of things and you can even click this shareable link I could email this to my friend and they could see how excited I am about uh this heading I can copy that link and send it over to them and they will see exactly this to exit this preview because right now we're kind of in this state where I'm only seeing the preview I'm not seeing uh the content that everyone sees I need to hit this little X and that should reload the page or just it didn't even do that it just exited me out of the preview mode and I am back to normal I'm going to also reset this back and just hit save and publish just to make it happy and yeah that is how previews work they're very very powerful that is once again just a a local host uh so I guess I I really couldn't send my friend that link but soon we will be able to send all of our friends some preview links because we will have deployed to versel all right but before we deploy um I want to show you our prismac and xjs get really powerful as kind of a combination here because it is time for us to finally build our repeatable page we only have one page right now it's a nice page but uh about and features don't actually link off to anything so we're going to combine the reusability of prismic slices with next js's Dynamic routing and this is going to let content teams build new pages on their own in minutes so let's head to slice machine and we're going to create a new page type click create and this one is going to be a reusable type and we're just going to call it page it's generic enough I know it gets a little uh confusing of the page type page or the page page type but don't worry about it as I said before anything that is repeated gets a uid so you automatically start off with one and because it's a page type we start off with our SEO and metadata I'm going to shift that meta title up and we are ready the best part is we don't even have to build a whole bunch of new slices we can just go ahead and say yeah remember those slices we built for our homepage I want them to be available here too I'm going to click save and just like that I can save this page type all right so just as a reminder this one page type is going to be able to handle pretty much anything we want to throw at it from uh the about page to the features page to really anything so we are going to grab the code for this by hitting page snippet so inside our page type go to page snippet and I'm going to make this a little bigger for us so we can see it um create your pages page component like I said it's gonna be a bit of a mouthful but it's all good so it says add a new route by creating an app slash brackets uid page.tsx file this time it's spot on so we're going to go ahead and do that so in app and close API and in app we're going to say brackets uid close brackets and then in there we're going to say page dot TSX remember that's the special file name that we want to use uid is going to be the route that we have here and that's just going to catch whatever we throw at it and it's going to add it to the uid variable so let's get that page snippet code I'm just going to go ahead and copy this and we can talk about it once it's in our file so we have a few things going on here first let's look at generate static params down here at the bottom this is going to run at build time when your site is deployed if you're familiar with the old next.js page router this is just like get static paths we need to return an array of objects with a property that matches our Dynamic segment which is uid so we instantiate our client and we fetch all pages that match our type page then we're going to map over them returning just the uid from each of those pages so when your site builds nexjs will have an array of all the pages it needs to build for this route now let's look at the actual page function so in our page we are going to destructure our props and pull params off of it we instantiate our client and we use get by uid to fetch the specific document that matches the uid that we got from before so we have our uid from the list that we built here and now this is building out this specific page for one uid if we don't find anything so if something goes wrong we use nexjs's essentially it's 404 function and it says right here when you do the react server component this will set the status code to 404. not only does this throw a 404 but it also injects a meta robots no index tank for us so that Google doesn't try to pick this up and you know hurt our search rankings but if all goes according to plan and it should we are going to pass the slices that we get back from prismic to the slice Zone and that will render our slices just like we've been seeing on our home page now this might look really sparse like how is this going to be a website but remember this is going to inherit our layout.tsx so this is just going to be what goes in here we're still going to have our background and all the other things that we have in our layout file now nextgs is going to handle that part of the routing for us but we finally need to come back to our prismic io.ts file and uncomment these lines here so this tells prismic that our uh what our routes are so that it can get those accurate URLs when linking internally you'll see here that we have colon uid and that tells prismic in the route resolver that the value for uid should be what you are linking to the like the colon says that's a variable right where path uh you you could make it so that all pages go to just you know type page or something but that is going to be literally the string page where this says this is a variable and the uid is going to be that value so if your content team creates a link to the about document with the with the type of page and that has a uid of a a b o u d of about then prismic knows to create a link to forward slash about prismic can handle nested routes and even catch all paths so if you have any different use cases or anything like that go check out the prismic docs they are fantastic and they will show you all these different complex use cases but for us we are set with just how this is we can remove our to do because it just has so happens to match up to the structure that we're building with go ahead and save both those pages and now let's check it out in I I think we pushed it with uh no we haven't pushed it yet so we have it saved but we need to push this change is a new page type push that change and we will be able to go into prismic go back and now it should ask us well what do you want to make because you can make as many testimonials as you would like or you can make as many pages as you would like and say I want to make my first page so uid let's see what we have in figma we have a features page and an about page I'm going to say features I can call this features our features page has a hero but it is our alternate let's go ahead and or sorry our variation so we're going to switch variations from the default to the horizontal and click horizontal and we have features for finding Focus that's fun we have harness our Innovative feature for the body uh button text is try for free and then last but not least we have just a generic link this hold on I'll actually show you so this could be a link to a document and we see oh I can actually link just to the home page if I would like and that will create a link back to uh just forward slash so we can do that it's a little bit confusing because it's just it's not going to take you anywhere but um at least you see how these links work where I can say a different document right I could well none of these are pages in in that same kind of way so the link actually wouldn't resolve in the proper way but we can link to the home page just like that instead I'm just going to say link to the web we're gonna go prismac .io and image do we have an image ah I don't think we exported that one yet did we I don't think so now so you can go ahead and Export image 15. and we're going to save that right there I'm going to upload and there's my image all right great I'm just going to say uh a camera lens held in front of mountains demonstrating Focus all right save and publish and oh I I do want to come over here and uh change my SEO metadata So Meta title will say uh what is this the is this the features page yeah features so the incredible features flow rise uh flow rise has the best features in its class makes it sound like a car but oh well uh meta image I'm going to keep it the same as what it was but we we could fall back to that uh original OG image but I'm going to use this one now in our settings we can actually go in and add some real content so here in the navigation we have this about linking to prismac IO and we have features linking to prismac IO I'm going to get rid of that link and I am instead going to link to a document and I'm going to choose the features so save publish that and click publish again and now we should see uh oh and we're getting an error so expected one of settings testimonial home page declared type page that might fix no it didn't fix why not all right it's had a hard hard refresh and it's all set now uh so I don't know if you can see but now uh at the bottom as I hover over about that's still prismic but if I hover over features it's routing me to forward slash features so if I click on that we should fingers crossed see our new page there we go took a second but here it is so features for finding Focus here is our new page we only added the one slice that is fine let's go ahead and create uh quickly our about page just with another single slice I'll export that that fun little image while we're at it with the yoga I think it's yoga it's not dancing right that's yoga yeah that's tree pose I think I'm no Yogi or expert or whatever but pretty sure that they call that tree pose so back in prismic I'm gonna build yet another page quickly create a new page this one's going to be called about and we're going to add our hero with the variation horizontal and what is our content let's check it out about the flow rise team we've been seeking our own inner Focus for over eight years let's add some button text even though we don't have it here uh join us right it's more fun if people come and join the party prismic dot IO you can put whatever link you want there and last but not least this image let's have uh oh wait I need to upload it and where are those there we go there's our tree posers and just like that we can say uh this is about and SEO metadata about flow rise and learn about the team behind your favorite app meta image last but not least there we go save publish and publish so now we can also add that to our settings and now we have a completely legitimate settings file pretty cool I mean legitimate in the sense that it is pointing to you know not the most robust pages but at least it's pointing to real actual pages and that part's pretty cool kind of hard to refresh this and we have about and feature so there we go about the features and we have home there we are so just like that we are able to ship these Pages super quickly I hope you're starting to see like the power that slices and these Dynamic Pages unlocks for us where we can continue to ship page after page after page and if we were already deployed to Versa these Pages could be up within a matter of seconds so it really changes the way that your content team can think about like all right we have a deadline to ship tomorrow that's no problem I can put together this page in a matter of seconds it's just a matter of uh creating a new page document adding some slices and we're set that's all you got to do so we are really flying now that we have um our slices set up let's continue and actually push this project to GitHub which is the step just before we deploy it to Versa which is getting it up on the web all right just a little best thing to do we want to commit our work here so go ahead stage those changes and we're going to say feet add repeatable page uh page type let's say all right commit and we are set all right throughout this whole project we've been great about committing our work to get so now let's push that code up to GitHub this is good practice that our work is saved somewhere other than just our local machine because like right now if our hard drive dies we lose all of that work but if we're pushing it up to GitHub then it is safe and sound plus it lets us work on our site with other people access it from different devices and deploy our site to places like for cell or netlify so go ahead to github.com if you don't have an account or if you're not signed in it'll look something like this go ahead and either sign up or sign in and when you do have an account and you're signed in it'll look something more like this once again it's free we want to create a new repository so you can click the new button here or find it somewhere else new repository up to you now we get some options we don't need a template because we already have an existing project you can call your repository whatever you want I'm going to call mine flow rise prismic and that doesn't need to be unique it just needs to be unique for you so you can call yours florise prismac as well up to you no need for a description and you can make yours public or private I'm going to keep mine public for now and the project already has a readme a git ignore and a license so we're going to just hit create then we get a few options here we want to push an existing repository from the command line because we already have a repo and we've been committing to it so we're going to copy this code and we're going to head back to our terminal and I'm going to actually start just a new terminal process here and I'm going to paste that code in hit enter and just like that we have Branch main has been set up to track and we should if we head back here to the screen if you hit refresh it should show your project right here so we see our custom types public Source all of the files that we've been working on and uh yeah it should look something like this all right now that our project is on GitHub we can deploy it to versl again if you don't have an account go ahead and make one it's free if you don't have an account you're not logged in it will look something like this and as soon as you go to versel.com and you have an account it should look something more like this you can click create new project or add new project up to you now I've already connected GitHub and versl but if not it will show you a screen that says connect continue with GitHub continue with gitlab and you can make your choice you're going to choose GitHub and you're going to go through the connection process once you're done there come on back and we're going to choose the one that we just pushed to GitHub so I'm going to click import we'll get a list of configuration options but all of our defaults here should be fine remember nexjs is made by the versel team so it's a really smooth deployment process I'm going to click deploy and we're going to wait a little bit all right so then we'll get a list I'm going to fast forward this options but all of our defaults should be fine remember nexjs is made by the Versa team so it is a super smooth deployment all right click deploy wait a little bit and our site should be deployed by the time we're done I'm going to fast forward through this part because it's going to take about a minute all right and just like that we have our site deployed Purcell even gives us a nice little congratulations page it shows us our page nice and live you can continue to dashboard and we'll see some information here all right so if we go through our deploy log we can see exactly what we just did so click on building and we are going to scroll down a little bit and we see the routes that were actually built so from our uid we built two pages we built features and about we have a few of these serverless functions right so the little Lambda icon there shows that these are serverless functions you have the exit preview preview and revalidate just as we expect and then we also have our home route and I want to point out that we also shipped slice simulator which in the future is going to come in handy when prismic brings out its new page builder so now if we head back to flow rise prismic we can go to project and your domain will be different than mine obviously but whatever your domain is it should be right here and if you click that we can open up our page fantastic about and features looking great so remember our site is using next.js it's getting its content from prismic and it's using all of the awesome Tech that we've covered whenever we push any code changes to GitHub first cell is going to pick up on that and it's going to rebuild our site automatically but now we want to set up prismic to do the same whenever content inside prismic gets updated if someone ships a new page or changes some content we want to tell versel to rebuild the parts that feature prismic content so if we head back in our code I'm going to close out these tabs if we head back in our code and go to the API folder that is where this revalidate route comes in so it's a very simple bit of code but we see here when we hit this revalidate route with a post it's going to revalidate anything tagged prismic and if we go to our prismic i o file and look at our fetch options we see that yes we are passing next.js the tag prismic so anytime that we hit this revalidate route it's going to request our data again from prismic just a reminder that this revalidate route should have been auto-generated for you when you ran slice machine init so to finish wiring this up head to your prismic dashboard and we are going to go to settings then I'm going to click web hooks and we're gonna be getting the URL from our project this is going to be specific to you but go to your live versel deployed site mine is flowrise hyphen prismac.firstell.app yours will be something along those lines dot for cell.app or if you've gone ahead and made a fancy domain like you know yourthing.com use that instead but for for me I'm going to use this domain so I'm going to copy that from right here I'm going to bring that back I'm going to bring that back into our web hooks here I'm going to say and and so I'm going to put the name of the web hook as our URL just so it's nice and obvious at a glance what this webhook does and if you're not familiar with web hooks basically I mean well first off you can click the documentation there but basically this is just going to fire off and alert anytime one of these triggers gets uh triggered so we have our URL there I'm going to also add API slash revalidate and then here we're going to add the same thing so just copy what you just typed and paste it there so once again there should be your url.versell dot app slash API slash revalidate just like that don't worry about the secret uh don't worry about any custom headers but here we're going to remove releases and tags we're just gonna have it so that when a document is published or a document is unpublished the this route will be hit so I'm going to add that web hook and there we go now it says pending because this web hook has never been run so it you know it doesn't have any feedback on it but whenever we publish a document it will run and it will tell versal to update now the last thing we want to do now that we have a live site is set up previews for our production site these are helpful because you won't always have your Dev server running to use your developer preview and content teams definitely won't be using that so you need to be able to preview on your live site so let's enter the preview section we still have our development preview there we'll click create a preview and we'll call this one production and I'm going to paste in again my flow rise prismic for cell app I'm going to remove the API revalidate that's still my clipboard and make sure you don't have a forward slash there just as a reminder I am going to type forward slash API forward slash preview again the preview route is going to be the same it's just the domain that's different in our production preview so create our preview and yours should look like this we have localhost for development and on production you have your first cell.app route these should be identical and we're set there now head back to a document let's go to our home page there it is right there uh let's you know make it exciting or we can say productivity that flows with your wonderful there we go Wonderful Life Up To You Right change it in some way that you'll be able to notice it go ahead and hit save don't publish instead hit the I and you'll see now instead of just opening a preview it open it asks us do you want to do development or production we can choose production and it's going to open a new window or sorry a new tab going to take a second and then we'll see that but hold on it's going to reload the page and query that new data and update so this is our preview deployed to our production site and if you look down here in the corner we see home page one document so it can tell what doc we are looking at and here with the shareable link you can actually grab this link send this to a friend and this should let them see that they're going to have a wonderful life right it'll it'll let them preview the changes that you have as well so I'm going to close all that and remember to exit a preview you want to hit this X and that's going to clear the cookie and reset you back to seeing what all of your visitors are going to see because if you keep this uh you're just going to see what this one preview has for you hit that X it should refresh the page and there you go we have productivity that flows with your life so that is a preview right we just saw the preview feature last but not least I want to show you what it actually looks like when we rebuild the page so right now we don't have a preview live we um so right now this is what the live content is and this is unpublished content I'm actually going to change this to excellent just to prove my point productivity that flows with your excellent life so I'm going to hit save this time I'm not going to preview it I'm just going to go ahead and straight up publish it and I'm going to publish uh now remember when I hit this button that is going to trigger our web hook to hit our revalidate route so we'll see how quickly that happens it's going to hit a route on vercell and it's going to say all right request all that information again so I just went ahead and did that I'm going to refresh it might not be ready yet oh it's already ready took like less than five seconds so with revalidation it is so so fast it doesn't have to rebuild or anything it just immediately uh says all right I now know to bust the cache on that content I'm going to go and request it again and use that content seriously try that out for yourself that there was no editing here uh it really happened that fast I'm going to do another change just to really send this point home uh this is incredibly cool publish I'm gonna it's published let's refresh there like that was all real time I I don't know how else to say it I'm sure you're experiencing it right now it is really really fast so your content team is going to be thrilled that they don't have to wait you know a minute two minutes three minutes however long for these pages to rebuild uh it is crazy fast with um the the way that the app router works we didn't have to rebuild our whole page or anything we didn't do a new deployment it's super fast we are done in this course you built a full featured next.js website using prismic for your website builder you saw exactly how easy it was to use slice machine to build out our slices super fast and now you see just how great of an experience your content team is going to have you see how quick it is to create pages to then add slices to those pages and you see how fast it is for a production website to update when content changes you now have the skill to create performance websites where content editors can easily create on-brand Pages we went from figma to slice machine and you learned how to turn any design into slices in nexjs the development experience was smooth thanks to awesome features like code Snippets mock data and slice simulator by the end we had a production ready next.js site that's deployed on versel has tailwind typescript and Industry best practices it's seriously something you should be proud of now take what you've learned here and go ahead and make it your own try adding more slices adding more custom types for blog posts or case studies or connect your site to some other services the world's your oyster and remember if you get stuck anywhere tailwind typescript prismic and versel all have fantastic documentation so make sure you check those out and whatever you build please share it in the prismic community forum for feedback and inspiration I would love to see it please tag me thank you once again my name is Alex trost please leave a comment below let me let me know what you want to see in the next tutorial I really appreciate you making it this far and uh yeah let me know what you have built I would love to see it and don't forget to like And subscribe thank you so much have a great day

Channel: Prismic

Views: 14,803

Keywords: Nextjs13, next js 13 tutorial, nextjs tutorial, next js tutorial, next js 13, app directory, Next js app directory, Prismic, Prismic CMS, Prismic Nextjs, Prismic Nextjs 13, Slice Machine, Slice Machine nextjs, Tailwind CSS, Tailwind Nextjs, Prismic TypeScript, Nextjs 13 TypeScript, Full Stack Crash Course, Next js Crash course, Nextjs tailwind Crash Course, Prismic Crash course, Next js Prismic course, prismic tutorial, prismic cms tutorial, next js tutorial for beginners

Id: nfZu56KsK_Q

Length: 335min 54sec (20154 seconds)

Published: Mon Aug 14 2023