Going Headless - Zero to Next js Hero - Samuel Snopko (StoryBlok)

hi everybody i'm really happy to be here today with you and i really hope that you are enjoying uh so far the conference and uh also i hope that you will enjoy my talk which i will be presenting right now so don't waste any time and jump directly to slides so what is my talk about my talk is about the headless going headless with neck jazz and we will be going from zero so really from scratch to a nexus zero till the deployment on diversal and we will be creating a simple website featuring of articles and a featured article element and we will deploy it into versal and all this we will do using the nexus storyblock and the versa that's great but let's uh first get uh some info about me so who i am i'm my name is samuel snobko and i'm the head of the developer relations in storyblock uh which is partially also this talk about and i was like also from the nine and doing a lot of front and stuff creating application and various technologies so that was enough about me so but it's basically also almost everything i have in slide because i really like live coding and i would like to teach you something and show you how you can create it from the scratch to the deployment if you want to follow me just uh follow the link here in the into github and uh let's now start with the neck jazz so how you should start with nexjs and this was a big question also for me some time ago and i basically came to the conclusion that the best way to start is just use yarn create next app and just name your project and this will create your project with all the necessary stuff and at the end you will end the pro in the project like this so this will be like your setup what you should do next is definitely like test if everything is running so i will just write yarndev and hopefully it will start and i have to restart it so you see live coding is always hard so the local host is running and let's check the localhost and right now at the moment we see on the locale is the welcome screen from the nexus which is really cool and uh basically the nature is set up so what is the next thing we need to set up and there's like the setup of the system where we'll be like uh having our content and in this case it will be headless cm is called cm uh called storyblock and you just create a k count and all that kind of stuff and after that you will you can log in and you will end in the dashboard like this where you can see all your projects or your current spaces as we call them and then you can also like create a new project or new space so i'm going to for create new space and i'm going to give it a name very similar to the project i created it will be going headless nexjs minus showcase and just see that i'm creating really everything from scratch and not going to go for duplicate or i play with demo so okay uh the the first screen you will see after creation is basically the content section where you can also see the home and a little guide as i am your guide today then i will close this guide and uh explain what we can do right now so here is a home which is the first story already created by the storyblock just to fill some default stuff but you can remove it later but i can already click on it and see that there is some visual editor which is not configured right now so that's okay for now and here on the right side there is a editor like content editor where you can see our content so let's focus here on the content and minimize uh the visual editor part and see what's going here so here i have a first component it's called teaser i can change it and i also have a component grid which i accidentally click so let's change the next js conf and i can save it like go to save button i can publish it and like trigger the web hooks on the on the versa or anywhere you would like to deploy it and then after i click uh the uh here the arrow down i can also play with the draft content of i just created and here you can see that okay this is basically my content so there are some columns which are the part of the component defined and then there is a component called feature with a field name uh name and with the value feature one so this is like where you will get is like simple json you would get from the graphql or for the rest api if we connect it with neck jazz that's pretty stark forward and as i said said we can like edit it we can hit multiple times save we can preview the version history all that stuff everything is working but here the visual pro editor or visual prairie is not working and here the first sentence you can read is that we should use this token which is a draft or preview token for our content in the draft mode so how to do that and what we need to do this to connect it with the story block with the neck jazz so we need to like stop our localhost for now and install a few additional packages and i will get there so it's axios which will be responsible for communication between you know the rest communication then there's a storyblock.js client which is basically used to create that storyblock team and uh use exteriors to communicate and get the get requests and all that kind of stuff to get the content so you can use it also in the vendor javascript on any other javascript packages you would like to use it and then we have a storybook react package which will bring one special component we will be needed to make our visual editor even more powerful at it is right now so it will be even clickable and uh we will see a real-time editing uh like experience the changes so let's install it and let's wait a little bit but i already installed it so uh i will jump to the utils folder and then i will create there a storyblock service.js service which will be responsible and configure for the communication with the star block and here as you can see i'm just importing the storyblock client and then i am saying like it will be in dev mode so we will be only getting the draft content for now as this is only as a sample uh talk and not a real uh solution it will be a little bit different in real world so here in the token i need to add my draft token which i get can get here or i can go back into the settings and i can can also create a multiple keys so i could like go for production key but that should be probably saved only in the versa or where we deploy it but for now i will be working with the prior key so let's go back and add it here also i don't encourage you to do it as i did right now because you should save the your private key or token in the dot and file or in the ended or environment variables because this is not a really super secure if you push this into the github on any other versioning system so great this is the storyblock service which then has like a few like uh functions like getting the cache and then there is a getter function to get the content according to the slug and params and some other functions i will get two later but for now i just created a install some packages at a token so let's start one more time our server and see if everything is running so they aren't deaf let's jump to the localhost let's refresh one more time and hopefully to the fast yes great and everything is running so there is no error no problems rude great but still do we see any change in the story here in the home story no we don't see anyhow changing homes so we still see only this guide and i would like to really see here the preview page from the nexus and the question is how to do it it's very easy we just have to like override this your server address because this is the first hint we have like you should add here your server address and then it will be requested here's the page or will be a page shown here which is from that other slash home so let's do in the let's go into the settings and then here in the location the default anywhere we can override this quickstartme.storyblock.com and we are going to override it with the localhost so i will get here the localhost but if i would like already deploy this project to the versa i could also like create a multiple preview urls and create something like a dev mode and add here for example the versa url which will be running also as a preview for my editors or my writers content creators and all those people who are not non-technical people but need to take care of the content so let's save it and let's head back to the story home so in the home story we see right now a change and it's a error and this is a good thing because we see a error from the next jess and basically what is happening here is only that nature doesn't know anything about this home slack so we are asking like hey can you show me the page slash home and if you know something about the negatives then that means that basically here in the pages folder i should have a home.js or maybe our router should know or or should be a mapping there that should say like hey if you are asking for the home you should land on the index.js okay i could code it but i have even better solution for that because i have a little heck for the visual editor as this is more a common use case that the home page has to have a name or some slack which is usually home but in the real world uh it's living on the like empty slash so let's go to the config of this visual like of this story of individual preview and override the real path only for the visual preview so i will override it to the slash save it and at this moment we see the welcome screen from the next gs and that's great so we see that this is kind of progress we see already something nice but still we are here on the right side some content and i already showed the content in the draft json so it could be delivered but still we don't see it here on the left side in the visual uh program or on our localhost so what we need to do is to understand that storyblock is component based so it's built basically on the idea of atomic design and the content is component based content as i would love to say because all the content is in the components and these components are defined in the component section here so we currently have like by default a four component but we can create as many as we need and we can also remove these four so as here you can see i have two types of components one is a content type which from which we can create stories and then one is the nest table component which from which we basically or use them as the blocks and this is from where it's coming also the name storyblock so we have our stories and the blogs so let's open the the simple one so feature is a component which have only one field called name and this field is the tape type text right these are the same thing it's only one field called headline and of the type text great but in the grid it's a little bit special the grid has also only one field we called it columns but it's typed blocks and the blocks means that i can add there any type of block or an stable block i create it and defined so i can also specified and write some restrictions which kind of the components you can use here so for now i would be really happy that in grid i could open or i could add only the features so let's create a like white list only features and i save it and the page which is a content type and not an stable block uh i can i have uh also a body which is type blocks i can use any of the nestable components from here and this is how the story block is working if you think about it you can basically create a never-ending combination of all the ornate stable components you can nest them in each other and this can be so deep that uh as as you need and basically this is exactly what we knew what we do also in nexjs or in the react or in the sweltering view view just so all those component based atomic design frameworks we are using today and which are really cool to use because make uh give us so many possibilities but what is missing why we don't see the prayer here on the home page or in the story so the reason is that we didn't create those components in the snack js so let's head to the next just and fix this so first of all like i will hide this on the right side and uh now open the components folder and as you can see i really cheated the components are already there it's just not working as it should be so let's already but really quickly explain the code of the component so here is the first one the feature component which is very simple html it just render a diff with the h2 and there is a name so the name i showed you in the json and basically the name will be sent here into the component through the con through the prop called block and this is a pattern i will be using more or less in all of my components this very special special thing here is the sb edit table and the sb edit table is coming from the storyblock react package and this will be this will make happening a lot of stuff happening like a little bit outline will be able to uh like click in the next jet application and open also write content in my our content editor so you will see that very soon so keep in mind this adb sb edit table and you will see it everywhere so the next thing would be a teaser the same approach a div which h2 where i'm writing the headline and basically also sbi the table and the prop block so let's go for the grid also the same thing sbit table wrapped uh the undefined uh undefined unordered list and there there is a basically a map function for the field columns which go through the all the nested blocks uh inside or the content inside and render a list items with dynamic component uh as uh as a special component because in this case i wouldn't know which component i should render i don't know each if the the under the list or the grid contents features or the teasers because i didn't write listed before from the beginning so it could be like multiple here could be a different stuff so what is exactly doing the dynamic companies may be the question so the dynamic component is this is just kind of crossroad which will decide which component should be rendered in the time so here if i know about the component so if it's not undefined then i will render the component uh from this object so if i if these are i will should define teaser if it's grid then grid if featured in future uh with where also i will send the block block uh the prop block and then if i don't know the component then i will use a placeholder component which i also created and this place of the component will just render like hey uh this component is not defined in the next.js you should create it in the negatives so how this exactly work is very easy let's see that here in the drive json you can see that this this is one of the cont is a content or object of the content and this is a of the type component either so we have this component which contains the valid teaser that means that this blog.content will return a teaser to me and then i know like ah okay so i need to render there are teaser so this is the this teaser which is this component and import it here and at the end i will import a teaser.js file so easy and so straightforward and i will then use it on the multiple places this dynamic component so if i go to the pages then you can see that also on the page i'm rendering basically a dynamic component because i don't know in what order will be which components and then i am creating the main also and uh basically going through all the all the objects in the body which array of the objects and then rendering those components super easy super straightforward great so you could see that i use a styling like here also on the feature this is a tailoring so i need to also include the styling here of the tailing so let's uh restart a little bit so remove the global css which is default from negligible steam and add the tailwind and let's restart this this is usually faster a little bit in this case of the css and let's see if we see any change here in the editor i'd do a hard reload to see and all we see right now is change of the styling so the tailwind is included but we still don't see the components even i already showed that i have those components there and the answer is very easy for this question it's basically i or we didn't ask storyboard for that content we prepared everything like the whole uh whole environment there in the next but we didn't like still call the get function to get my content from the storyblock and we will do that in the index js file because we are rendering only one page in this uh simple tutorial and basically it's uh only or in this talk and it's only uh home page so this is this code which i'm going to remove right now is the default code from the next theme which will render that nice welcome screen and now i have at least 40 lines of code which basically are responsible for that that everything is also working so first of all i know that always i will be rendering only a pages so and i don't have an article page i will not have a contact page so i have only one type of the page so there is no need to be a dynamic then also like i'm uh creating a layout css js file using where i include uh uh initialize a bridge between storyblock and the nexus which is maybe a little bit a different topic and no it doesn't need to be understand right here but you can check it in the github very easy source code but let's save some time and then i'm also importing the storyblock service which i will be using to get the content so what i'm doing in the component in the component i am creating the state because state has a very cool feature that i can like edit it in the later and i will use that for the real time editing so and this state contains a story uh a story variable with all the data from the properties data story so the rest i will get through the get initial props where i'm expecting a query and i i should use this query basically to get my content but as i am on the index page and always will be asking here only for an index content so i can go directly from a home story so here you can see i'm asking for story uh which is home so this look slack is home which is the name i have here the whole okay let's forget this line for uh for a moment i will get back there later then i will return the result from uh basically that get and that will fill my state then if the component is mounted already then i will initialize the editor which is responsible for the connection between the storyblock editor and the nexus application and at the end i will just render a very simple code like hey render the layout with the page and the content of the page will be the content of the story super easy and straightforward and after the save and if i now show embryo the content of my localhost then we already see the right content and we can play with that content but what we additionally see here is also this outline so i can even go click here and you can see that here on the right side there was there's a right component content open so i can like click here and see it like the preview of the whole page so here's the page and this is the body of the page if i click here i can see the teaser and this is the content of teaser and i can go here and change even the text to hello world isn't this cool so and let's save it and after the save i see even the reload and this is because i mentioned that that ini init editor so initialize the editor as we know that we are an editor we can initialize additional stuff with the storyblock react and this is the sb edit table i mentioned in feature.js where i will send a little bit a code and identifier and then this component is able to identify and also this do this outline that if i hover here you can even see which component i am hovering on so and then also it work this live clicking that if i click on here then it's the right content open on the right side so this is the sb edit table responsible for and this is really cool but how works that save button that it was reloaded for that is responsible the story block service and here in the init editor i basically initialize that i am listening for some storyblock events as i know that i am or in the storyblock even in the draft content and i am not on the production server i know that this is my experiments where the editors and writers are working and they want to see a live changes or real-time changes and do like experiment with the content so i listen here for two events from storyblock which is change and published and this is basically the save button and publish button and if one of the events happened then we do a reload and this is cool kind of really cool but there is one problem with this if you all the time i say hit the save i'm i'm like creating new version in my versioning history of the story and i am really polluting basically that version history so if i did a a lot of small changes and hit like many times save there will be like so many inputs like so many versions that you can it's almost unusable the real in the real time like in the real world this versioning so what you would like to do is do experience without the head and the save and we can do that because we have a modern framework like nexus and the next can edit the state so we can listen for the input from the story block so input even on the story block and through the event we are sending the updated content and then we will be replacing the state so here we are going to replace this state of the like in this case in the home page uh so by the content from the event so here the story is replaced with the even dot story there is a little bit little it's a little bit more complicated just like straightforward replace but basically all you need is these few lines of code where i will get back a little bit later so that's it so if i as i uncommented this code and save it we should now see something more cool like hey let's change this back to hello next jazz conference and you can see that it's live editing as i'm hitting uh and typing so i can also re-order the stuff i can even like copy paste the stuff i can open the grid and select all of that and duplicate the stuff and then i can always like click on the different uh different components reorder and experiment with them i could even like do a configuration here for a styling like do you want the red background or what kind of layout would you have we can create a multiple types it's all possible it's great but the reason why i like it is because the editors writers content creators are able to experience without the savings so they can like check like is this content working really on the mobile devices ah it's not really working let's we should remove this this uh this uh features because it's really like really strange if we have them here so now this is looking bad really better but also like uh does it look good on the on the different resolution yeah okay that works so let's save it and then i will do only one save when i'm really happy with my content and all the editing i did and that's really nice i think like this is amazing but still i've i said that we will be creating articles and this is like the let's let's say hello world sample with all the basic setup explained but let's create articles and let's create a featured section here on the home page very quickly and let's do that in the 10 or 15 minutes i left to me so we will need to go back to the component section of the story block where we create a new content type because probably in the future i would like to render those articles as pages so let's create a new type call it article and it will be a content type not an stable component because it will we will create stories from this so great and let's add there a few fields so first one will be hero image then i would go for a title if i'm correct give me a second i need to check my notes yeah then let's go for intro then out horror and prose where we keep the text of the article and right now let's set up those fields so hero image should be an image probably so i would go for asset and here choose image great then title i'm quite happy with the text it should be a simple text and very short the intro in my opinion should be a text area so it should be a little bit longer but basically not a lot of possibilities for agitation and no restriction the outer there could be like multiple possibilities how to implement this i would go for the simplest one so only one outdoor and uh from the single option as a source of the artist build but also like this component uh definition so i am just going to like define here somewhere else nobco uh let's copy-paste it it's faster and these will be the options for us and dominic will be the the second author and let's say this now one last time is the pros is the where we write are basically our text about the article test text so that could be markdown which is pretty nice but i'm really like more fan of the rich text where we can add like custom classes and other stuff so let's save it and this is cool so it's done i just created very simple article definition it's basically a schema of article i didn't create any article but i now can tell my to my writers content creators or anybody who will be creating those articles like hey you don't have to wait for me till i will implement the front end or for it you can go and create those articles and uh you can do that like pre in pretty nice user with pretty nice user experience i will just create for you a folder for this so let's create a new folder called articles and let's say that this content this folder will contain only articles and let's save it okay open the folder and create my our first article because let's name all the first arctic as my first article that should be the name of every first article so let's save it and okay we don't have a template because we didn't define anything for articles my first article so we would it's logical that we will get an error right now from the verse uh nexjs but let's focus only on the content hide the visual preview so first of all let's add an image so i have a three different images here so this is like first one and let's fill some title and some lorem ipsum here okay and the author was me why not here would be headline and some text and then of course the styling so like let's go for headline two and let's save it okay let's go back and we need at least three articles so we it will take a little bit time wait for it there will be second article i will add here a different image to see in the prior then that we're doing a really different stuff we'll change this to just two and let's change also the outer and wait a little bit oh it's really fast cool save it and the last article will be copy and it will be like third duplicate open add a new image which uh it's okay then this should be a three and this should be my name okay so let's save also the third article and we created three articles that's super and now we need to we want to or i at least want to have a section here in the visual preview like here i would like to have a featured articles like articles i will select by hand and i want them to show that i want that they are shown on the home page so how to do that probably i should add a new block but i don't have a block featured articles so we need to create a new block for that so let's go back to the component create a new component definition call it will be this time nest table and let's call it fee shirt minus articles okay great so i created that and there will be only one field for now i just need to pick some articles so let's create a articles field and these articles i would like to choose from those three artists i already created so this should and i would like to choose also multiple of them so not only one so have the possibilities have like two three or four so let's go for multi option and let's choose a source as stories existing stories and even restrict this only for the articles folder i don't want to like choose a different type of stories i want to choose only articles from the articles folder so let's save it and that's it so basically i created another component right now already second in the in this short time and now i can go to content to home and on the home i can add a new block and already i see here like featured articles great i can add the featured article and as i said already in the next just my placeholder the next js already knows like hey hey hey we don't know this definition you didn't created any component like this in the next chess so we are getting the placeholder here like the component featured article has not been yet created great okay thank you for your information i will create that in a moment but for now let's set also the content and choose all three articles there and let's save it i could even publish it and if we check the draft json then also in the drive json we already see the uids and the components so here's the component called featured articles and the field articles contains the uids of the articles we already created great i think that's that's huge that's nice so let's head back to the next.js and create those that featured articles component and this that's this one article here a featured article that i already prepared of course it's a little bit more html but at the end it's very simple which we forgot is that there's also rendered title that i will have to go and fix in schema very quickly and then here we are rendering the unordered list using the articles basically looping and we are rendering the article tz component so let's check one more time the article teaser component we're just doing nothing else as rendering the title intro and the outdoor from uh the prop that is getting and here also rendering image using the resize function as a resized image function which is doing nothing else as using the storyblock image service to basically scale down and also cut the images to 300 250 so this is a very simple solution and you can see also like the whole article this is very simple okay i think this is this is working good uh this trade format so let's fix the title and oh let's enable it because i didn't import it in the dynamic component so let's import it also using the dynamic component and let's see if everything is working and yes we can see the priority already so let's jump here and let's remove this grid because we don't need it and save this very quickly to see and here is the little bug and that's the title we forgot to add so let's add let's fix at first this so i will open the featured articles by clicking here and here i can also define the schema of my uh of my component so let's add the title right i am adding a title and i like the order so let's keep that on the first place title it should be first and let's save it and now i can fill this so featured articles and this is cool so this looks really nice and there's like maybe two more questions we should answer and that's the first one is like i would like to order this article articles because you don't see it's like three two one's it's kind of random i didn't choose this order so i can do that by clicking here the button and basically right order is so let's make the first one first so with the first two three are and i have all that like life prayer like i can unselect and then select and then like change even the order and this everything is great it's working okay let's keep it like this and there is like second question the some of you maybe ask okay but you didn't send any content there and that's and you are right if you look into json there are only uids of the articles we created there and there's no really content so how we did that and we did that uh if you remember there's like two lines that i said hey remember that for later so in the index js i told uh basically to storyblock service that it should resolve so this is like very basically parameter you should resolve some relations because uh the featured articles here has a relation to articles in the articles field and we just asked like please resolve all the relations in this field and then as there are three articles we are going to resolve them and we will send all the content of the article to also that component so great so that's easy and the same thing we did also in the story block service as we resolve the relations here so if as we are like updating it live in the real time uh on the input event so so straightforward and that's pretty so powerful and because really about the neck jazz and the modern framework like just make this possible that it's so super powerful and super fast as you can see right now and what is even more more cool about this approach is that as we have a component-based atomic design basically i can use these featured articles like i can go copy paste them and add them like on the second place and like change this feature this headline to samuel's articles and like select only my articles great i can save it and i can go for publish and this is it so what would be the next thing i i also promise you to deployment so let's jump so basically my my content here my code is done so let's jump and deploy this so how you would deploy this to versa i will open the versa and i will hit here the import project basically i will go for import git then here i prepare my repo so i already kind of push their imaging then i will add here my repo great let's continue and let's change this to showcase because i already have this project and then deploy and this is like right now a star deploys meant and this deployment would take as the first time like 40 seconds around uh but you can do it much faster but as i am already like prepared i already deployed one one time here uh talk from zero to next j0 and i want to like show you our system something from the settings so the if you go for web hooks you can go for github integrations and here we can create a new webhook which will be like storyblock uh publish uh my my branch is called main so let's create the main branch right and copy this webhook and now i will go back to and one another space which is like the already coded the nexus here and you can here also see the same setup the articles there is also the home page and even it's already deployed to the versa with some preview so it's almost the same thing a little maybe there is a whole name of the dominic of our cio so let's jump back to the settings and let's set up the webhook and all you need to is like basically uh take this very long url which i copied already go here into the webhood in the settings of your space add it here hit the save button and then as you can see that here if i go to genera sorry the overview and visit the page and you can see this is this how the pages look like i can go open the home and i can change this to hello nakedjs neckjs vault and hit the publish button and if i had as i hit the publish button i should see also like the new deployment and hopefully we will see it here in a second and yes there is it so a new deployment i just started a new deployment by one hitting the click and basically set up the whole process in a few seconds so and this is what i wanted to like show you uh in this talk like going from a scratch to a deployment in a matter basically of 30 minutes or 35 minutes and the last two slides i would like to show you on like present to you are that if you want to finish this page by yourself because we didn't finish that there is more of it you can set up the next js with multi-language uh you can have also like us the additional components so if you want to create a project like this like with featured articles header title line a big hero image a little bit uh navigation uh with multiple pages and also like uh english and german version of it just go to storyblock.com slash tp slash next uh minus js minus react minus guide and you will re you can read it's a very long guide and very detailed one but if you like in the general co like consider like how to start with the nexus we created a little surprise for you uh for all of you from the nexus uh conference that we created a negges technology landing page on the storyblock.com tc nexus where you can learn anything about the nexus how to go for headless with ninjas how to integrate with storyblock all the interesting articles and plugins boilerplate uh getting started without even installing anything in your local machine so go there and check it out so and that's basically everything today thank you very much for your time uh this uh next would be a live q a but i am not going to do a live screen because i took a lot of time from the uh from uh the talk and also i'm like in a very different time zone so i will be answering and very happy to answer to any of your questions in the discord channel and also in the story blog twitter or samuel snopko twitter just go there follow me or just write me dm if you want my dms are open and i'm very happy to answer any of your questions and hopefully this will help you in your future nexjs projects i'm very happy to be here and enjoy the rest of the conference see you someone in the future you

Channel: Vercel

Views: 4,892

Keywords:

Id: MVvW4dpNPFA

Length: 40min 28sec (2428 seconds)

Published: Fri Nov 13 2020