Build and Deploy a Blog with Next.js 13 | React, Tailwind.css, Sanity.io | Tutorial 2023

so you want to create a blog with nexjs13 sanity hasn't headless CMS and Haven CSS for styling while you have come to the right video since in today's video we'll create this now the interesting thing is we will do it in just one hour and I will fix live deployment hours with you you will learn a lot so I think let's check out the demo behind me and now let's go so on my screen right now you see what we will build today so right here we have our blog page with all of our posts right here on top we have our dark mode theme switcher and if I click on it we will get white mode and if I reload the page right now you see we don't get any Flash and the white mode is being persisted now if I click on a block article so let me click on the first one it's pretty much instant and if I scroll down we have an image and a text right here I can click back on my logo we got redirected to the blog page and let me click on the second block and that's also almost instant and we have an image right here so that's what will build today so now let's go so to get started I will CD into my desktop directory and CD into my YouTube directory and I will run npx create Dash next Dash app at latest then I will click enter next.js will now ask me or the CLI actually will now ask me for the project name and let's just name it block next 13 something like that then we of course will use typescript we will use ears lint we will use Tailwind CSS we won't use the source directory we will use the app router and we won't customize the import Alias now I will click enter and this will install for a bit so next dress is now finished installing and if I now open my visual studio code you'll see I already opened the project but if you want to open the project as well click on here on top on file and click on open folder but the first thing you will see right here right now is just an empty project with nothing configured and I think the first thing I will do is actually install in development dependency for Tailwind so I will open the terminal and just paste it right here and that's in development of panel C by Taiwan CSS that's the typography plugin and we will use it to style our Rich editor text and if you don't want to write out the comment yourself just go to my GitHub with me and copy it from there but now let me click enter and now you see it has already installed and what I will now have to do is actually go to the table.config.js and then inside of the plugins field right here or in the array of plugins let me paste the required table CSS typography plugin so all it tells tail into ideas pretty much to use this typography plugin and to bundle it and you give me the class names for that and that's all it does and now the next thing I will want to do is actually clean up a little bit I don't need this background image that next JS ships with so let me just delete this whole extend field and let me save that so that looks good and then I want to do a bit more of cleanup since if I go to the page route right here or to our index page in that sense we have a pretty big template right here that next shares ships with and I don't need that so what I will use actually just delete everything so we can start our flash what I will do now is just you an export default function index page and let me just open that function let's just return an H1 with hello from the index page what I want to your nose actually open the terminal and that's one npm1 depth which will start the dev server this will open on localhost 3000 so let me open that so I'm now on localhost 3000 unless you can see the page works so everything is configured correctly and I think we can now continue with actually creating the nav bar and to do that let me open the Explorer right here and inside of the app folder let's create a new folder called components and inside of here I will create a new file called navbar.usx now this component will be a server component so I won't need to use this use client directive so we can continue as it is right now so the first thing I will do right here is an export default function called navbar now let me open that function and let's return something let's start off within div let me style that div so I will give the class name of Max with free Excel MX will be Auto PX will be 4 SM will be PX of 6 not 5.6 and we have an LG of PX of 8. now inside of this diff we will have another div so let me style that we'll have in Flex we'll have a justify which will be between and an H of 16 and then inside of the stuff I will create another div and let me style that so let's give it a class name of Lex just the file will be again between we'll have items which should be Center and width which will be full now inside of the stiff I will use the link component from next which I import also for next and that's pretty much an a tag but you could say it's on steroids because it pretty much uses client-side routing and now you will see that the link component right here hasn't imported for me so let me do it again right here and now typescript complains a bit it tells me that href is missing so right now I don't tell where the link should go so let me do that and the href will just be the index page so I will just use an empty slash and inside of this link let me create an H1 tag and let me style that so I will give it a class name of text which will be 2XL we'll have in font which will be medium and that looks good now inside of this H1 let me write Jan then let me create a new span and let's write just block now let me also style it so I will get the class name of text which will be teal 500 and I think that's all actually now that looks good but if I would now save that and go back you will see nothing right now and that's because I have to pretty much also render it inside of our layout so let me go to the layout.tsx and let me continue inside of here so let me first of all make a little bit of space right here so I can also see something so so that looks good and then maybe that's first of all start with styling our body since I want to use a different background color and we will use a dark theme switcher so let's configure that right here so right here let me first of all use inside of here Optics so I can add a few other class names and then let me just wrap this in this dollar sign brackets and then we can continue with the class names so we'll have in BG which will be white text which will be black then we will have a dark which will be BG gray of 900 then we will also have a dark selection which will be BG gray 900 then we'll have a dark which will be text White H will be full and we'll have a selection which will be BG gray 50 just like that now the body is styled and we can now continue so what I will do right now is right here just use my navbar component let me import that and that will be in self-closing tag so let's do that now if I save that and if I now go back you will still see a bit of weird styling and that's because the globals.css right now has some Styles created from the next JS template and I don't need them so let me just delete that right here and if I now save that and go back you will now see that that looks way better and now it pretty much works perfectly now the first thing that I see right here let me first of all zoom in that you see something that the margin is right here way bigger than here so we have some margin right here but this text or this H1 tag in that sense goes right to the screen and I don't want that so let me change that let me go back to the layout.tsx and let me wrap this children inside of a main element now let me paste back the children and let's style that main so let's give it a class name of Max with free XL MX will be Auto PX will be 4 SM will be PX of 6 and LG will be PX of 8. if I now go back you would see that the margin is now pretty much the same on the nav bar and on the index page or on this H1 tag in that sense so that looks good now one thing I already see is that if I pretty much select this text that the background is white but this should not happen since actually I've styled that and that's because I have misspelled right here I gave it pretty much two columns and it should only have one so if I save it now and go back and select that you will see we don't have this ugly white background now and now I think the first thing we will actually do is pretty much create our Dark theme switcher I think we should pretty much make this logic work at first and then we can continue with our sanity schema and everything like that so let's go back to our code and now inside of here let's again open the Explorer let's go into the components folder and let's create a new file called providers dot TSX now the first thing I will have to do right here is use the use client directive since this will be pretty much on client component which will have state and now inside of here let's again do an export function so let me do that we will just name it providers inside of here we'll destructure the children and the first thing you will see is that typescript complaints since it does not know what type children are so let me just give it type so children will be of type react node and react node is imported from react and now I can open this function and now inside of here I will have to pretty much return on theme provider and for that we have a package called Next themes so let me open the terminal let me stop our Dev server and inside of here I will run npm I and I stands for install next Dash themes now let's click install and let's wait for a second so it has now done installing so we can now go back and next themes is just that you handle pretty much this whole theme switcher so that the preference of the user gets stored and we don't get any flash on reload or anything like that so that's a pretty handy package so we don't have to do all the hard work by ourselves and inside of here I will just have to return our theme provider so I will do a return theme provider and theme providers pretty much supplied by next theme so the package that we have just installed so let me click import and let's close that for now inside of here I will now have to pass our children and I also have to give it an attribute right here so let's do that and this will just be class now let me save that and what we have to do now let's go back to our layout.tsx right here and now we'll have to wrap our nav bar and our main element inside of this providers so let me copy that right here and let's import our providers from our components and let me paste back what I have just copied now one more thing that the next theme package recommends to us is to pretty much suppress hydration warnings and to do that you will have to go right here into the HTML element and just write suppress hydration warning just like that and that looks good if I now go back you will see still everything works so that's good and what I want to do now is right here on the right side pretty much create a button to switch the theme so let's do that right now so to do that let me again open the Explorer and now inside of the components I will create a new route or a new file actually called theme button dot TSX and now the first thing I will have to do right here is again use the use client directive so let's do that and now we can start with this theme button so let's again start with an export default function and let's name It theme button and let me just open this function Right Here and Now inside of here let me create a return statement and let's start off with an button and now inside of this button I want to pretty much check what theme we have right now so next themes has some pretty handy package which we can use so this will just be const and let's do an use theme which we import from next themes and if I now go right here and click control spacebar you will see we get a few uh pretty much options and what I want to get is first of all this set theme so right here and I want to get a result theme so that looks good and now inside of the button I want to pretty much check if our result theme is the Dark theme then I want to show pretty much an um light bulb and if it's the light theme I just want to use pretty much a moon icon so let's do that so this will be pretty much an if statement so if resolved theme is equal to dark let's use internally I want to return something and if this is false I want to return also something and now if it's dark as I said I want to pretty much show a sun or in light bulb or something like that so let's go to Hero icons so I'm now on hero icons and here icons to send very cool free project which you can use to pretty much get icons and right here let me just search for Sun and let me copy this first icon and I will copy the jsx let me go back and let me paste it right here and then for the pretty much light mode let me search for a moon so let me go right here let's search for Moon and let me just copy the first jsx right here or the first icon in that sense and let me paste it right here inside of this return statement so that looks good and now let me also pretty much paste it or not paste it but it also showed in the nav bar so let me go back to the nav buff file and now under this link let me just use the theme button and I have to import that from our components again so now if I go back to our localhost you will still see nothing Let Me Maybe reload that yeah that's because our Dev servers right now not open so let me open my localhost and let's do an npm one Dev now I should go back and this will take some time so I will come back in a second and now our Dev servers restarted and as we see we see the icon right here but before we can actually continue any further we will again have to go to our tailwind.config.js since we pretty much have to tell Tailwind that we want to use not the system dark mode but I want to use the dark mode based on a class attribute so right here what you will have to do a sandark mode and this will just be equal to class now let me give it a comma let's save that let me restart my Dev server so I will do an npm1 Dev and now let's go back so in theory now everything should work so let's now pretty much create the button or the logic inside of the button so let's go back and now inside of this button we have to use the set theme state right here or pretty much to set our state so what I will do is an on click and now inside of here let's do a set theme and now inside of the set theme I want to again just pretty much check if our result theme is again dark I want to pretty much set the theme to light mode and if our result theme is light I want to set it to dark mode so for that I will again use internally so let's tune if we solved theme as equal to dark I want to show the light mode so let's do light and let me spell all that correctly and if this is false I want to set it to dark now if I save that and go back it should actually now work so let me click on that button and yes that works now one thing I already see is if I reload that page right here that actually all looks good but you will see that right here the icon is not the correct one and that's pretty much an hydration thing and that's why next themes actually recommends us to render the soul button client side so what I will do is go back right here and we'll have to create a news effect so let's do that so use effect we have to import that from react and let's just open that and let's give it an empty dependency now I will also have to create a state so let's do a const mounted and unset mounted and this will be equal to use State and this will be false at the initial State and now inside of this use effect I will then set mounted to true and what I will also have to do is pretty much check if mounted is not true then I will I will return null so let me adjust you an if mounted is not true let me just open that and let's return null now let me save that and now let's go back and if I pretty much reload our page we now see that we get the white icon so if we have dark theme we get the Sun and if we pretty much go to White mode and if I reload the page again we get the moon so that looks good and that's what I wanted to see so that works even though I don't really like this approach since we can use pretty much client or not client but CSR so client rendering I don't really like this approach since for example in remix you don't have to do it but I guess that's what you have to do so bear that in mind I guess so we can now pretty much now create our index page or our Blog Page in that sense so what I think I will do at first is actually now create our sanity so I am now on the sanity.io homepage and Sanity is just pretty much an headless CMS and inside of here we will pretty much create and store our blog post so our content in that sense and I really like sanity since I think it's very flexible very easy to use and I also think they're pretty much the best in the business at least currently so to start off I will right here click on developers documentation and right here let's click on getting started if we now click on create a project and scroll down a bit you'll right here see we have a command to create a new sanity project so let me just copy that and let's go back to our Visual Studio code now let me open the terminal let me stop the dev server and let me clear everything and now inside of our terminal let me just pretty much paste that command and all this command does is pretty much create a new sanity application at latest we use a clean template so no predefined schemas or anything we pretty much get empty schemas we then create a project we give it a name of Sanity project which I will change in a minute and we pretty much use the data set which will be production and now let's change the name so I don't want the name to be sanity project but let's let it maybe be block with next JS and now let me click enter and this will take a few seconds and now the first thing you will see is that sanity tells me that I already have an account and that's correct if you don't have an account or if you get any error that's probably because you don't have linked your account or you haven't created one so definitely do that and then come back to the tutorial and now you already see sanity will ask me a few questions and the first one is if I would like to add configuration files for a sanity project in this next.js folder and I don't want to do that so I will click no so an N pretty much then for the project output path let me just use sanity so inside of our Explorer or project structure it will pretty much create a new folder called sanity now I will also want to use pretty much typescript so let's click yes and now this pretty much will install everything or actually it won't because I will have to use some package manager and I will use npm but you can use also yarn if you want to do that so let me click enter and now let's wait for a bit so sanity is now finished installing so let me close the terminal and now let's go back to the website if I now click on create schema it will pretty much tell us how to create an schema and as you see that's the project structure and if I go back and let me click on this newly created sanity folder you will see that's pretty much the same the only difference is that we use dot TS and that's because we use typescript and if I now go a bit further down you will see how we pretty much create a new schema and the pretty much the basic overviews that we have to export default something we have to give it a name a type a title and pretty much the fields and that's pretty much all you have to do so let's start with that so what I will do is again go into the sanity folder inside of the schemas folder and then I will create a new file called post.ts now as you already have seen all you have to do right now is do an export default and let's open that now we'll have to give it a name and the name will just be post lowercased then we'll have to give it a type which will just be document and we will have to give it a title where we just uppercase the P of post so that looks good and now I have to give it a few Fields so the fields are sent away with objects or fields in that sense so the first field will just be the title of the post so let's give it a name and the name will just be title let's give it a type and the type will just be string and let's give it also a title and the title will just be an uppercase title so that looks good and now let's create the next field and the next field will be just a small overview so let's give it a name and the name will be overview let's give it a type and the type will be string and then let's also create a little title and the title will just be overview uppercased so that looks good now the next field I want to create is the slug so let's do a name which will be slug we will create and type which will be also of type Slug and we will create a title which will be uppercase lock now that looks good and the next Shield I want to create is pretty much the content so the which text at the top so let's do that so let me again create a new field right here and let's give it a name which will just be content lowercase let's give it a type which will be away and let's give it a title which will be uppercased content so that looks good and now as you already see we have given it a type which is away but now we also have to pretty much tell sanity what type of away it will be and the type we want to create will be the block type so now under the title we'll have to do an off this will be an array with an object which will have the type and the type will just be block now I also have an arrow right here and that's because I forgot to add in comma and now in theory everything should work and now another thing I also want to do is pretty much allow myself or pretty much the creator of the blog post to add images inside of the witch text so I will have to give it a pretty much another field so let's do that and this will be of Type image and then I will also have to give it fields and this will be again an away with an object and here we'll have a type which will be text then we will have a name which will be alt and we will have a title which will be alternative text now this type of alt is actually not required you don't have to give it just this type image with already pretty much be enough but I use this alt for two reasons firstly for SEO purposes but also for people with disabilities so that looks good so I can now save that actually so what I want to do now is actually start the devs server since I want to see if everything works so what I will do is actually open the terminal and let's CD into our sanity folder and let's run npm1 Dev this will now start our Dev server for sanity at localhost 333 so let me open that and I have now opened it actually and I already see an error and it helps me post CSS cannot read properties of undefined so the error is that pretty much our sanity folder needs its own Tailwind config.js so what I will use pretty much copy or tailwind.config.js file and then paste it inside of the sanity folder right here so just it's pretty much just the same and if I now save that and let me restart our Dev server so npm1 Dev I will again close the terminal and go back and let me reload that and as you see everything works now now we have fixed this error so we can continue now for the login provider you should just choose with which you have created your account since I have done that with GitHub I will choose GitHub and now this will pretty much redirect us to the dashboard or to the studio and now the first thing you see is that no document types have been found and why is that that's because if you go back to our Explorer and inside of the schemas folder and inside of the index.ts you see we pretty much export an empty array but we don't want that we want to export our schema that we have just created so inside of this array just type post and this will import post from our schemas folder so let's do that let me save that and let's go back and now you will pretty much see our schema right here which is post now inside of here I can create a new pretty much post so let me do that and let's see if everything works and yes that looks good to me now one thing I already see that I don't like is that I have to pretty much create my own slug I don't want that I want to put your generator stock from the title and to do that let's again go into the post schema right here and then for our slug let me create a options field and right here we'll give it in source which will be title and if I now go back and if I create a little title so hello for so hello from next.js I can now click on generate and this will generate a slug based on the title so that looks good and now I will create pretty much two demo block posts and if you want to use the same just go to my GitHub with me and copy them from there so I have now created two blog posts so one exploding remix one and right here you've seen content pretty much and we have at the bottom a small little image and the same is also true for next.js I've pretty much created a bit of content and a image right here on the bottom so both of them are now published and now we are pretty much finished with sanity and we can pretty much continue inside of our font end so let's do that right now so the first thing we will actually have to do is pretty much create our sanity client with which we can then pretty much fetch the data from sanity so to do that go inside of your app folder and inside of your will create a new folder called lib and inside of the slip folder I will create a new file called sanity.ts now inside of our sanity.ts I first of all have to install a package so let me go back to our terminal let me open a new terminal page right here and let's do an npm i next Dash sanity let me click enter and this will now pretty much install the sanity client which was made for next JS so I will come back once that's finished so now that's done so let's start configuring our client so what I will first of all use pretty much create a few constants so let's do a const project ID and this will be equal to an empty string we have in const data set and right here I already know the data set since we already pretty much created that when we have installed or created our sanity project and if you can remember the command was pretty much a dash dash data set production so that's why I already know that our data set is production and now the last thing we'll need is some const API version and the API version will just be 2023-01-01 so that looks good and what I will have to do now is an export const client and this will be equal to create client and inside of here let me now pass our project ID our data set and API version not API host and also let's use and use CDN which will be true and all this does is pretty much enables us to use the CDN form sanity so we don't have to pretty much fetch the data every time from the sanity database but we can use the CDN from sanity so that looks good but now I need the project ID so let me go to the sanity.io website so I have now logged in into pretty much sanity and click the project and right here where do you see the project ID so all I have to do is actually just copy that and let me go back and let me just paste it inside of here so that's actually all we have to do our sanity client is now pretty much working and we can now fetch the data so what I will now do is actually just close all the tabs right here on top and now let me open the page.tsx which is pretty much our index page and now I think the first thing we will actually do right here is get our data so let me again open our sanity studio now if you're new to sanity you probably didn't know that sanity uses its own custom query language called grock and they have a pretty quick tab which is called version right here and inside of here you can pretty much test out your query and now if you didn't know how inquiry looks like inside of Sanity or with the language clock all you have to pretty much do is first of all use an Asterix and an empty array if I would now fetch that so let me click fetch you will pretty much see we get all of our items right here so all data but what I want to do is put pretty much get our data which is inside of our post schema so what you will then do is inside of this array an underscore type which will be equal to post and this should only be two equal signs and not three and what I can do now is click on fetch again and you will see we only get two items and that's because we only have created two blog posts so that looks good and now we can continue again so since we have now tested our query and we see that it works what I will just do is now copy our query and now let me go to our code right here and inside of here we can now create a new async function so I will just do async function and the name of our function will be just get data and now let me open that function now inside of here all I have to do is unconst query and this will be equal to our query which I will use with Optics so just like that and that looks good but now our is pretty much static so we also have to fetch that so what I will just use in const data which will be equal to a weight client which we import from our lib folder dot Fetch and inside of here you just pass the query so that looks good and now I have to return that so I will do in return data so now I will also have to get it inside of our font and so what I will just do is now inside of our export default function let me do a const data which will be equal to a weight get data now you'll see we get an error and if I hover over a weight it pretty much tells us that our function so our export default function has to be pretty much async so let me do that so let's do an export default async function and now our error is gone and that looks good now one thing I already see is if I hover over data you see that the type of data is any and I don't really like that what I want to have is pretty much types so what I will do is actually create a new interface so let's go into the loop folder and inside of here let me create a new file called interface.ts and now inside of here I will pretty much create an interface where we get all these Hypes so let's do an export interface and this will have the name of post and let me open that now the first field we have is the title and this will be of type string we will have an overview which will also be string we'll have the content field which will be just any since I don't really know what types we will have and then we'll have an underscore ID which will be also string we'll have a slug and the slug will have an current field which will be string and then we'll also have an underscore created at and this will just be in string so that looks no good so let me go back to our page.tsx and what I will have to do now inside of here is just do an as post so let me do that the post I import from our lip and now that looks good now if I hover over data you will see that the data is of type post but that's not really correct since the post or the data that we will get back actually will be in a way and not an object so while he lets you in post which will be an away and if I now hover over data you will see that the data will be of post away so that looks good and now we can actually create the user interface so the UI so let's do that let's see on return and inside of here we will have a div let me style that div so let's give them class name which will be divide y we'll have a divide which will be gray 200 we'll have a dark which will be divide which of gray 700. now inside of this div I will create another div and let me style that so let's give them class name which will be space of Y2 we'll have a padding top of six and we'll have a padding bottom of 8 then let's also give it a medium of space y of five so that looks good and now inside of here I will create an H1 tag and let me do an all posts and let's also style that so let's give them class name of text which will be free Excel font which will be extra bold then we'll also have a leading which will be 9 I will have tracking which will be tight and then we'll also have a text which will be gray 900 dark which will be text Gray 100 and SM which will be text for Excel SM which will be leading of 10 medium which will be text 66l and MD which will be leading of 14. so now that looks good so I can save that and now let me check if my Dev server is running and it isn't so let me do an npm1 Def and let me go back to our localhost so now inside of our localhost you already see that everything looks way better so I think we can continue now so what I will do is go another H1 and under the div and let's create a new UL tag and now inside of this UL I will pretty much map over our posts so let's do that so let me just tune data dot map will have in post and let me just return that now inside of here I want to create an Li tag and the first thing I will have to do is give it a key since I don't want any react errors and the key will just be post dot underscore ID and then we also have a class name which will just be py or four now inside of here I will create an article tag and I will also style that so let me give it a class name which will be space of Y 2 we will have an Excel which will be good we'll have an XL which will be good calls four we will have Excel which will be items of Baseline and we will have an XL which will be space y of zero so that looks good and now inside of this article tag let me create a new div tag and inside of here let me create a new P tag and let me start that so let's give them class name of text which will be base we'll have in font which will be medium and leading which will be of 6 and we will have a text which will be of teal 400 or actually let's change it to 500 and now this P tag will pretty much store our created add date and if you want to test it out let's do that so let's tune post dot created at and let me save that if I now go back you pretty much see our dates right here or at first you actually see both our blog posts and the dates but I don't really like the formatting of the date so let me change that so let me delete this post to create that and let me do a new date let me pass the post dot underscore created at this will be in two ISO string and then I want to split it so n dot split and I want to split the T and if I now save that and go back you will see that this will look way better but still that does not look perfect and to change that all you have to do is at the end pretty much use the first item in the way so let's do that so away 0 and if I now save that and go back you'll now see that the date is pretty much looking great and it's formatted perfectly so now we can continue so what I will do is go under the P tag and under the div tag and now let me just create a link component or pretty much use the link component from next so let me import that from next slash link and let me pretty much open that now you will see the typescript already complaints and that's because I have to give it the href prop and let me just use again a dynamic value so let's use Optics this will then be slash post slash Dynamic value which will be post dot slack dot current now that looks good now let me give it a few more fields so let me also use the prefetch prop and let's also do a class name which will just be space of Y3 and we will have an Excel which will be called span of two now or not two but three actually now that looks good and now inside of the sling component I want to create a new div tag and inside of this div tag I want to create an H3 tag and now let me style that so I will give it a class name which will just be text of 2XL we'll have a font which will be bold leading will be 8 tracking which will be tight we will have a text which will be gray 900 and we'll have a dark which will be text Gray 100 now that looks good and inside of this H3 tag I want to pretty much show my post dot title so that looks good and now the last thing I want to do is pretty much show the overview so let me go under this H3 tag and under the div and create a new P tag let me style that so let's give it a class name which will be Pros we'll have a Max width of none and text which will be gray 500 and we'll have a dark which will be text Gray 400. now this Pros class name pretty much comes from the plugin we have installed beforehand and if you wouldn't use the plugin so this typography plugin you can use this class name so just that you know that if you aren't familiar with this plugin and now inside of here I want to render over overview so I will join post dot overview so let me save that and let's go back and now you will see that that looks pretty much perfect and we are now pretty much done so before I actually continue one thing you maybe could change is the line clamp so right now over overview is pretty much three lines long but if you want to be consistent you could do a line clamp so let's do a line clamp of two 2 and now if I save that and go back you will see now we have two lines and now this will be always consistent so so if we create a new blog post which will be maybe five lines long we will still only render two lines so that looks good and what I want to do now is pretty much create the details page for our blog so let's do that right now to do that go inside of our your app folder and create a new folder called post and now inside of this post you will create a new fold or not a new but another folder and this will be an array and inside of the array we will have a name which will be Slug and all this does is pretty much create a dynamic route which will pretty much get in Slug since if you can remember we have created this link right here which pretty much links to the slash post Slash Slug and that's pretty much what we create right here we create this post route and then this Dynamic slack Vault and now inside of the slug folder let's create a new file called page.tsx and now that's pretty much finished so the first thing I think I will do actually is fetch our data so let's again do a function called async function function get data and right here let me open that function and right here I want to pretty much fetch our data which matches the slug of our page so what you want to do is pretty much you're in const query so let's do that and this will be equal again to the upticks and inside of here we'll use the Asterix with the array so that's how we always start with block and then we'll have our underscore type which will be again equal to our post so let me do that and now if I would just leave it like that we would again get all of our posts so all of our blog posts but I don't want that I only want to get one specific so let's use a multiple filter let's use a double end and right here I want the slug dot current to pretty much be equal to the stock that I get from the params so what here let's use a dynamic value which will just be Slug and I don't get stock right here so let's get them right here and slug will be of type string so that looks good and now what I will do is pretty much fetch that data so let's do in const data which will be equal to a weight client I import client from our Loop folder dot Fetch and let's pass our query now the last thing I have to do is return that so let's do return data so that looks good and now let's create our export default function so let me do an export default function and let's name it ID page or not ID let's name it select page actually and then let me just open that so that looks good and now inside of here I want to again get our data from the font end so what I will use again in const data which will be equal to a weight get data and if I now save that you will see we got two hours let me first of all hover over a weight and it will again tell us that we have to use an async function so let me change that to an export default async function so that our has now gone away but if I now hover over get data you still see we get an error that's because we haven't passed an argument for Slug and that's correct since we want to get this argument pretty much through our params so let me write here the structure our params and now typescript will give us an error since it does not know what hyperensis so let's go then type so params will pretty much will be in Slug which will be in string just like that so that looks good and now inside of this get data all I have to do is put my Passover programs dot slug so that looks good and now we are actually I think done with that or actually we are not done and that's because I already see two things I don't like if I now fetch that query or our content as it is we will get an oh we will get an away back but I only want to get an object back since we only fetch one pretty much post so right here at the end you use again an empty array within zero since I want to pretty much get the first item inside of their way and that's also the recommended pretty much Way by sanity so that looks good and now the next thing I don't like is if I hover over data you again see our data as any and I don't want that so let me again do an as post which I import from our interface and if I now hover over data you will see that data is of type post so that looks good and now we can pretty much create our UI so let's do that let's create a new return and inside of here let's use an active and now let me give it a class name so we have a class name of divide which will be y divide which will be gray of 200 and we'll have an um dark which will be divide of gray 700 so that looks good and now inside of the stuff let me use an header and let me style that header so let's give it a class name of padding top 6 and XL of padding bottom six so that looks good and now inside of here let me create a new div and let me style that so let's give it a class name of space which will be y of 1 and text which will be Center and inside of the stuff I will create a new div and let me style that div so let's give it a class name of space which will be y of 10. now inside of here I will again create a new div and a new P tag inside of the stiff and inside of here I want to pretty much render our data again so let me first off fault style our P tag so let's give it a class name which will be text of Base we'll have a font which will be medium and we have a leading of 6 and a text which will be of teal 500 and now for the P tag so for our created at date pretty much let me go back to our index page and let me just copy our date right here our function let me paste that inside of here and for our post let me change it to data and if I now save that and go back and let me click on the post so let me click on the first post right here you will see we get redirected and we see our date right here so that works perfectly and I think we can now continue actually so what I will do is go under the P tag and under the two following those and let me create a new div element and inside of this diff let's create an H1 tag and let me style that so let's give it in class name which we have in text or free x cell we have the font which will be extra bold will have a leading which will be of nine we will have a tracking which will be of tight then we'll also have a text which will be of gray 900 and in dark which will be of text Gray 100 and we'll have an SM which will be text for Excel SM which will be leading of 10 MD which will be text 5 XL and MD which will be leading of 14 and now inside of here I want to render our title so let's do just the data dot title and if I now save that and go back and let me again click on the first post you will write here now see if I reload that you will see that we have our date and you see we have our title right here so that works perfectly and now I want to pretty much render our which text so let me go under this header tag right here and let me create an new div element inside of here let's create a class name which will be of divide y we'll have a divide which will be gray 200 and we will have a padding bottom of 8 dark which will be divide of gray 700 and an XL of divide Y which will be 0. now under that or inside of the stuff let's create let's create another div and let's style that so let's go then class name of divide again y divide will be gray 200 we'll have a dark which will be divide gray 700 will have an XL which will be called span or free and I want to create an Excel which will be row span of 2 and an XL which will be padding bottom of 0. and then inside of the stuff let's create another div and let me style that so let's give it a class name of Pros we'll have a Max width of none let's have a padding bottom of 8 and and padding top of 10 and in dark which will be prose invert and then also in post which will be large now that looks good and now inside of the stiff element I want to pretty much render our witch text from sanity but before I do that let me first check if everything looks good on our website so right here we have our page we have pretty much our date we have our title and this little border now if I make it mobile let's check if everything else looks good so let's do it like that and yeah that looks good but I don't want to see this border on mobile so let's go back and right here on the first div let me change everything to only be seen on Excel devices so let's do an Excel of divide y x l of divide grade 200 and an XL of dark divide Grace 700. if I now save that and I go and again go back to mobile you will now see that we don't have this border and this looks way better in my opinion and if I go back to our desktop page at the borders again scene and that looks good so we can now continue and actually show our which text and to do that we will actually need a package so open your terminal and inside of here you will have to do an npmi portable text react and if you don't want to type out everything as always go to my GitHub copy the command and paste it inside of here but what I will do now is just click enter and this is pretty much unpackaged to render the which text for pretty much react so yeah that's the basic overview you don't need to know anymore so let it go so let's give it a second and it's over already finished so I can close the terminal and now inside of the stiff element I will just tune portable text which I import from add portable Text slash react that's doing self-closing tag and now I will have to pretty much cover two params so first of all the value and value will just be data dot content and we'll have a components field and for now I will just leave it empty but we of course will change that so now if I save that actually and go back to our code and let me reload everything you'll see that won't work since I have to restart our Dev server so let me do that and now you will see that our page pretty much works so the basics are done we pretty much render our HTML right here and that looks perfect in my opinion but I already see one thing I don't like and this is because I don't see the image because if you can remember I pretty much created an image inside of the witch text but right now I don't see that so why is that so to make it work I will actually have to use this components property so let's do that let me go on top and let's create a new constant so let's create it right here on top a new constant which will just be called let's say portable text components something like that it's not important how you name it it should only just exist so that looks good and this will now open a new object and inside of here we'll have the types and now inside of these types I will get an image and the image I will pretty much wanted to be shown inside of the image component from next.js so what I will do is right here I will get the image and I will pretty much the structure the value from the image and this will just be any type of any so let's do any and then let me just return it as an hour function and now inside of here let me use the image component from next.js so let me import that and right here it will complain now since I have to give it a source and to make it actually work we again have to install something from sanity I know that's a lot of installing but what you have to do is again open your terminal and do an npm install add sanity image URL and this package is pretty much used to create the images since if you check out what we get back when we fetch the content from sanity you won't see any image URL you only get an ID and stuff like that but I want to get the image URL so that's why I have to use this package and now to make it work what you will have to do is actually open the Explorer go inside of the lip folder and let's create a new file called sanity image url.ts and now inside of this file you will have to do in const Builder and this will be equal to image URL Builder and inside of here let me pass the client so the client is again imported from our lib folder and now already one thing I see is that our image URL Builder is not imported correctly so first of all let me delete the sprockets and I only want to import it from sanity image URL so let me delete the rest from here so now that looks good and what I will have to do now is create a function so let's do an export function and this will be an URL for and inside of here I will get a source unless you have any and now let me open that and let's return Builder and the right here will have a DOT image and we'll pass our source so that looks good and now if I go back to our page right here so what all I have to do now actually is right here create our source and I will have to use the URL for function that I've just created so let me import that from our lip and then let me pass our value and then we'll have to do a DOT URL so here we pretty much renovate the URL for the image now our tier typescript still complains a bit and that's because I have to give it an ALT so let's give it an alt and let's just say image so that looks good and now I also want to add a class name so this will be of rounded LG let's tune width of 800 and let's do a height of also 800 and then I think that's actually good enough and if I now save that and go back I will again have to start my Dev server so let me do that npm1 Dev you will still see we see nothing and that's actually just a mistake by myself so right here we have our created our constant so let me copy that and now inside of our components right here property let me just paste that inside of here so now if I save that and go back you will now see we get an error by next.js and that's because we pretty much have to configure our host name inside of the next.config.js so let me just open our next Dot config.js and now inside of this next config Let's do an images and right here I will have to give it a domains and this will just be CDN dot sanity.io so what you have to do now is to restart our Dev server so let me do again an npm1 Dev and now let's go back to localhost 3000 so I'm now on localhost 3000 again and as you see we still have our text so that works great but if I now scroll down you will also see that we get the image so that looks great and that works perfectly just as I wanted also let me just check out of the other block article works so let me click on my title and as you see the redirect works perfectly and now let me click on exploring remix you'll also see that almost looks instant and we have our ul's right here pretty much we have our text and if I scroll down we have our image so I think that's actually looks great and let me also check if white mode works and yes that looks all great let me again click on our home page and yeah I think we are done actually everything works dark mode rocks the whole storage of our preference Works our theming works our fetching Works everything works we don't have any errors so I think the time has come to now pretty much deploy our application to the cell so let's do that right now so to do that I'm right now at GitHub and I click new repository and now let's give it a name so let me think of a good name let's just say um block next js13 and I will make it public and now let me click create repository now this right here will now give us a few pretty much instructions to create a new repository so let me go back to vs code let me open the terminal let me clear everything and let's start off with a git init which will pretty much initialize a new empty git repository and then the next step is to do and get at everything which you do within dot so that looks good and now if I go back to our website Satori you will see that the next step is to add pretty much our first commit so let me copy that let me paste that and let's change the message to let's say finished website now let me click enter this will now commit our files and now let me create a new Branch so let me copy that and paste that right here now the next step is to add a new remote origin so I will paste that right here and now the last step is to push our code so I will copy that and paste that right here now now you will see our code will be pushed to our repository and if I now reload our git repository you will right here see our code you will see my sanity folder you will see my app folder so everything works and that looks great now one thing you already see is that my times are a bit different so a few things have been created pretty much a minute ago and a few things already have been created a few hours beforehand but for you I will think should be pretty much everything from a minute ago so now we can continue to sell and now let's deploy it so I'm now at versaille.com and now let me import my new repository right here which I've created and right here everything is already done for us they already have created our framework preset and we don't have to add any environment variables so all I have to do right now is just click on deploy and this will now take a bit so I will come back once that's finished so uh you don't see what we should see right now we don't have unfinished application but we have a nice error yeah that's what we want to see right so let's check out whatever was and it tells me that it cannot find the module sanity version and that's correct it shouldn't actually need to find that since I don't want to deploy sanity so what I will actually do right here inside of our root directory I will create a new file called dot versus no and inside of here all I think I have to do actually is just add sanity so just like that and now I think that's done so let's start off again within git add everything let's do and get commit Dash M um everything should work now and let me click enter and let's join git push so now that looks good now let me go back to the cell and you will now see that our application right here we deploys so let me see if everything works and if the error again comes up I will come back to you so great news everyone our project has been deployed successfully and if I now click on it and let me zoom in a bit you will see that looks just perfect just as I wanted to look so I think we are done let me check out if everything works let me click on white mode and if I now reload our page that still says the same so that is good if I now click on the post so let me click on xjs you will see everything loads perfectly and we have our text and we have our image and if I go back to our index page and click on remix one you will see there's also almost loads instantly and we have our text and the image so we are now done it's deployed everything works and I hope you pretty much learned something new you enjoyed the tutorial and we will see us on the next video so bye

Channel: Jan Marshal

Views: 24,925

Keywords: nextjs, nextjs 13, nextjs blog, nextjs 13 blog, sanity.io nextjs, sanity.io blog, tailwindcss nextjs, react tutorial, headless cms blog, create a blog with nextjs, nextjs blog 2023, nextjs 13 tutoria, learn react, web development, headless cms

Id: MqmzrQ1MNG8

Length: 64min 21sec (3861 seconds)

Published: Tue Jun 27 2023