Contentstack Implementation guide: Next 15

this is Tim from content leg and in this video I'm going to show you the shortest way possible with the least amount of code to connect to content stack from next 15 with the app directory and I've opted to add live preview and visual building in it as well because as content stack we feel those are core features before you dive into how this all works we're going to show you all the code and how content that looks there are a few other video in this series that might give you a bit of context one of the more important ones is how to use our CLI to seed a stack with content to be able to actually look at the data that we're connecting to today so that one would be quite handy and also because I mentioned we're using live preview and visual building there is a video that explains how actually that works under the hood like how do we connect from content stack to your website and how do we live update all the data that you're editing right with that out of the way let's dive into this and so in this video what I want to talk about is okay one how do you connect to your stack two how do you then query your stack and then three how do I set up this live preview so it all kind of works in a lovely way right so this is our stack and so if you if you not know yet all these Stacks are projects in content stack right and so in this stack I just created a super simple content type just because we didn't want this stuff to be super opinionated because for your work you will have your own opinion and your own context so this is the simplest we can get it and you take what you need put it in your own project right so title URL which we use to query description image Rich text and then there's modor blocks and so modor blocks are groups of fields you can just add anywhere without make making it a reference so you can actually have multiple blocks attached to this page but you can also have Global fields that are modular blocks right so I have a global block I can now add to any data model that I have and without making it a reference and so if you look at how that looks here you know I set a title as slash it's just a homepage there's an image some description this you can use it for your OG TXS for example some rich TXS and here are my blocks and so I said live preview right and so this code is being set up to also be able to live preview let me just make that slightly bigger for you here and so the cool thing about that basic setup is like when I now click on edit here my title it goes here and I can just add title and it just updates that in my code and so we'll also discuss how that works and then as the cherry on top that same base setup to do this also works for this right so this is proper visual building where you can type in line or I can change my images in line for example and this helps kind of a lot right and I have like let's say I have these blocks here I want to move this one down you just click the arrow and it happens and so this is just an extra loveliness on top that you get with this only 50 60 lines of code that I'm about to show you okay so let's not save this and um let's go into the code so this is next 15 app directory you can see at the time of recording we are at 1517 um I'm sure this will update soon and then once we have the time we'll update this demo as well so we use the content St delivery SDK and the live utilities and so these are two separated packages for the sole reason of the fact everything we build is agnostic right so you can use live preview on its own without an SDK and just use the API directly or you can use only the SDK and no live preview whatever you want and so if you want to know how those things really connect watch that other video I mentioned before all right so we just have a normal page like you have in lots of next projects I did did not add components at the moment because I didn't need to add any opinion to this it's just a one pager essentially and so before we dive in how this all works because there's a little bit of live preview stuff going on I made a lip folder with content stack in it and for the people with keenai you see there's also a types typescript file here and so I didn't make this by hand because I didn't want to what you can actually do is go to your data model here and then on the sidebar we have have a developer app a developer app here you can actually go to the marketplace and just install this and now I can say generate my types please so it looks at all this it knows exactly what this means you copy paste it you put it in your types done no need to do it yourself if you wanted to use the CLI you can also use the TS gen from our CLI um Link in the documentation below so now that that's out of the way um also by the way you don't have to use the typescript even if use our typescript delivery SDK you don't have to have typescript in your own project so you can just omit that if you want to so we make a stack variable and that stack variable connects to your content stack stack and so when you read the documentation you'll see you need the API key I have a delivery token I use a specific environment I have a region because content stack can live on different regions as the CMS platform even you can even be on Asher and like the defaults are AWS in Europe or us you can have Azure you have Google cloud there's a bunch of different setups here so if you do this for work make sure you validate with your colleagues where your content stack instance lives and so there's this live preview property here um I won't go in too deeply but basically here you can say well enable it and the reason we enable it here and also have a live preview SDK is the moment live previews turned on this delivery SDK will get its content from a draft API endpoint just for live preview if it's turned off it will just get it from the CDN so that's an important distinction to make and so let's skip this one for a second because this sets of live preview um we now have the stack right then I made a function to get a page specifically from that stack so we already know our content type is page that's literally this is our content type and then inside all the pages we query where the URL is actually slash and you will see that here I actually get the pit slash well that's obviously this one right because there's a slash for the URL so we're querying that entry and then you know so this is essentially a query for get me all the types for page and filter it to where the slash or the URL is Slash and then find it please and here is where we type it you don't have to do that per se but it's kind of nice to have and so um this is a little bit later I'll talk about this in the SEC because what this actually does is it adds some metadata to your output so you can do visual building click and point to know hey is there enough metadata on this title when I click on it that content knows hey you're editing the title come back to that in a sec so now when we go to our page here we see we use client um if you want to do live preview in client side editing mode that's the most smooth that we have you can use use client so it runs in the server and the client and we can do some fun stuff like when you actually edit an item or an entry in content stack it fires this function and then it requies the draft API endpoint and sets the page State um so this is why this is slightly more complex than normal because Normal what you could do if you didn't have all this stuff you would literally just type that and you have your page and your up and running however now we have live preview here and so what this thing is actually doing is it sets a state for the page and there's a function called get content that queries that page and sets the state and we do this because on use effect so this is in the client site on document ready we make a connection to content stack and content stack gives me an on Entry change event through the iframe post message and so every time you change an entry it fires the get content function and it gets the content sets the page and now your page has all the data that it needs to render and so the moment you open up live preview this function is fired immediately so it will get you you initial data and so the rest of this is very basic jsx or TSX stuff in this case right if I have a page title let me render a header one with a page title inside of it if I don't have it I go to no and so this is quite default right we have to for our description we do it with a next image we do it for our Rich text and we do it for our blocks we have multiple blocks so we Loop over them and then we render them and so for the people looking at what the heck is all this Tim why do you have all that extra stuff here well this is where we come back to this one function that I just kind of skipped right so when we have live preview through what we can do for the entry that you get back from your you know your stack query you can add editable tags and editable Texs are essentially metadata that we add on top of your results from the SDK and with that we know what you're clicking when you edit it right so when we actually have a look at live preview here when I click on this it now knows I'm editing the title and even when I open the form it knows it's the title when I click on this one it knows it's a description so there's a connection here and so the moment you add this function to whatever entry you get back you get this dollar sign here and I think what we could do is just have a little look at log the page or you know what let's log the page title so we'll just go like this let's do this so when we actually go to our front end so this being react it refreshes a few times in local host mode it's all good so this is the homepage title right and so let's now do the same thing oh and add that dollar in between so now what it does it gives you that title and then it gives you a data Property Data cslp content stack live preview and it has page type the ID of the thing we're currently editing then the language and then whatever that field was that you're querying and so so this thing when you look at this it actually does the following let's Zoom that in once more so we have the header one with our title inside right and then there's this data cslb page uid language title when we look at our description it does the same thing but for description when we look at our image that's the same thing but for the image URL and the same thing for our Rich text right and so because this data tag is on there the system knows I can click on this and do stuff and so this can still work without all these data Texs because you can just you know edit something up here and it will still update you don't need the data text but it's kind of nice if I can click on it right and so this was a super fast maybe 50 to 60 lines of code to connect to content stack including live preview and visual Builder and so with this your base setup is ready to rock thank you for watching and happy goting chairs