Personal Website Tutorial with Next.js 13, Sanity.io, TailwindCSS, and TypeScript

in this course you will learn the process of building your very own personal website using a powerful Tech stack you'll learn how to create a stunning front end with nexjs13 manage content on the back end efficiently with sanity.io and leverage the benefits of Tailwind CSS for styling and typescript for type safety by the end of this comprehensive tutorial you'll have a fully deployed functional personal website that you can proudly showcase and continue to build upon kapehe teaches this course she is a senior developer Relations Specialist at sanity.io this course was made possible in part thanks to a grant from sanity Aloha everyone my name is kapehe you can call me cap short so I'm super excited for today's tutorial we are going to be building our very own personal websites so we'll have a list of projects a nice way for others to contact you and more so our personal website will be built with nexjs sanity.io Tailwind CSS and typescript so you will need a basic understanding of JavaScript react how to use the terminal and a general coding knowledge so what is next.js next JS is a flexible react framework that gives you building blocks to create fast web applications so you can check out their website you can click on start learning to kind of get a basic understanding of it we will be going over all the basic steps to get started as well but we can also Deploy on versus and today we will be deploying on Purcell so if you want to learn more about that on your own you can definitely visit the website next we will be having sanity.io manage our content back-end it has a real-time data store supporting apis for assets user management and the sanity studio so we will be embedding our own sanity Studio into our next JS app so we'll all be very seamless now to get started with sanity.io go to sanity.io click on start building and you will need to create your own login so definitely go ahead and go and do that now we will be using sanity schemas today so this is the docs page for the sanity schemas we'll be using a variety of these and this will be able to let us set up our Studios so we'll be using image string URL I highly recommend going into these schemas and learning more about what they can do for us and what things are required in our code for schemas but we will be using a lot of schemas today so definitely go and set up your own account now for everyone watching today YouTubers do get a boosted free plan everything we'll be doing today with sanity is going to be in that free plan but to get that boosted free plan visit sanity.io YouTube You're Going to click on the get started button right here now what does this plan include here's the list of things that are doubled 200 000 API requests plus more so definitely head to sanity.io YouTube to get your own boosted free plan with sanity what is Tailwind CSS it is going to be the CSS framework that we will be using it is a utility first CSS framework filled with these various classes and you'll see us typing these out throughout the tutorial so definitely go ahead get started if you'd like to learn more about it but we will be going through all this installation together and lastly we will be using typescript it's a programming language that builds on JavaScript that strongly uses types it helps with things like errors and autocomplete so if you aren't familiar with job or with typescript but you're familiar with JavaScript it won't be too different in your eyes but we will again walk through all this together now that we know what we need to get started and the different types of um technologies that we will be using today let me show you exactly what our finished project is going to look like okay so here's what our finished project will look like we'll have our navbar our header and our list of projects that we map over so we'll have our header and then maybe a little description that we have underneath about ourselves what we do maybe where we work and then within projects we will list our various projects so for this one I have only one listed but once we add them they'll just come into a grid each one is clickable and it takes us to a specific page for that project here's a little description explaining what the project is and maybe how you built it why you built it and then up here if we click on view project it will take you directly to the project itself and then you can view the project people can click around for this one it's a YouTube video now this will take us back to the home page now these two are coming directly from sanity and we created a Pages section so one of the pages we created was a contact page and it will you can just have different information about yourself an email maybe a Twitter handle but this will be our contact page and then again you can name these whatever you want you can have any content you want on these this is all coming from the sanity Studio and then the photo gallery this is one I picked and we could just have a bunch of wacky pictures like oh that go here and maybe we took maybe there's a photographer a photographer so yeah this is what our final project will look like and this is built with next.js version 13 and Sandy sanity.io the V3 version of the studio we will also be using typescript and we will be using Tailwind CSS for styling and the really cool thing about this project is that because we will be using sanity V3 Studio we can drop it right into the next project embed the entire thing so this will all be in one GitHub repo and it'll be really nice to maintain since everything's located together on one URL next up we're going to start with our next JS app we're going to create it right now and to do that I'll jump over to my terminal and I'm going to type in the command to create a brand new Next application and that's going to be npx create Dash next Dash app and we're going to make sure we put at latest and once I hit enter there we're going to see a nice walkthrough so I'm going to say yes let's install this package and we're going to name our project next sanity you can name it whatever you'd like I probably shouldn't have named it next Dash sanity because it is the same name as the sanity Library we're about to use but oh well would you like to use typescript we are going to use typescript it will help with a little bit of autocomplete help us find errors and generally really helpful to have in a project so yes would we like to use eslint this will help us catch some error so click yes for eslint would we like to use a source directory this kind of a personal preference if you use the source directory everything gets thrown into a source directory and everything will just live under there so you'll have your app directory inside of that for us we're just going to stick with the default for no so that our project will actually use the app directory so the app directory is a next 13 thing so we'll click no here and here we go this is a fun one would you like to use experimental app directory which is brand new we are going to say yes so press right and you can click yes right here and we're going to hit enter and then what import Alias would you like to configure we're going to stick with the default here and just press enter all right so that is going doing its thing all right so we have a brand new Next js13 application with the new app folder so this is actually a great introduction to next 13's app folder so if you haven't used the app folder this video will walk you through how to use it a lot of different changes that are happening if you're coming over from the pages folder as you may already know in next app so at the recording of this video the app folder is still in beta that might change by the time you watch this but just be sure to go check out the docs to see if the app folder is still in beta all right so we have our app inside of next Dash sanity it's going to go we're going to use CD to get into our app let's do npm run Dev here just get our project up and running and it's going and here we go so we have compiled over at localhost 3000 we're going to get back to the browser and refresh and there we go next.js13 look at that brand new landing page super cool I really like the Styles here and that's going to set us up for the rest of this tutorial okay so now that we have our next JS app up and running we'll just leave this for a second so we can set up our content back in using sanity so we're going to go back to our terminal and we'll open up a new terminal we'll leave that one running so let's go back because we don't want to create this within our next project so here we're going to create our sanity project to do that run the command npm create sanity at latest and we want to make sure we do the at latest so we get the latest version of sanity and this will be using the V3 version of the studio which is definitely what we want to use create new project hit enter now your project name we can name this anything we want but I'll just match it up with our next project and we'll do next sanity Studio again you can name this anything you want hit enter select organization to attach it to I'm going to click none for this so hit enter default data set do y for yes and hit enter we definitely want to use a production data set for this it's so it's creating that for us does that path look correct it does we're going to hit enter now there are different templates that we can choose from some have schemas with sample data some have just schemas but we want to arrow down to the clean project with no predefined schemas and hit enter we do want it to be just a blank slate for us do we want to use typescript yes so why and then enter and package manager npm so hit enter on that and it is creating our sanity studio for us so once this is done it will live at localhost 3333 and we are creating this in a different folder completely different from our next app but we will soon be embedding this project into that next app but we will do that in a second so I'm going to CD into next sanity Studio because that's what we named it hit enter and we're just going to run it so npm run Dev to get the sanity Studio running at localhost 3333 let it do that for us and it's going perfect so now it's running locally at localhost 3333 we're going to open that up we're going to log in and we have our project up and running perfect so I just want to pause here for a second and kind of talk about the studio so the studio is a web app that is written in react right now we are running it locally on our computer where we can edit it and customize it currently we are looking at the desk tool of the studio so the studio is connected to a real-time hosted content link there is no local content so what you do get synced automatically to the said content link so we can deploy the studio to the web once we think it's ready to use and once we have our updates we won't be deploying this separate from the next app because we are embedding it so once it's deployed with our next app we will have the online version to work with content you can invite others and collaborate and all that good stuff so at the end of this video we will deploy our next app and because it's embedded that will automatically deploy the sanity Studio as well so let's go back to our terminal and let's actually open it up in vs code so we're going to I'm going to do the shortcut code space period so here's our project let me get it back up and running npm run Dev so now that it's still running at localhost 333 I just want to point out a couple of things this again is where you could do a lot of your schema building we'll talk about schemas more in just a second you can do your schema building you could configure your entire sanity project here but again we will be doing all of that in our next app folder I just want to show you kind of what it looks like out of the box here so the sanity config file is a really important one for us to note so this project ID is what we will be taking over to our next project so that it knows what sanity project to look at and which data set to pull from so these two the project ID and data set are very important to note so once you have your sanity project up and running definitely go to that sanity config file and find out what your project ID and data set are those don't need to be kept private because none of you have access to this so unless you have been granted access or invited through a sanity manage dashboard you can't actually get into it so you don't really need to keep this private Okay so here's our schemas folder in here we could be listing out different schemas but because we're going to be embedding we will not do that here right now but this is where we kind of tell our studio what to look like what fields to have but I want to talk about the content like so all of this content lives in a cloud we call this Cloud the content link and all this happens within data sets so a data set is a collection of Json documents that can be of different types and have references to each other as we start adding schemas and inputting content we will be able to see the raw Json of our data so we are going to actually go to our manage manage.sanity.io dashboard in that studio we just made is this top one so we're going to do next sanity Studio click on that and I just want to show this off for a quick second so notice that project ID that lives here this is where I can invite project members like I was saying earlier so if I wanted one of you to collaborate with me on this project I would click there put in your email address send the invite and then whatever role I want you to have I want to also point out API so right now our data is only allowed to be viewed at localhost 3333 once we start embedding this into our next app we will need to add localhost 33 or localhost 3000 and once we deploy this we will need to add our URL that we used in the deployed version so we would do add course origin put in that URL allow credentials and then save so right now we can actually add in localhost 3000 allow credentials save that so now when we embed this right away our next app will be able to see the entire data set for this project and all data that goes with it now we have our project and our sanity files so to query for our content we are going to be using grok when you use sanity you can use either grok or graphql but for this video we are going to be using grok and we'll look into what that is and how to use it and what kind of queries we'll grab what particular data but this Vision plugin is our playground kind of for this particular Studio so we can write our query in here click Fetch and it will show us exactly what content we would get back with that query so sanity's open source query language it lets you query any collection of Json documents and filter them down to exactly what you need by their properties and their value it also lets you reshape and reform that data using projections and functions we're going to be using grok to query for all of our data today so you'll definitely have a handle on grok by the end of this video so using the vision plugin it lets us query for our content for this specific data set in this studio and that is getting our sanity project up and running so right now we have our content back in already we don't want to stay in this vs code and in this folder for any more of our sanity project we want to actually embed this entire sanity project into our next app so we'll do all the code over there so the next thing we're going to do I'm going to actually stop this server and make sure it's not running anymore and we are going to move on to embedding our sanity Studio into our next app all right this is the moment we've been waiting for so we're finally going to get our sanity Studio which we have separate right now and we're going to embed that right into our next JS project So currently we have two separate folders We have neck sanity we have next sanity Studio that we're going to get rid of this next sanity studio and just drop it right into next.js and we're going to have one single repo for both next JS and Sanity so let's get started we are currently in the vs code project for next sanity studio so this is a sanity Studios project there was only one thing we need out of this project and that's going to be right here in the sanity.config.ts we need the project ID so I'm going to copy that and then we'll go over to the vs code project for the next JS app and will only work in there for the rest of this video so I'm going to go ahead go ahead and close this vs code project and here I have my terminal I'm going to actually close this out let's cancel this I'm going to open up this folder in code and here we have the nexjs project in vs code and the one thing I'm going to do next is go into my terminal and then make sure I do npm run Dev since we closed it out in the other terminal and now that is running I'm just going to go ahead and close the terminal there and now we are ready to roll use Ctrl tilde to open and close that so first up let's take a tour of the next 13 in this new app folder this might look a little different for some of you if you're coming from the pages folder and overall things are pretty close to the way they were but there are a couple of different conventions that were changed as far as routing file names and where we're going to place things so let's take a look at the home page for our next app I'm going to actually close out this terminal here we only need vs code and the browser I'll go over to my browser and let's go to the next JS app which is localhost 3000 this homepage right here is under app slash page dot TSX and that's similar to how it was before with Pages slash index.tsx but let's jump back over and here in page.tsx this is our home page everything you just saw is all right here in our react.jsx now I want to show you a little bit about the routing let's say I wanted to create an about page Well normally you would go into the pages folder you'd go a new file and you'd go about dot TSX and that would be a route but now you're going to have to do about is the folder name slash page dot TSX so now you have a folder called about and then page is the actual contents or the react component for that page and you might be wondering well that's kind of interesting because now there's a little bit of more files that I have to create the benefit here is you can do multiple files underneath this about page or this about folder about route whatever you want to call it and it can apply to just this route and what I mean by that is let's see let's say we have this page let's do a page right here let's do the about page return about page and I'll save that and we'll go back over to this let's go to slash about and that's our about page so this actually brings us a couple of benefits since we can Nest our routes so this is the about page and then let's say we want to do a new file under here which is actually let's create a folder page dot TSX so now which when we have a slash Cape is going to be our routing but the benefit to this setup right here is that you'll notice under the app folder there's a layout.tsx which is actually the layout for our entire application so I can create a layout also inside of about layout dot TSX and that layout is going to Nest inside of that layout and then apply to all of these child routes so there's a lot of really cool things that you can do with new fault this new folder structure and nested routing and nested layouts are actually a lot easier than the new way of doing doing things now this just scratches the surface of what you can do with routing but overall what you need to know at this point is that a folder is going to correspond to the URL and then page.tsx inside of that will be actually the component that is rendered for that route and the same thing goes with the dynamic routes that were used before and I'll show you how those work as well for now let's delete this about folder and let's get back into it okay so what we'll be doing next is actually embedding the sanity studio right into a route that we'll Define right inside of this app folder so first things first let's go ahead and install some things I'm going to stop my terminal let's clear this out and I'm going to say npm install sanity which is the main sanity package that we're going to need and next Dash sanity is the library that we will need not to be confused with the name of our project I definitely should have named the same thing oops sorry everyone but that's where a lot of the magic is going to come from so all right we have those packages installed how do we start using them we are going to let's first start our Dev server again so let's close that out let's go to our sidebar and what we're going to do right inside the root of our project we're going to create a new file and we're going to call it sanity.config.ts and this is where we're going to Define all the things for our sanity project and a lot of this is going to come from what we did before when we ran npm create sanity now the way we're going to set this file up is we are going to Define config from sanity so import that and then we are going to use that Define config function to const config is equal to Define config and we're going to pass out an object and then we're going to export default config next up we are going to pass in a couple of things that are needed by sanity like project ID this is a thing we're going to copy over from the other project that we just created we're going to have our data set and that's going to be production and this would be cool if you had multiple data sets that you created and maybe one for development one for production we'll have title uh let's go for my personal website the API version is going to be today's date which is 2023-0-3-04 cool and when you create this you can just go ahead and use the current date I know some apis are going to ask you to do a specific date but if you just use the current date sanity will know what to use now this is going to be an important one base path this is going to be the URL for where we want our sanity Studio to live so if you have a website and you wanted to have people edit content at slash admin then we're going to do slash admin right here if you want to call anything you want you can write that in right here like slash Studio and then you can create the route for it inside of our app folder all right so the next thing we need to do is plugins and we're going to bring in a plugin called the desk tool that comes from sanity we're going to go up to the top here and import that import desk tool from sanity desk the desk tool is a top level view within the sanity Studio we need this plugin to view our studio at all so definitely make sure you have this plugin next up let's go ahead and embed the sanity studio right into next.js so I'm going to open up my sidebar go into the app folder and we want everything at slash admin to go to our studio so we'll be using a catch-all route so that anything you type in after slash admin actually gets sent to one route and the way we used to do that in the pages folder was with the little square brackets in our route file name and here we're going to do the exact same thing so we're going to say slash admin and this is where we're going to use the double brackets dot dot dot index slash page dot TSX and that's kind of like a wild card so it says all routes under admin are going to go to this page.tsx now we're going to use the next sanity package here and I highly encourage you to go to the next Dash sanity GitHub for it and actually look through the installation instructions and what you can do with this package I'm going to just walk you through it setting it up I highly encourage you to always go read the docs so let's close that back up head on back to our vs code and we're going to say export default function admin page and we're going to return and check this out we're going to say next Studio which is a component that comes from the next sanity package and we're going to say config is equal to that config that we just created and just like that that's it that's all it takes for us to drop in the sanity Studio into a nexjs app in with the config file and the page.tsx for the admin route and there's a couple more things you need to add after this but this is really the gist of it so let's do our Imports real quick import next Studio from next sanity Studio let's go ahead and import our config so you can do the import from dot dot dot since there's a couple folders up I'm going to go down here to this config at the end of the word and type in control spacebar and we'll just let vs code do the import for us it's going to click down click enter and notice how next is actually using the at as an alias for the root of our project so you can actually just do the at sanity config super awesome all right those are all looking good now there's one thing left we need to do that's actually a really specific thing to next 13. next 13 by default will actually render all of our Pages under the app folder from the server so everything gets rendered on the server and as little as possible from as little as possible JavaScript is sent to our client compare this to the pages folder way of doing things where a lot of that rendering would happen on the client side next 13 actually tries to move all that over to the server side so that it's faster and we ship less less JavaScript to the client but since the sanity Studio is going to be rendered on the client side of things we actually have to say use client at the top of this file and that's a way to signal to next.js hey this component don't try to render on the server render it in the browser on the client all right so let's go check this out we're back on the home page we're going to go to slash admin right here and this should load up the sanity studio right inside of next Js let's see if it works all right so here we go we have the sanity Studio it's doing the whole thing it's asking for our login make sure you log in with the correct credentials that you've been using I'll click Google and check it out we have the sanity Studio embedded right into slash admin and this is our next JS app all we had to do was npm run Dev inside of our next app and we got the next app running and the sanity Studio running so this is great everything lives at one URL and it will be way more seamless for any users or clients or customers or whoever that are using our site to go to slash admin create content they log in right there and start editing next up we are going to actually get some stuff into the studio we have no document types we need to do that and we are going to create document types and schemas and we will show you how to do that and this is looking great all right now we have our sanity Studio dropped into our next.js app but this isn't real useful for us because we have no document types so there's not really content for us to edit or create the next step here is to add our content types and as we spoke about earlier we're going to have a project type so we can show off all of our cool projects we're building and then after that we're going to talk about the pages type so to start us off let's add a project type I'm going to go back into my editor here and let's close out our folders all right so where we Define our scheme is going I'm going to create a new folder called sanity and then inside of this we're going to create a new folder called schemas and then I'm going to do project Dash schema dot TSX and personally I like to put that Dash schema at the end of it you can leave it off if you'd like but for me it helps because soon you'll have a project type file you'll have a project schema file and you'll probably have a route for projects as well so this helps kind of know where you're at all right let's start this off so we're going to Define our project as a project is equal to I'm going to go ahead and Define this object which is going to Define our sanity schema so we're going to say name is Project we're going to say title is projects and the convention here is I like naming title as plural and name as singular and this is what's going to show up in our studio the title so that's why it's capitalized also and this is how we're going to query for each of our schema types so I'm going to say type is document so each one will have name title type this is a document type name project next up we're going to define the fields of this project so I'm going to type in a Fields array and we're going to insert a bunch of objects and each one is going to correspond to a field inside this schema so the first one let's do name is name and we'll have name title type and title is going to what going to be what shows in the studio so we're going to do capital name and let's go for type is string the next one let's do name is Slug title is Slug slug and then type is going to be you might think this is going to be a string but it's actually actually going to be a type slug so sanity has a built-in slug type and we're going to say options source is name so it's actually going to Define Itself by grabbing the information from the name field pretty handy and we can always com customize this later but by default it's just going to grab what's in the name and slugify it so that we can use it the next one is going to be image so I will do name is image name title type again title is going to be image with the capital because it's for the studio type is going to be image type and Sanity has a bunch of these schema types built in you can go check out the docs for which ones you need to use the ones that we're using here are going to be the most most common ones you'll you'll use so we'll keep going from here options this is a cool feature that sanity provides we have hotspot is equal to true and this means that in our studio we can actually zoom in pick a certain section of the image that will always show up and I'll show you what that looks like it's super fun and then fields are object for image is actually going to have its own Fields array and we're going to say name is Alt always good to have an alt title alt o and this has to be an object and the type is a string so now we have an image field that has its own fields for Alt all right let's we've got some left let's go for name is going to be URL title is going to be URL again name title type and this is going to be the URL that we point people to for a certain project that we have on our personal website type is going to be URL all right the next one and the final one right now is going to be the name is content we need to actually talk about the project itself so title is going to be content type is going to be array and this is going to be an interesting one because it's not going to be a string as you might think that this should be so it's going to be an array type so of type block and this is sanity's way to do Rich Text we call it block content and we are using what we call portable text what you need to know is that basically if you do type block then you're going to be able to do headings and bolds and all the good like wysiwyg type stuff you're going to get that right into your sanity Studio the last step in this is we need to export this object export default and I believe we call it project all right so we've created our project schema now let's go ahead and drop this into our sanity config so we can show the schema type in our studio I'll go into sanity.config.ts and underneath plugins I'm going to say schema and this will be an object we're going to say types is going to be an array and in this array I'm going to do project right here and notice this we're getting this red squiggly we'll have to import it to do that do control spacebar and we can import here from the sanity schemas project schema and there we go we get import at the top thank you vs code all right so let's go check out our studio there it is already reloaded thanks to next and here is the project and there we go we can just start writing in here creating new projects but I have one last thing I want to do before we close up this section so I want to do a little bit of refactoring and organization here right now we're importing our project here and as we start getting more schemas this is going to be a lot of stuff that we're importing so I want to clean this up let's go make a barrel file and put all of these schemas into one file one thing so I'm going to write some Wishful coding here let's say this would be schemas and this array would come from import schemas from sanity schemas and that's ideally what we want to see here so I'm going to go ahead and delete that and let's go make this Barrel file that we just wrote out so I'll go to sanity schemas and then inside of this folder we'll create a new index.ts and this file we're going to import project from project Dash schema and we're going to say const schemas is equal to an array with project in it and then we're going to export default schemas and this is really just an organizational thing so we have everything inside of this one file so as we build out more schemas we just import it here and we don't have to adjust our config because it always comes from that index.ts file so now all of our schemas are defined inside of the index.ts and we just work in the schemas folder when we want to add new ones all right next up let's go ahead and create some projects and then show those projects right on our home page of our website I'm going to go back into my sanity Studio let's click this new button right here and check this out we have this whole studio just dropped into next JS I'm going to go ahead and in my name I'm just going to put a test one here let's do test and for slug I'm going to click generate over here and it actually pulls from the name like we told it to image and ALT I'll leave blank for now URL I'll leave blank for now and for Content I'm going to say my first project and we're going to go ahead and click publish down here all right so let's go ahead and create another one just we have a couple to work with I'll say second test and we'll generate this slug and then down here under content I'll say I'll click bold second test so my second test and we'll go ahead and click publish here so there's a little bit of bold and that and now we have two documents four projects that we can go in and use inside of our application so I'll go back to our vs code let's close everything out close all editors let's close all of our folders and let's start from here so the way I want to do this is I want to go into the sanity folder and I want to create a new file we're going to call it sanity Dash utils.ts and inside of this file we're going to put all the functions that we're going to use to go grab data for is for instance Let's do an export async function called get projects and this is where we're going to use our query language called grok to go ahead and grab those projects that we just created so let's go ahead and write that in I'm going to do one const client is equal to create client and we're going to pass in a config here and this is so that we can use the next sanity package to create a client that can read from our content like so we'll pass in an object here for our config and our config is going to look like something similar to what we had in our sanity.config but it's going to be just a little different so this client that we're about to create is all going to do all it's going to do is read from our content the config that we had in sanity.config was more to generate our sanity Studio so only a few things from here are necessary like we're not going to need plugins we're not going to need schema we're not going to need base path so let's go ahead and grab all of these right here I'll copy those and let's drop them into this right here now we're showing a red squiggly for create clients we need to import create client control spacebar and we're going to add this from next sanity and you'll see the import at the top there and it looks like the title is also not necessary so let's go ahead and delete that all right now that we have our client created we can go ahead and read data from our studio next up we are going to take this client and we are going to do a fetch so this is where we're going to write our grok query if you haven't used grok before just type along with me and I'll explain these as we go through we're going to write out grok and this is going to be the function that we're going to use to create our query so let's go ahead and import this up here I'm going to do grock and that also comes from the next sanity package all right so here let's create our graph query so type along I'll explain we're going to start with an asterisk that grabs everything in our data set and then here we're going to Define this is going to filter down what we want to query for and then open up a projection and that's the curly brackets and we will Define exactly what we want to pull out of here so first up we want the type to equal project so it's going to put all of our projects and it's going to say hey Brock grab those projects that we just created and it's going to be looking for multiple projects and we want to grab the ID out of it we want to grab the created at and then let's do all the things we had in there we're going to have name we're gonna have slug but slug is gonna be a special case because we had a schema type of slug this one was a string this is a slag we have to do like this Slug and slug dot currents we're naming sub.current to be just slug from now on so we're like renaming it so that is that we have the ID created name slug is slug.current image is also a special case since the image type is going to give us image dot asset so it's going to pull in the URL out of that so the URL here is what we're going to display on our front end so the image.asset and then reference down to the URL and that is going to be named image URL is a string as a URL schema type so we can bring that out we have content and that is it so we're going to grab all of that and we're going to go grab all of our projects and we haven't actually returned anything so we're going to do a return right here and that should be able to give us our data so we can use it on the home page and show all of our projects there and this was queried using grok all right so that looks good right there let's go ahead and use this on our home page I'm going to go into app let's go into page.tsx and this is our homepage let's go ahead and just wipe this all out so I'm going to do command shift p to open up my vs code command palette and I'm going to type outward this is just a little trick you can do if you want I'll press enter and it highlights everything inside of that and I'll delete all of that and we're going to write out my projects go here so now we have the starting foundation for our home page let's go ahead and remove the Styles and enter from our custom fonts there we don't need all of that above there and now this is our home page so we're starting out pretty much from scratch so let's go get those projects and show them here the first step here is we are going to import get projects from and I'm going to use that Alias at next jss up for at sanity slash sanity Dash utils the next thing we're going to do is changing up a little bit from next 12 to next 13. so what you would normally do if you wanted your data to be fetched on the server side and shown to your react component on a page you would normally do this you would do export function get static props and then if you had a page that had multiple paths like a dynamic route you would also have to do export function get static paths now in my experience this has been a little bit harder to wrap my head around because you have to get static paths which returns a very specific array of how next.js does things and once it's formatted then it gets static props it's going to return props and that's going to be an array or something like that and you would have to return props which is going to be an object and let's say you have projects in there and that would be an array so very specific way of doing things but now in next 13 you can get rid of all of these and check this out we can just do get projects cons projects is equal to a weight get projects so right inside the function itself in our is uh our react component we have projects await get projects and we have to make sure this is an async function since we are using a weight but look how much easier that is to manage because now it kind of makes sense we just get projects and we're going to map over the projects here now the trick in next 13 all these Pages under the app folder are by default server side rendered so since that's the case all of this is happening on the server side and then it's splitting out all it's fitting all the projects rendered right here so I'm going to do this projects.map project and then we'll do a div and I'm going to do key is Project dot ID and then let's just go ahead and show out the project name so project.name and you'll see a typescript error here saying that the project is any we're going to fix that when we create our types but for now let's just make sure we show these projects on our site so I'll go back to the home page which is just localhost 3000 and there we go so we have tests and we have second tests we are showing our project so we had from sanity in this video don't worry we're going to make these Styles a lot better looking than what it looks like right here remember the final project you saw earlier but right now let's just celebrate we have our data and we're able to show it and next.js is rendering this on the server so this is really really cool stuff if I go back to the studio let's go ahead and create a new project let's call it we'll stay with test so third test and we'll generate the slug here let's go down to Content I am the third test and we'll click publish document was published let's go see if we see that on our website refresh and there we go so third test as soon as we refresh the page it shows up and we were able to go get that new data and show it all right this is really cool stuff you can start to see how the flow works from having our studio content grabbing it and showing it in the next app and it's all embedded It's all under one URL all right if we look at our page.tsx notice this typescript error right here if I hover it project any parameter project implicity has in any type all right let's give it a little bit more of a con a little more of a context so that vs code can give us some intellisense some typescript features like helping us give us what properties are inside of a project type and this is going to help us out when we're working across our project because now we get smart intellisense and things are just going to be easier to find errors all right to do this we're going to create a type for our project so this is all typescript stuff so let's start cleaning things out I'm going to close all my files right here close this out so I can config all right so let's go ahead and create a new folder inside of here I'm going to say a new folder I'm going to call it types and then inside of here I'm going to create a new file project.ts and inside of this I'm going to export type project is equal to and we're going to do everything that we have from our schema we're going to say ID is a string created at and since it starts with an underscore that's kind of saying that sanity created this themselves remember we didn't create this that's not something we had to generate it kind of automatically comes generated for us that's awesome um that's going to be a date and then the ones that we generate ourselves that we generate ourselves we're going to Define name String slug is string image it's going to come back as a string URL is going to be a string so we're giving them types and now this one's going to be an interesting One content it might you might think it's going to be a string but the way that sanity returns it since we want to want Rich Text like bold we want images inside of our content we want links below block quotes we want good stuff like that it's not going to do it if we just say string so we're actually going to use what is called portable text block and it's going to be an array of portable text blocks and that's how sanity stores Rich content um and it's a thing called portable text so I'm going to import that you can see a little green thing right here I've been doing control spacebar to show the autocomplete but I can also click this add import from sanity nice thanks vs code and there we go to the top imported from sanity is going to be enough to create our project type for typescript all right now how do we use this thing if I go back to page.tsx it still shows an error there are a couple of different ways you could do it right here you can say project and then we have to import this project I'll click on the little green light bulb add import so that's one way to do it so now whenever we're typing in things are here and I say project Dot it will show check it out ID content image name slug URL and also tells me the type so I'll do name right here so that's one way to do it another way to do it is take this typescript type right here remove it from there and then do it right here and say project is going to be an array of objects or an array of projects sorry like that and we get the same autocomplete we see that this parameter is a project type but personally we will have to write a lot of code if we use this get projects um in different files so I don't like doing it right inside of each file where we call the get projects function so let's go all the way to the source sanity utils get projects right here we're going to say the return is going to be a promise and it's going to return project and an array of them so now let's go over here we'll do import from types project and just like that since we're doing it inside of our call where we say get projects now anywhere that uses get projects like in here get projects we hover and it's going to return a promise that gives an array of projects so now if we go over this it knows hey this is an array of projects and then down here it also knows that this is a single project since we're mapping over them so I think this is a great way to do it you keep all of your types and Sanity utils and then your main react components they don't really show types but they are typed which is really nice and we can delete this import now so that's how we're going to add types to our projects and use it in our utility functions next up let's start making our project look good it doesn't look the greatest right now if I go back to my browser it's just this thing right here let's make this look a little bit better so we're going to bring in Tailwind CSS and Tailwind is a CSS framework that helps us build websites out really quickly was kind of taking the entire Dev ecosystem by storm so if you haven't used Tailwind I'm going to walk you through how to style our website and if you have used telwyn let's start building out this cool looking website so here I am on Tailwind cs's homepage I'm going to click get started and under framework guides is where we want to go and next.js is going to be the first option we're going to go ahead and just follow the instructions they did a great job with these docs let's see and PX create next app we already have our next app and next is install Tailwind this is where we are going to start so we will copy all of this right here I'll go back to my vs code open up my terminal using control tilde open up new terminal and let's do this right in here so all right that is step one that's good let's go and create our Tailwind config file copy that back to vs code paste that in and we have a brand new tailwind.config in a brand new post CSS dot config down here we are going to configure our template path so that Tailwind can actually look at our templates and only give us the CSS needed for the classes that we use so it keeps our bundle size really really small and really the one we want to get here is the app folder one right here since that's where our stuff is going to live and maybe if you're using components you can use that or if you want you can just grab it all and throw it into your Tailwind config.js all right and I'm going to replace this entire content right here there we go and then I'll go back to the docs add the Tailwind directives to your CSS so we're going to take all this and put this inside of globals.css and I believe that's the last step until we can actually just start writing out Tailwind in our files so let's go back I'm going to open up globals.css under app globals and there's a bunch of stuff in here that next.js has already put in so I'm going to go ahead and delete it all and put in these three lines and that's all we need to get our Styles going another thing I notice is Page dot module that came with default next um with next we don't need that so let's delete that all right let's close everything here let's close our folder structure so let's start from a good place and let's go into our terminal I'm going to close that and let's actually restart our our Dev server so npm run Dev it's always a good idea whenever we build a new build tools like that so now I'm going to open up once this is done I'm going to open up page.tsx and let's let's write out some class names so class name is equal to BG red 500 so background not 50 500. and back over here to our next JS app refresh and there we go we have Tailwind ready to go inside of our app and now we can start styling out our home page so let's do this real quick let's delete that class name is equal to that and the things I'm going to need here I'm going to need a div let's do class name right here let's make sure we have a Max width so maybe with 5xl and MX Auto so that centers everything we're doing here then let's create a hero section we're going to say an H1 and then I'm going to say Hello I'm hey close that H1 and next is going to use es link eslint to tell us hey we want this to be an entity so we'll do this with the a pause semicolon thing and we'll replace that so we can make make next.js happy perfect it's looking good all right so let's get some styles on our H1 so class name right here is equal to text 7xl and font extra bold let's take a look at that save it there we go that looks good let me zoom out a bit for now all right cool so another thing we can do we can do padding y of maybe 20 and get some spacing on the top and bottom top and bottom and then a fun effect I want to do I'm going to wrap this in a span so I'll put a span right there and I'm going to say class name let's give this a gradient this I think is a very fun effect so PG gradient to write so we have to give it two colors to start with and end with so we're going to say from Orange 402 purple 600. and you can even do a middle color so like we'll do via red 500. sweet so let's take a look at that all right so it looks kind of interesting right now but let's apply it to the text instead so now with two more classes we're going to say BG clip text and we're going to say text transparent okay all right okay that looks really cool so let's keep moving let's go and add a P tag underneath this H1 so P I'm going to say aloha everyone check out my projects you can say stuff like thanks for visiting my website all that good stuff and let's style this a little bit so class name is equal to margin top three text extra large XL and text Gray at 600. we don't want it to be like super dark so it kind of gives a little bit of a different differentiation from the H1 above it so let's take a look nice that looks good all right let's go ahead and give these projects a little header to like say my projects so right above the projects map I'm going to say H2 my projects and we'll give it a class name I'm going to do a giant margin top of 24 we'll do font bold text Gray at 700. and text 3 XL and that will give us a nice little subheading for our projects let's take a look nice so it looks really good right there and now let's style out each of these projects we have three of them let's separate them so we'll go back here I'm going to say class name here is equal to border border gray at 500 let's give this rounded large and what we're doing is we're adding a nice border onto it with these class names I'll click save and then let's style out our project name I'm going to put div around this and then we're going to say class name is equal to we'll do font extra bold let's go for another BG gradient to write actually we can simplify this yeah let's just go and copy the one we have up here might as well just copy it scroll back down and we'll just do that right here and we'll save that we also have the image for these projects so let's go and say if project.image exists then let's show an image I'm going to use next js's image component here we're going to say source is equal to project Dot and check it out we have all of our properties things typescript types I'll say image and let's go for an ALT oh and I just realized we didn't bring an ALT from the studio so you can go ahead and add that to your sanity utils so that you can pull the alt for now for now I'm just going to use project.name so let's keep moving let's go for a width of five of 250 a height of 100 and let's go class name let's say object cover so that doesn't go over the width of the div that it's contained in let's go for a rounded large and let's give the image border border gray 500 and we need to import next image so I'm going to go to the top myself and import image from next slash image and if you go down here there we go no errors and that should be good enough to show our projects on our home page and have some pretty good styles so save that let's take a look and there we go and our projects are kind of just punched together like this so let's give it some spacing next and I think we're reaching the end of this we're almost close to being done with styling our home page so let's wrap projects .map I'm going to shrink that and we'll give it a class name so div around it class name will do margin top of five to get some spacing away from this H2 let's go for a grid if you haven't used CSS grid yet this is really a really cool way to do it we'll do grid grid columns three and then we want a gap in between each of these so I'm going to say Gap is 8 and then let's go close the div around here and that is going to be how we get our projects into a grid yeah isn't CSS grid so cool um so there we go yeah now let's also make this responsive that this is the last part of our Tailwind for this homepage because if I do they kind of stay in this grid so let's go over here let's see grid columns three is only on large screens on medium screen screens grade columns two and it defaults to grid columns one so we don't actually need to write grid columns one but there we go and I think we should give a little bit of padding to our project so padding maybe three let's go take a look there we go that looks a lot better let's scroll over here and look how responsive that is very cool now the images aren't showing because we haven't added any images to our sanity Studio but if you add images they should show up here all right so we've written some Tailwind we've made our site look pretty cool and I think we're a really good path to being able to click on these and showing each individual project Page by themselves next up let's go ahead and Link each of these individual projects to their own specific page right now we're on the home page but if we wanted to click into one it would make sense to be able to go to slash project slash the project slugged slug so to do this first of all let's get some real projects in here we're going to go back to our sanity Studio and let's go and delete this third test I'm going to keep it so delete right there or I'm going to delete it so delete right there delete now and then let's go into test let's go ahead and in this case we're just going to add two YouTube videos so I'm going to add a couple projects we'll this first one will be sanity.io crash course we'll regenerate that slug image I'm going to upload an image for the sanity crash course and I have one right here there we go and you'll remember in our schema we added a hotspot is equal to true in our image so if we click the little crop icon right here we can crop using the drag handles right here so if I drag that over there drag it over here we can also declare we where we want the hot spot to be so this basically says if we need to focus on a certain area of the image we want it to be there we want to be there or whatever and we get the previews down here they're really nice and you'll notice updating over here on the left as well and if we move it over it'll update again so this is a cool feature from sanity to tell when we render these images to kind of focus on a certain area of the image all right I'll go ahead and close that one and we'll keep everything there that's good I'm going to paste in our URL from YouTube let me go back copy this one right here let's go back to the dashboard and feel free to add whatever projects you have of your own and I'm going to update this to say sanity a sanity crash course video and hit publish highly recommend watching this by the way document was published that updates will go ahead and update this one for our other projects I'm going to say groken 2 which is a series that I did on YouTube that lets you learn how to use grok in two minute videos we'll regenerate that we'll upload a new image there we go and let's make sure the hotspot picks this section over here where it says groken two and let's do that we'll see update over there very cool we'll copy our grok into URL right here we'll come back to the studio let's paste that in so yeah these are um Quick videos to learn grok and I'll go ahead and publish and that will update that document so we now have two documents that are ready to go and I'll go back to our website refresh and oh let's so invalid Source prop you'll see that on next image host named cdn.sanity is not configured under your images in next sanity config or next next config so this is just in settings in next to say hey I want images from this URL to show so let's copy cdn.sanity.io let's click into this nice link and they give us the docs right away so um we'll go into our next config and just add that really that chunk of code that was a really great experience with the next JS docs and that error to give us the direct link to fix our problem all right back over here let's go down to nextconfig.js and paste this inside of the next config images hostname is cdn.sanity.io we don't need path names so we'll delete that since we're just worried about the main URL of the domain let's go back over here to our website so this was to handle images in next since we're we updated next config let's see if we need to update our server so npm run Dev restart that and let's see if this fixed so I'll go back over hit refresh and there we go we have our app running again so we have our images showing really nice I'm seeing a little bit of spacing issue on those and we'll fix that but right now we have a great way to show our projects let's go ahead and style these out and link to each of these so let's go back to vs code I'm going to go back to the page.tsx file and let's do a little bit of cleanup on our Styles our image let's bump up the width to 750 we'll bump the height to 300. I kind of want to drop this padding down to one so let's change that to one and then let's up our border to two so let's just make those quick changes and then down here I want to add a little bit more spacing let's go from margin top of maybe uh two so that gets a little more spacing from the image all right so let's check that out that looks better uh maybe a little bit getting cramped over there but that's okay let's start linking these so that they can go to an individual page so we'll go back over here and instead of this div I'm going to make this a link and we'll change the closing link right here and we need to import this so we'll go to the very top of the file and we'll do import link from next link let's scroll down and here we have an error probably wants an href yep href is missing so let's do that href and we'll do back takes we're going to say slash project slash projects project.slug so now that each of these is going to link to their own page with their own slug we'll show that from there so now you can see that this is linkable right here linkable if you hover let's go ahead and give these a little bit more style so that they show that they're linkable and this will be the last thing we do on styles let's go over here to the link and we're going to say hover let's do scale at maybe 105 and we'll say on Hover border blue at 500 and then we'll also transition both of these so that it's a nice transition between these two states all right there we go that looks great so now if we click one we get slash project slash sanity i o crash course but we have a 404 page could not be found that's because we haven't created this page yet so next up we have to create this page so what we are going to do is go into our vs code go into our folder structure under the app folder and this is how we are going to create a dynamic route that is going to be used for that route we're going to say new file and we're going to create the folders in here as well so project is going to be the folder and that corresponds to the first part of the route we're going to do that with project and that's going to be the dynamic part of our route so when we're passing the slug that is what is going to be called in as the project and then we are going to do page.tsx so a folder and a route doesn't really exist until there's a page.tsx under it so that's how nexjs knows to say okay I'll create a page for this route so good to note if there's no route then it's kind of private and it doesn't get used or shown to the public all right so let's define this thing right here we're going to export default function project and then we will return a div my project goes here now you might be wondering okay so in next 12 we used to have to get static paths and get static props here since it's a dynamic route well we don't need to do that which is really really really cool if you're going to pass in params and we're going to get that directly from our route and next.js is going to pass that in and then we are going to have the const slug is equal to prams dot project params is what next.js is going to use to pass us and the reason is called it's called projects is because of the file name right here so if you use this name differently it would pass in different params now that we have the slug let's go ahead and do const project is equal to a weight get project and we're going to pass in the slug now this is similar to how we did it in the page.tsx where we did get projects and we did it right inside the component what's cool about this is now we can start using the project right here and it seems like a lot simpler code than get static paths guess static props it's all just right here in the same component all right so we have a couple of things to do we have some errors let's fix those I'll do async right here to fix this await one let's fix this params type problem it says it's any let's just give it a type so it knows what we're looking at type props is equal to an object and the object is going to have params and inside of that we're going to have project which is a string and then we'll say this is going to be props all right that's the easy ones to fix um right now we are ready to go except for this get project we need to declare this thing and Define it and it hasn't been made yet but we do have a sanity utils file that we can throw all of this in so let's go over here to sanity sanity Dash utils and write now we have export async function get project so let's do another one export async function get project singular and we're going to pass in the slug which is a string and then just like get projects we are going to return a grout query fetch from in here and we can actually type out the return to so let's say promise and it's going to return a single project and the error here is because we're not actually returning anything out of this it says uh returning void or any must have a return value so we're going to write that in now but this is cool because we have get projects which returns an array we have get project which returns a single project so let's go ahead and copy this right here all right let's copy this whole thing and we'll work off this so I'm going to copy that let me zoom out so we can see a little bit better so we'll copy all of that and we're going to go down here and paste that in and the main difference right here is going to be a minimal one is that we need to say type is equal to project and sub dot current is equal to slug but this will still return an array of projects so we want to say take that first one and that's what the zero does so find any projects where the slug equals to the slug I'm passing in and only give me that one back and the way we pass in that slug we go down here and we say slug slug or we can shorthand that to just slug and I'll zoom in again so just like that we have get project which we can return which will return a single project and you might be wondering hey do I have to write this create client every single time uh yes but we can actually simplify this and move this config out so we'll show you how to do that right after we get this working so let's go back to page.tsx here we need to import get project add import and now let's do this right here let's just make sure we have project.name and let's make sure this works so let's go back to our browser we'll hit refresh and there we go sanity crash course so we have all the data for that project on this page and check out what we had to do we just did the get project right inside of the function how cool is that so much less code than what next 12 did and we're rendering on the server so we're sending less JavaScript to render this page on our browsers awesome all right so we're in a really good spot I want to simplify sanity utils a little bit more so there's a create client right here there's a create client right here if we changed out our project ID or data set then we would have to change it in multiple places especially if we had multiple functions inside of this file so I'm going to go into our sanity folder I'm going to create a new file say config slash client-config.ts and that creates a new folder a new file and the reason I called it client config is because this is for reading data from our client which in next which is next in this case but this one down here is for creating the studio so that's how I did I differentiate so we're going to say const config is equal to an object and then we're going to export default config and let's go ahead and grab that config from here and let's go to sanity utils and I'll copy all of this right here and I'll paste that into client config all right now that's looking good and now I can go back and do sanity utils and then we can clean this up we can remove all of this and just do it right here we're going to say create client client config and that we're going to get it from client slash client config so now we are importing it from a separate file and we can write it out just like this and it simplifies our code just a little bit and now we're not repeating ourselves in multiple places so I'll do the same thing here I'll go down and paste it in right here just like this all right so that looks good there and this one looks good as well much cleaner we have a little bit more organization in our sanity folder and we're in a good spot but what I am seeing is that if we go back to the site it does need a little bit of styling just like our home page needed so we have our projects on the home page we have a single project page next up let's make sure we style out the page right here so we can get this to look as good as our home page does and we are going to need an um a nav bar eventually so we can get back to the home page from here so let's kick things off I'm going to do some Tailwind styling on this page and we're going to bring in some more content let's go over to our projects page page.tsx and we'll work right in here we have the project so let's start showing more parts of the project so let's go with a header right here and then on this project name this will be in H1 and on the right side we're going to do a href an a tag href this is going to be project.url and title is view project and we're going to do Target is equal to underscore blank so that opens up a new tab when you do that just for some security no opener no refer and we'll say view project close that up close that a tag all right there we go that looks good let's go see if anything changed it still looks not that great so let's start working on that um we're going to go to our main div class name is equal to Max with let's go for 3XL MX Auto so we can Center it and let's go for padding y of 20s so top and bottom of 20. our header here let's go class name is equal to flex so they sit side by side and let's say justify between so they go to the left and to the right so this H1 will go far left this a tab will go far right and we'll say item Center so that they are vertically centered all right that looks good right there let's go ahead and style out sanity.io crash course we are going to style it like we did the home page so if you still have your home page up go there and find that gradient that we did let's see right here we're going to copy this whole thing and so yeah copy that let's go back over and we'll paste that to our H1 so class name is equal to there okay so let's also style our a tag right here class name is equal to background gray 100 let's go for rounded at large then let's go text Gray at 500. and then let's go for um font bold I'm padding Y3 padding X4 white space no wrap so so the button and text doesn't wrap into two separate lines when we do responsive work let's save that let's take a look all right that looks good this is not large enough so something happened there um oh we haven't even filed that one so let's go ahead and add that text 7 XL font extra bold and let's keep it right there and then I think this button also needs a little bit of a hover style so we'll say hover BG pink 500 however text pink 100 and then let's give it a transition so that it transitions between the not hovered and hovered States okay that looks good and maybe a little large on this text right here so let's drop that down to maybe uh let's do 5xl and give it a drop shadow perfect all right that looks that looks good next up let's keep going we're going to add the content right here and then we are going to add the image right here so let's go down here after the header we're going to add our content goes here and then we're going to say image goes here so now to do the content we are going to add a div and then here we're going to say project dot content and this is going to get interesting because this comes back as portable text remember portable text and it's not assignable to react node so we can't just display it like this we have to display it in a special way and this is because it is an array of blocks which is like paragraphs that have bold or span tags or italics or block quotes all kinds of fun formatting that that isn't easy to do right here and let's see what this looks like if we just it just gives us an error right away and it says can't display this so the way we can do this is a new package let's go into our terminal let's cancel that out clear it out and we are going to say npm install at portable Text slash react and portable text is the tool we're going to use to show all of our blocks that we created in the sanity Studio let's go ahead and npm run Dev again we'll close up so how do we use it we are going to go to the top of this file and we are going to say import able text and this is importing a component from at portable Text slash react cool and now we can use this component to display the portable text down below let's go find that and this is a lot better than looping over the project dot content this will just do all of that work for us and we can say portable text value is equal to project dot content like that and that will display our portable text on the site so refresh and there we go so that's all of our text that we had it's just text so it might seem like a lot of work to just to display this text but if we had more stuff in here like bolds or fun formatting block quotes code blocks that would look really good all things to Portable text so let's go style that so on this div we're going to say class name text is large let's go for text Gray at 700 so it's not just pure black mt4 for margin top let's go from margin top five actually yeah all right that looks good and now let's add the image so we're going to go down here and we're going to say image and we're going to import the next image like that right here and we're going to go to the very top and import image from next image yep just double checking so we'll go back down and just like we did on the home page source is equal to project dot image alt is equal to and again you can go into your sanity utils and bring in the image alt I'm going to use project.name right now um yeah so we'll say width is going to be 1920 height is going to be 1080. and then let's give it some classes class names equal to margin top 10 we'll go for Border two border gray 700 so it gets a nice border around it we'll do object cover and rounded extra large so for that rounded corner all right that'll be good for that let's go take a look check it out we have our project page looking really good we have our title our content our project right here um with this image and the link to go view the project which actually goes to the YouTube so very nice and if we go back to the home page I'll just delete all of that right here press enter I can click grok into and all of that is also dynamically pulled in so very cool now the next thing we need to get going to work on is to have a nav bar we need to create a shared layout between the home page and the projects page we don't want to have to create a header and a nav bar in both of the pages that we have right here so if we go to our folder structure we don't want to create a header in here and then header in here as well well lucky for us we have this layout file that next.js already gave us which the layout file will will wrap around everything inside of this folder that it sits in so let's close everything out and if I go into this layout file and I go down here language and body let's go class name is equal to BG pink 500 save that and come back to our entire yeah and our entire site is pink so it's working and then if we go to the main home page that site should be pink as well so anything in layout will span everything for all of our routes so it's working so have that in mind always do here is go here the the body of our content will live right here and I will say Main and then we can have a header here let's go ahead and do link this is going to be an xjs link component we'll say href is going to be the home page and let's go for class name is equal to we're going to do that whole BG gradient thing again so I'm just going to go back to the home page and I'm going to copy this again so we'll copy that let's go back to layout and I'm going to put my name here as the logo as the logo and then let's style it just a little bit more I'm gonna go for text large and font bold now we need to actually have a link right here so we're going to do this and I'm going to import from next slash link and I'll show you that at the top import next slash link right here and while we're here we'll change this to my awesome site generated by the next plus sanity that's just metadata and we'll scroll down all right so we have our header here and that should apply to all of our routes something I also want to do here is go class name let's put a Max width of 3XL MX Auto and let's go for padding y of 10 to the entire site because we did it to the home page and we did to the single pages but let's just do it right here on the main layout now that means I can go back to this page and delete this right here and that's gone and then I can also go to the projects project page.tsx scroll to the top and delete this right here as well all right so let's go back to our site now we have our nav bar right here we have our projects we have our hero section right here let's actually give our spacing on the main let's actually add some spacing on the main as well let's go down here we'll go back to layout down to main let's say class name is equal to let's go for padding y of 20 there yeah now that should get some spacing away from the header there it goes so now that's our header there's our hero and I'll click on a project and we still have our logo and we go back to the home page from here yep and I can click sanity crash course go back to the home page so everything works we have our layout working like it should but there's going to be something really interesting that happens when we update layout so right here and let me close all these files now I want to show you something interesting that just happened if we go back to our dashboard toward Studio notice that our layout applied to the Studio route as well so our entire padding and our Max width and our header are actually showing on the studio page which is not a great experience anymore so with that in mind we have to create a separate layout for the site and a separate layout for the studio now this is interesting because this is a brand new thing for next 13. and maybe going to be hard to wrap our heads around but if we have our layout file this applies to everything in that folder so since we can use our folder structure to Define our routing we can actually in next 13 now use our folder structure to Define organization and what do I mean by using your folders as organization so I can create a new folder here and I'm going to call it site with parentheses around it and I'm going to create a new folder and I'm going to call this studio with parentheses around it so these actually don't do anything for next.js's routing it helps more with organization so if I had a layout file in here that would apply to everything in this folder and then if I had a layout file in here that would apply to everything all the routes in the site folder so now we have two different parts of our site organized using these folders and I know that might sound interesting and let me just keep going and show you how it works so put this layout because it is a site layout in this site folder and we'll replace that one okay so that works out well let's copy everything in the site layout I'm going to copy all of this and then let's go into the studio layout and paste that in and I don't want any of this stuff in here so we're going to delete all that okay and this main right here all of our classes and all of our classes here that's going to be this studio layout and I believe I don't need the next Link at the top anymore yeah and that's it we actually don't need the globals.css here as well because the studio comes with its own styles all right so we can start moving everything over into the correct locations let's get organizing so let's go ahead and say the admin route is going to go into Studio so Studio doesn't do anything for routing admin is where the first routing starts so it's still at slash admin our studio is still at slash admin API routes can stay there can stay right there two projects will go onto the site if I have a con can say right there globals will stay right there page it goes under site so that's our home page right there so even if it's under slash site slash pages.tsx it's still just a home page all right let's close all of our editors there's some stuff going around let's go and close all those and here let's see and make sure everything's still there projects project page.tsx layout dot TSX page.tsx for the home page Studio admin index page cool so admin has its own layout as well and Studio has its own layout so let's actually delete this admin layout we don't need that one and there we go so we have Studio layout let's make sure our app still functions as we remember it we moved around a lot so we'll go back can't resolve globals.css that's because we have to update our import so we're going to site layout all the way at the top here we're going to do a dot dot since we're going up one folder let's go back over and all right the studio still works very nice and let's go make sure our home page works and our site works just like it did before and I can click into that and that works and I have my layout applying to the site only and not the studio side of things in the studio is untouched we can still use it as we did before I am seeing a quick problem here though there's like this border on here I think we actually do need the global CSS because it is a Tailwind reset a CSS reset so let's go back over under Studio layout and we are going to also import globals.css there all right so my mistake we do need globals.css in this file and in our other site layout so let's go over here there we go no weird padding around the edges and our home page looks good as well and that's how we are going to use organizational folders inside of next.js so that we can create multiple layouts for different routes and the child routes underneath each of those routes is pretty powerful stuff all right we have a fully functioning site so at this point we could just end here and say we're good to go we have a great website we have projects for individual Pages which are coming from our sanity studio and that is coming from a project schema type we have learned all about next 13 and how it's server side rendered how we can use our folders as our routing and how we can even use our folders as organization and we have a pretty good folder structure here we've dropped in the sanity Studio but I think we can take a take this a little bit further I want to do one more thing and let's go ahead and talk about it so we are going to add a Pages schema type So currently we have projects we're going to add pages and this is going to be so we can add pages like an about page or a contact page so I'm going to close everything let's close this let's close this and let's go into sanity schemas and we're going to create a new page Dash schema and this is cool because now we have all of our schemas in one folder we have our Barrel file here so let's go ahead and create page Dash schema dot TS I'm going to say cons pages is equal to and very similar to how we did the project schema we could go and copy and change some things but repetition makes for great learning so we're going to keep going here so name is Page title is going to be plural for pages and capitalize and type is going to be document remember name title type and now we get to our type Fields so our Fields arrays we're going to have a bunch of objects so name title type again name is title title is going to be title lots of titles um type is going to be string all right let's keep going here the next one is going to be name is Slug title is Slug and like we did for the project schema we're going to we're going to say type is Slug and like the project schema we're going to add some options here we're going to say options is an object source is going to be from the title but unlike the project one where we did Source over there we're going to also add max length is 96. so you can Define validation there and then the last field we're going to add is content perfect and so just like the project schema this one is going to be a type array and it's going to be of type is block and this is going to be our block content now that's all it takes to Define this object which is our page schema and let's just export it out of this file export default page now we have to make sure that sanity knows about this so we're going to go into index.ts inside of our schemas folder and add it right in here we have project we have page now and we'll do the same thing here we're going to bring that in from page just like that all right so we can make sure that this is coming in from our sanity studio now because it's in the sand in the schemas array so we'll go over to our studio refresh that and now we have Pages fantastic so let's create a couple let's say an about page will generate a slug and I'll just say I am the about page look at all the cool stuff here and I'll put a bold on that we can even put an underline somewhere in there we can just show the formatting on the front page and then we'll do first second third bullet points just to have that okay so publish that and let's go ahead and create another one we'll do contact and the slug will just generate you can find me on Twitter at at kapehe underscore okay and we can even take this right here and click on this link and I'll type it in right here and you can actually find me on Twitter at kapehe underscore okay all right so that URL is on there it is linked perfect so now we have our link we can click publish document was published and now we have two pages that we can work with so let's go back over to our code and we are going to get our sanity utils open and what we're going to do is we're going to create two functions to get all pages and a function to get a single page so just like we did for projects here we have get projects get project I'll do the same thing here export async function get Pages plural export async function get page singular and we're going to pass in the slug and now just like the projects and project we're going to do create a type we're going to create a type so let's go over here to our types folder I'll create a page.ts and you'll notice I'm moving a little bit faster than we did before and that's because a lot of this stuff is what we did in the project schema type and bringing all that data in so we're going to move a little bit faster export type page is equal to this object right here we're going to have ID which comes from sanity created at which comes from sanity as well and that's a date and then we have the fields that we created so title which is a string slug string content which is going to be portable text block and it's going to be an array and we're going to import that portable text block from sanity all right so now we've defined our page type and now we can use it insanity utils and that's the only place we're really going to use it since sanity utils uh we'll pass along to every other page that will use it so we're going to say this returns a promise of pages an array of those and let's make sure we do our import right there and this will return a promise or a single page perfect all right let's type in both of these I'm going to click here and ALT click here we'll press enter and then these are going to start the same way return create client client config.fetch and then we're going to pass in a grot query here just like this with the back ticks and now let's create these separately so this one we are going to say asterisk to grab all the data and we're going to open up our brackets to get type is equal to page so get all the pages now we're going to filter down to what exactly we want so we're going to grab the ID created a title slug remember we're going to create that Alias so slug is now slug.current we should also bring in content here but we're getting a list of our pages and I'm thinking we're going to put this in the nav bar so we aren't going to show the content in the nav bar so I'm going to remove that actually and this is only the stuff that we're going to use so we can create a list of links to each page all right let's do the same thing for down here let's go for asterisks to grab everything underscore type is equal to page and slug dot current is equal to Slug and remember what is going to bring back all the pages to match this it's going to give it as an array but we only want the first one so we're going to do that right there and then we're going to pretty much copy everything that's up here like that we're going to bring it down grab all the same stuff but here this is for an individual page so we are going to go ahead and grab the content this time and let's pass in the slug so that it knows to use the slug and let's also give the slug a type of string just like that okay now we have created both of our functions for get pages and get page and that's kind of how I like to do our setup we will create the schema we'll create some content we'll create our utility functions to go get that content and then we'll create our types to make sure it's all typesafe so looking good first up let's close all these editors and start from a good place we're going to go into the app folder site layout and I'm going to go grab all of our pages right here get all of our pages and I'm going to say const pages is equal to a weight get pages just like that and since we have an await we have to async this right here and get Pages needs to be imported I'll click This little light and Sanity utils so if I scroll up there you can see it's imported from at sanity slash sanity Dash utils now the next thing we need to do is show all of these Pages as links so here in the header right next to the logo I will say div div and then right here let's map over all these pages so we'll say pages.map page and we're going to create a link and make sure we put a key in there because react wants that key so page dot ID is going to be our key we'll close that link cool and then page dot title and we're going to add the href here for Slash slug and that'll be page dot Slug and I'm going to do that right inside of forward slash so that's not going to be slash projects or slash anything else it's going to be right in the home page slash the slug and that's because these are pages so we don't want it to be slash about or we do want it to be slash about or slash contact content contact so let's take a look at where this looks on our site it looks good we have contact and about and each of these links and you see at the bottom left slash about and slash contact so let's style them out a bit so they sit next to our logo instead of underneath so go to the header and you're going to say class name is going to be Flex items Center and we're going to go for justify between so that we can push the contents of this header to the left and to the right and then over here we need to have these sit next to each other so let's say class name is equal to flex item Center and let's give it a gap of maybe three so there's some spacing between those all right that looks good these are a little bit too dark let's go ahead and shrink these down too so Tech small and text Gray Maybe 600. and let's bring up the Gap to about five cool so let's go take a look all right that looks a lot better our logos over there our two links are over there let's make sure we have an indicator that they're hoverable so we're going to say class name this is hover underline let's take a look there we go now it's not the prettiest hover action but it does indicate that those are links just like we did for the projects we want to link over each individual one so let's click on an individual and this will 404 because we haven't created this page just yet so to do that we are going to go back over to our folder structure inside of site we are going to have a new file we're going to say slug is the dynamic route and in next 13 we have a page.tsx underneath it to make it a real route all right so let's export default async function page and that's going to get params from next cool and then we are going to take prams.slug and we are going to get a single project so we're going to say cons project is equal to a weight get project prams.slug we have to fix a couple things here let's fix this params error right here it probably wants to type so we'll say type props is equal to params which is an object that has slug which is a string let's give that to this function right here that one's good next up we need to import get project we'll click on the light bulb and click that to import from sanity utils and next up we have to return oh actually I'm seeing we're getting a project and we need to get a page so I'm actually going to select both of these and type in get page that was a good catch so let's return now a div let's say page dot title and I see I did it again this also needs to be paid right here so sorry about that all right looks good let's just go ahead get all of our styling in right here let's go in there let's give an H1 wrap around this um then we'll do class name and we're pretty much going to copy everything from the project so let's go ahead and go back to projects page.tsx we're going to copy everything in this H1 right here so get that copy that we'll take that go back over to the slug page.tsx and just paste that right in there after our H1 we're going to show the content of this page and we're going to just drop that in using the portable text component so portable text value is equal to page dot content just like we did for project and let's wrap this in a div and give it some styles so we'll do class name we'll do text large text Gray at 700 and margin top 10. and we need to import portable text we need we'll click on the little light bulb and import from portable text react and that should be good enough to show our page content so let's see let's go back we'll refresh and there we go check that out and it even gives the list items but Tailwind by default removes the bullet point things so we would have to bring in something like Tailwind Pros classes to get this to look good but we do have our underline let's click on contact and you see this is a link that still needs styling you could definitely bring in Tailwinds topography plug-in to get some Styles in but overall we have a great site we have our logo that goes back to the home page we have our projects we have our nav that links to Dynamic pages and I'll click about here and it has Dynamic content and if I went back to my studio and added a new page it would also show up right here and the content would be updated as well so really cool stuff and now that we've shown a list of them in addition to a single one of these schema schema types I think it's some good practice for how you can work with sanity studio and next.js applications so we have our application on localhost 3000 running nicely and all of our sanity content is coming from sanity's content link The Next Step here is to get this thing deployed and have a live website so I'm going to go to my GitHub I already made a GitHub repo for this so you're going to need to make a GitHub repo from the code that you have locally if you go into vs code and you go into your git panel over on the left here you should see the little git GitHub icon you can commit everything and you should be able to see a published repository button and that way you can click that and you can create a brand new repo in GitHub all from inside of vs code it's pretty slick so that's what I did and over here is my GitHub repo now we are going to take this repo and let's deploy it to Purcell it just makes sense to deploy next.js to herself so let's go to the dashboard for myversell and I'll click add new and we'll get a new project and we have our repos right here it already shows the one that I just created four minutes ago I'm going to go ahead and click import project name is nexanity framework preset next JS and these defaults are pretty good we don't have to change out environment variables because all of our authorization happens on the sanity side of things so nothing needs to happen inside of this repo we'll click deploy and how easy was that I jumped past the deploy loading screen if you noticed all right so we have our site deployed to this nice little preview and it pulled in the content in the preview let's go ahead go back to our dashboard we'll click on this new project that we just created and we can click visit right here to see this live in a website so there we go just like it looked on local really nice live and accessible to anyone that we send the link to so the next step is let's see what the admin dashboard looks like so I want to show you something really cool let's say that the studio is right here at slash admin and to access our content remember earlier we need to add the following URL as a course origin to our sanity project and that makes sense because sanity security says that you have to Define what domains are going to be able to access your content so I'll get this and we'll click continue and right away it opens up my sanity dashboard I have to sign in I'm going to sign in with Google and and just like that it's already Auto filled so with the course origin and I click add core's origin and it kicks me right back to the studio and I can log in with Google Now and I have access to my live studio from the URL that versell gave me at slash admin so I want to show you something super cool uh here I have the studio up on this tab let's bring the live studio over to the right and I'm using split view right here so the left is the local Studio and you can see localhost 3000 the right is the deployed version and what's cool is if I click into Pages it looks like I am in contact over here you can see that I'm editing this document over on my local Studio and I can click here and now the local Studio can see that I'm editing on the production side on the deployed side and this is API presence API at work so I'm going to go ahead and edit this on the live site and we'll say can't wait to chat and immediately you saw it happen on the left side and look how powerful that is even if you're working in local versus the deployed site you still get that real-time update because all this is backed up by sanity's content like so you can go ahead and click publish here let's go back and view the site so this is going to be this site localhost let's go to the contact page can't wait to chat shows up here and I'll go back to my versel dashboard click visit right here go to contact and on the deployed side there it is can't wait to chat also updated so really great way to see the flow of content from our studio even if you're working locally or on the deployed side it shows up directly on the website and remember next.js uses react server components and takes care of pre-rendering and caching for you so that it's fast all right that's a great look at everything we could build today and we went from having no nexjs website to creating our own next site adding in the sanity Studio so we have a slash admin route to work in and we have our content that we can update that updates on our website as we create it I'll be sure to live leave the GitHub repo in the description below but if you want to learn more about sanity definitely check out the sanity.io crash course uh you can find it on the sanity.io YouTube channel and that's a great way to learn more about sanity and get a full crash course into it you can find me at kapehe underscore okay over on Twitter I always love to see what you're building please let me know if you found this tutorial helpful I love hearing from all of you I had a lot of fun building this and I hope you did too thank you to free code camp for letting me be on this channel and make sure to smash that like button so we'll see in the next one thanks everyone and aloha again thank you so much for hanging out I'm excited to see all of your projects up and running with nextjs and sanity.io if you want to take it one step further you can join the next JS Discord Community you can find more information there and the link to join at nextjs.org blog slash Discord so definitely check that out also the next JS docs are awesome so head on over to nextjs.org docs to learn more about next the sanity crash course that I was talking about as one of my projects can be sound found at sanity's YouTube channel sanity.io sanity.io crash course and then the sanity Community has awesome people that can be found at slack.sanity.io and the handy dandy sanity.io docs can be found at sanity.io docs if you want to learn more about sanity but definitely check out all those links and you can find me on Twitter at kapehe underscore okay if you want to tag me in any of your finished projects I'd love to check them out Mahalo everyone for joining and I will see you around

Channel: freeCodeCamp.org

Views: 121,725

Keywords:

Id: OcTPaUfay5I

Length: 125min 36sec (7536 seconds)

Published: Wed Apr 05 2023