Crash Course into the Jamstack with Next.js & Storyblok

My name is Jagat and I'm based in India. I think that that information is already out. And I work as a Developer Relations Engineer at Storyblock. And I think, yeah, and you can find me on Twitter.

My name is Arisa, originally from Japan, but currently based in Berlin. But depending on the days and weeks, you might find me in somewhere in the world because I tend to appear in a couple of conferences and speak, but mainly in European time. European, like regions there. So thanks about me. I would say I'm also a same developed engineer at Storyblock like check it. So but the thing is, like, I also work with a couple of, let's say, like different talks and workshops like today. So maybe some of some of you have seen me before. But yeah, it's so I'm happy to see you again. If it's first time to meet you all. Really nice meeting you, and I'm hoping to see you again in some room in the world, too. But for today I'm very happy to have you in here.

This is the link where you can see that this is this is what we are going to be building So yeah, this is this is again just just a normal blog website with a header I mean, with a hero, then we also add a couple of blocks, you can even see the blog page, I think it should work. Yep. And we also will also have this page where you can even see the details of a particular blog. So yeah, I think that's that's most about the introduction here. I mean I think I think we'll be starting up from here. As you can see, this is the schedule, we are also going to have some breaks in between in case if you have any questions or something, then then we are happy to answer those as well.

Let's talk about Jamstack. And as I was mentioning, let's talk a little about the terminology. Let's let's go a little into history, how things used to work, how things are working right now. So let's start with let's start with static pages first. So yeah, what's what's a static page, a static page is something which is delivered exactly to the client side as it is stored. Like I mean, it's it's it's the same HTML which is going to be used by everyone. So whoever is going to be visiting the website, whoever is going to be visiting the page, it's going to be the same HTML, you can definitely change a couple of things over the front end. But it's mostly going to be the same HTML that is going to be delivered to any one of the users doesn't matter whichever user is joining for, I mean, or whichever user is accessing the website from so it's it's like you're always going to have the same HTML code present over there. So that's like mostly static pages where again, it's exactly delivered the way it is stored. Then let's talk about dynamic web pages. Dynamic web pages, they are somewhat where your HTML is kind of decided on the server. So it includes a templating engine, it includes you know, like, let's say, let's say a client is sending a request to your around, have some logic over there, you know, like do a couple of things over there, and then renders the HTML or send the HTML to the front end depending upon the request or depending upon the type or depending upon the user or depending upon any of the use case. So that's like, most of the dynamic web page. And this is how the dynamic web pages look like. Yeah, I also haven't, I also have one of the diagrams with me today to explain you on how that looks. So you can see that the first part of it here, the first side of the diagram, it says that, you know, like I mean, this is the example of static web page. So you can see that the user is requesting, the user is requesting something or user is requesting a page from from the client side. And you can see that it's just like it's it's it's sort of the I mean, it's just this sort of interaction where the user requests something from server and the server then returns exactly the same HTML page as I was mentioning. On the other side, you can see that this is the case of dynamic web pages. So you can see that you request something from the server, then the server goes to the database or find something or server makes some sort of manipulations depending upon the use case or any other thing and then the server changes the HTML behind the scenes and then deliver the HTML to you. So that's that's mostly about, that's just a quick introduction on static and dynamic web pages. There are a couple of, I mean, not a couple of, there are a lot of benefits now. I mean, you know, like you get with the static web pages. The The first one would be fast because it's like it's the same page which is getting delivered. So it's not like that you're applying logic each and every time with each and every request. It's like you just you just get instantly what you have. Then it's cheap. It's because, you know, it's it's mostly related to storage. It's not like that you need a lot of need need a very good infrastructure or need you know, like, I mean, it's, it's it's again cheap because you don't have to perform logic each and everywhere. And it's again easy to maintain because it's again related to storage. So in case if you want to, you know, like have more static web pages to on your server or more more of these sort of pages on your server, you just need to work with the storage. Most of the times it's it's like, again, it's not that you need to configure a lot of things. And it's not like that you need to maintain a lot of things on that. But again, it's secure, because whenever you're sending a request to the server, it's going to be the same thing. It's not that there is going to be a lot of you don't have to worry about the security of the app a lot. I mean, definitely you need to have the checks in place. You need to do the basic stuff which we generally do. But it's like the static apps, the static web pages are more secure. And similarly, they are easy to scale and stable because of the same reasons. It's mostly related to storage. And it's mostly related to, you know, like less number of logic, I mean, less less logic on the server side. So it's like, again, I think these are the benefits of the static pages.

Let's move on. We also have nowadays single page applications. So single page applications are, I mean, you know, like we used to have a lot of static pages back in the day because you weren't able to interact a lot with the web pages that used to be there. So that was the time when we used to have a lot of static web pages. And, you know, like as the time went on, we use a lot of server-side web pages, where I mean dynamic web pages where you apply the logic and stuff like that, but the benefits of the static web pages, they they stay over there. Talking about single page applications, it's like most of the time, one HTML file which is delivered to you on your front end. And then your JavaScript is responsible for hydrating that for most of the times, you know, like regenerating the paths be dynamic or be something it might be static or anything, but it's like you, you won't see a lot of reloading happening inside inside a single page application. I mean, as the name says, it's a single page application and for most of the front end frameworks which we use nowadays. I mean, not not talking about the JAMstack part first because we are obviously going to go there with with time, but talking about React, talking about Vue, talking about Angular if you if you use them in their general mode or the way they were, it's like most of the static, they are single page applications and they're pretty useful. I mean, you can have a lot of dynamic interactions, you can play around with a lot of stuff and you know, you can you can control a lot of things and you can you can play around as I was mentioning, depending upon what the user is where the user is joining from and it gets it gets a lot easier and the loading over there it remains fast. I mean, the dynamic loading, it remains fast and stuff like that.

Let's also see the types of rendering we have. So the first thing I'm showing you over here is server side rendering. So the server side rendering is something again, which where your HTML is rendered on the server, where it's it's sorry, it's generated on the server. Then if we talk about client side rendering, it's like most of the rendering, most of the HTML part which is rendered mostly it's handled by JavaScript, but like, like most most of it it happens on the front end part, on the on the client side, on the client side, so you have logics over there. And everything you see or everything you get most of the times it's happening on the front end the front end plays around with the data it hides some of the data it fetches some of the data and stuff like that. And on the other hand, if we talk about client side, it's like on the on the other hand, if we talk about server side, it's like the rendering everything is going to be on the server side and it's going to be again, giving you the HTML which generates on the server. Talking about the pros and cons of both of the both of the renderings if we talk about service side rendering most mostly, you know, like the benefit which I think most of the time I have with server side rendering is better SEO and social media optimization because the server side can easily indexed, so it's like rendered, HTML can be easily indexed and stuff like that. You can even see a couple of pros other other pros which which are listed over here. So again, you know, like the for example, as it says, faster initial page load. So it says if the client side, I mean, if you use client side, it's going to be like the same HTML most of the times, same HTML page they want most of the time. And it's like, if the first load it is quite complicated when you're using some sort of client side rendering or single page applications, but in service side it's again, it's most of the tricky part is happening on the server and you're getting exactly what you need to see on the front end. So we're side apps. I mean, server side rendering is more secure, obviously, because there is server side code involved. And it's all obviously lower, lower, you know, I mean, it's, it's not very heavy load on the client side applications are on the client side devices, because everything, every logic, most of the logic is being performed on the server. If we talk about cons, you can see that, you know, like, it's overall, overall, a little every every time you need to reload the complete page whenever you're, you know, like, whenever you're moving on to the other page.

If we talk about cons, you can see that, you know, like, it's overall, overall, a little every every time you need to reload the complete page whenever you're, you know, like, whenever you're moving on to the other page. Yeah, I think those are most of the most of the pain points, which which I feel when when working with server side rendering, and you can even see the pages we're going sooner, but it's not not very much interactive. On the other hand, if you talk about client side rendering, you can see that there are pros, like written interactions. Because again, you're playing around with JavaScript on the front end, you can just pretty much anything you want to there is lower server side load, because most of the logic is happening inside inside your client side or I mean, on your client side. And again, it's once once your initial page is loaded, it's like most of the times, you know, like, if you're moving on to any other page, or if you're generating a new page, or if you're performing any logic, it's faster if you compare it to the server side rendering, because everything again, it's everything does not have to go on to the server does not have to come from the server. At this point, you also can have usable UI components. I'm sure that most of us are already familiar with this part, because it's like, again, if you're using any react view or any framework like ReactVue or Angular, most of them, they use the reusable UI components. On the on the other hand, if you talk about cons, again, as I was mentioning before, the initial page load is going to be very slow, because it's like, it's the complete page, which is like the complete HTML, which just comes and then your JavaScript works around. So JavaScript has to render, I mean, JavaScript has to apply the logic. It has to work on the front end side and it has to see what to render. So yeah, it's like slow and initial page load. Then we also have low SEO, because, I mean, I remember when I just started with the front end frameworks, there used to be times when I was building my portfolio and stuff like that, and I was like, I know vue, but now how am I gonna do the SEO part and stuff like that. Then I got to know that most of the times, I need to install a couple of things and it's not going to work super efficiently the way it used to work with static pages and server side rendering. Yeah, those are the cons and there are a lot of dependencies as I was mentioning again, the external libraries and stuff like that. So even if you want to have something for the SEO side, you need to install a couple of things. And that's how it works depending upon any front end framework you're using. I think that was a bit of introduction about the rendering and the type of pages. We can now move to Jamstack and we can see exactly what Jamstack is and how Jamstack uses all the benefits from, I won't say all the benefits, but I'd say benefits from all of the things which we discussed and how it works and what are the terms associated with Jamstack. This is the normal definition which we find on the internet. It says a new way of building websites and apps that deliver better performance, higher security, lower cost of scaling, and better developer experience. But I mean, how does that work? So we are going to see how that works and this, I mean I'm also reading the definition because I cannot ever learn the definition because I need to see how that works. All right, so yeah. So this is how, I found this image and it shows what are the things So I mean, the first thing is this jam. What does J stand for? What does A stand for and what does M stand for? So J over here, it stands for JavaScript. A over here stands for APIs and M over here stand for Markups. So generally speaking from an overview, it's like you need to use all of these things in such a manner that everything gets more optimized. So you need to use JavaScript on the client side and you need to have your logics over there. How you can use JavaScript and then you can use the APIs to fetch the data in case if there's something dynamic, then you need to use the APIs, and then we have the markup, which is the HTML part most of the times. And yeah, I mean, most of the times we do this markup stuff at—I mean, we build this markup stuff on the build time. I mean, we just have those sort of things in place. But it'll be more clear once we dive into it. I mean, as I was mentioning, there are a couple of terms and there are a couple of things which are—I mean, I won't say there are just these hard rules which you need to follow, but it's something if you follow in the JAMstack approach, it's better to—I mean, you can call it more of a JAMstack thing when you're following these things which we are just going to talk about. All right. So mainly it says that you need to generate cacheable static websites or static sort of assets at build time whenever possible. So it's like whenever you are building the app, whenever you are, you know, like whenever you're deploying the app before that, when you build the app, it's like most of the times we want all of these static things generated at that time. So it's like, even if, you know, like let's say, if you're fetching the data from somewhere, it's like most of the times you've fetched that first, then you've built the page and that build page is going to be similar for all of the users or something like that. I mean, definitely you need to, you at times need to have a dynamic part in between, but that's why it says that whenever it is possible and how much I mean, most, I mean, how much it is possible. So it's like, you need to do this sort of static building as much as you can, because the static build, these static assets are going to give us the benefits of the static webpage, which we were talking about. So I mean, if most of the part is already rendered over there, you just need to show it. It's like, you know, like it's going to be easier for SEO. It's going to be easier for you to deliver it because it's not a lot of logic happening all the time. It's not that JavaScript is rendering something which is, you know, like, which is there for all the users each time. It just builds its one. I mean, you just build those sorts of static assets one time and then you just deliver it via the network of a CDNR or any, any, any other thing which you're deploying on. Yeah. So, so yeah. I, I, and that that's the point which I was going to mention next. So it's like you need to deploy these assets on CDN. So it's like, you know, like that's why we mentioned the part cacheable over there. Once you have this thing, it's better that you deploy it on a content delivery network. And you know, like you can, you can use those edges of those content delivery network to provide the user with the faster experience since, since those pages are mostly static. Or since those assets are mostly static, they are anyways faster. Even if you deploy it on a CDN or on a delivery network, it's going to be even faster for a user to, you know, like interact. Or I mean, to get get those pages or get those web apps to themselves. One thing to to mention over here is that these, I think all of these, all of these static assets, which which you are delivering, it's not that, you know, like, I mean, I already mentioned it before, it's not that you cannot have dynamic sort of part of it there. But it's like, once once once you're building most of it, it has to be static. And yeah, I think that's most of it over here. And I can move on to the next slide, which says, again, you need to use JavaScript on client side. And you know, you need to call third party APIs, along with these serverless function for dynamic interactions, which which I was mentioning before. Another thing over here, so you know, like, when we when we have these edge network, I mean, when we when we have the CDN Edge Network, it's like, whenever something changes in your website, so let's say, you know, like, you you are your you have a blog and then you then you're changing something inside a blog, then you need to rebuild that particular page, because it's not going to be like changed again. So you rebuild those sort of things, and this cache has to be invalidated so that the users can then see the updated, updated content with them. So it's like once once it's created, you need to rebuild that particular thing that particular page or that particular part for further user to you know, see see the updated content. Moving on. This is how the this is how the structure looks like. So you can see that generally, it is going to be somewhere on your GIT, maybe you're using GitLab, GitHub, or any other thing we are we are going to be using GitHub today for deploying it to ourself. But yeah, this is this is how it looks. So you change something whenever you want, then that particular CI, CD pipeline, which which you have, it's going to rebuild those sort of pages, maybe the complete website, or maybe the specific pages which you have selected, and that's going to generate these static assets, be HTML, PNG, and the other other static files, which is which which it has. And once those are you know, generated, they are on the they are on the CDN. And the users can access from these points. I mean, user can access any of the pages from these point. And then you have the API's when whenever there is something dynamic happening in place, so you can use these APIs to Yeah, I mean, you can you can use these APIs to generate dynamic content. So let's say if there is a page where you know, you you have some things are there and then you just need to have a little part of it to be dynamic. You can just I mean, you can just request that part from the from from the APIs from from wherever from from any system or wherever you want to. Yeah, let's also talk about static site generators. It's it's a it's a software or it's it's a it's a, I mean, it's a tool which allows you to generate the static assets for any website or any any any project which we were talking. So like, for example, if there is any, any website you're building, there are many static site builders or static site generators, which allow you to, you know, like, extract the static assets from that. So you can just deploy those static assets anywhere. So yeah, as the definition says software that produces and deploys a static website using data sources, and templates. There are a couple of examples I think which are going to be, I think it should be somewhere there, but I think they're going to be in next couple of slides. But yeah, this is how this is how the static site generation sort of flow which which I mentioned looks like, you can see that there is this data that there's the there is the content, there are the templates, you use the static site generator in between, and that is going to generate the website for you. And it's going to give you a static website. And then you can, again, you can you can get the benefits of a static web page, which we discussed with with this with this website, it's going to be faster, it's going to be easier to maintain, it's going to be cheaper and all other things. And today we are we are going to be using next JS as our static site builder. So I mean, we will be using the static site, generation part of next JS with with our code today. So we are going to be using this. Moving on. What is the content management system? It's not like that you always need to use a content management system when you're talking about dev stack. But you know, like, as I was mentioning, let's say you have a blog, which which is coming from any any other place sitting over there. So it's like, you need to have those sort of, you know, like things in place as well.

So it's like, you need to have those sort of, you know, like things in place as well. Why we're talking about content management system right now it's because it's going to be used over here. And we're going to be extracting the data from content management system, just just to let you know what the content management system is. I mean, you can even I mean, you can even say CMS in place, its application or set of related programs, which are used to create, manage, update, you know, like, like, do all these sort of things. For for, for, for your particular website, or for a particular web app, or any other app, you can you can use this content management system to store the content to update the content and stuff like that.

So, yeah, these these used to be the, you know, usual content management systems, for example, WordPress, Trueboot, these, these were the things which were where you, you know, were used to manage the content, these are the monolithic ones. These are the traditional ones, we'll be taking a deeper dive into what monolithic is and what headless is. But this is just to give you an example on I mean, just just to give you an example, or just to show you how these things they can afford. So yeah, the though previously, we used to use these monolithic systems, but but with JAMstack, it's mostly, you know, like decoupled sort of system. So you're you're fetching the sort of data from the API's and stuff like that. So it's like, you cannot be using all of these monolithic systems in place. So there comes the bottom for headless CMS, which is separated or you can say decoupled from the front end. So you can say that the website is sitting over here at one place. And then your CMS is sitting over here at one place. And then you can interact between you can have that sort of interaction. It's not that the front end layer is binded with I mean, it's it's not that the front end layer is with the CMS. I mean, that's why it's called headless, we chopped the head off. So it's like, I mean, obviously not an off or real human being. I mean, in this case, it's just the front end or the presentation, real layer is being chopped. And then you can just, you know, like fetch the data from the CMS to any sort of front end. And today we are going to be using Storyblocks. So Storyblocks is a headless headless CMS, which comes along with a visual editor and we'll be seeing more of the benefits of storyblock in a while. But yeah, this is this is this is the CMS, which we are going to be using today. Yeah, and then you also I mean, while talking about the JAMstack Part, you also have serverless platforms in place. So where you can, you know, like build, deploy, and host your host your application. So for example, today, we are going to be using a Vercel. So that's that's one of the examples of these. But yeah, these are all the terms which are mostly associated with JAMstack. So for example, markup API JavaScript. Then you have a headless CMS, then you have the serverless platforms and a couple of other things as well. So yeah, I mean, that's, that's most about the JAMstack part. And as I was mentioning, we are going to be using Vercel today for deploying in case, I mean, I really hope that we get the time. And I see that I see the time now. And I think I should just make it quick because we have a lot to cover. Alright, so these are the these are the pros of pros of JAMstack. You can. You can assume already that you know we are we are playing around with the static part. We are playing around with the dynamic part and then we get the then we get the benefits combined over there here. So you can see that it's going to give you a better performance. It's going to give you I mean it's it's going to be cheaper. The caching is going to be better, the security is going to be better, it's easy to scale. And nowadays the JAMstack frameworks they are like they are getting better and better day by day. So it's like you can even generate a couple of pages. It's not like that. You need to build a complete website if you are, you know, like if you if you change anything it's like you can just generate or build that that part again it's not like that. You need to rebuild the complete website and again that the SEO is going to be better because there is a static part involved. And I mean most of the times it's like the developer experience. It's it's it gets better with the JAMstack approach because developers are very happy. Most of the times using JAMstack because it gives a lot of power to them on how to how to control the pages, how to control the structure, how to control the data. And most of the times it's the you know like decoupled approach so it's not like that. They are binded to use any specific thing. They can be using any software, any platform and any anything of that sort. There are a couple of problems as well with JAMstack. You can see that sometimes the build time is too high, sometimes you need to generate the complete website even if you're changing some smaller part or even if you're changing some smaller part you need to generate the complete page. So that those sort of things are there then you have the external dependencies and you know like sometimes the cost is I mean it's kind of difficult to evaluate I'd say. So yeah.

What is atomic design? First of all, so it's not going to be difficult and a deep topic for this workshop but if you want to study about atomic design in depth it's quite a deep methodology. So there are a couple of sources that I can show you later on, the links and also you can get access to those for example ebooks or blog posts that are written by the author the creator of the atomic design methodology. But let's get started first to show you what is atomic design like in five minutes. So first of all it's a methodology, it's not about like web design it's a methodology for creating design systems, so that is something completely different from what you know from the let's say design over there it's more of like methods in there. So it has a couple of different levels and the scales of the components and each different levels and the scales of the components are categorized into the different names. So I'm going to show you from like the smallest level and the scale of the component and then covering like the bigger scale and the levels of the components. So the smallest component is described or categorized as atoms, so whatever you see say like a very simple HTML tag in there such as like, let's say, just a label over there, or even like an input, or even just a button. All these three HTML simple elements or the tags are considered as equivalent to the atoms. So all these separated like individual component would work as, or are considered as atoms. But if you combine them, let's say, to create this component to search the inside of this website to find what you are looking for, let's say some relevant blog posts or anything, then it's going to be considered as the molecules. So whatever it consists, let's say the small scale and the level of the atoms are considered as the molecules. So it went up to the next scale and the level. So also keep in your mind that this is the smallest group of atoms. So if you combine with the other, let's say, molecules over there, then it's not going to be molecules anymore. Then it's going to be something else. That is something considered as organisms. So in this case, there is a molecule component that we created or define for searching the site in there on the right hand side. But on the left hand side, there is the navigation and the header. So it means that if you combine the molecules, then it become into another, let's say, bigger and more higher level of the scale. So that is what is called organisms. And if you combine these organisms, then it becomes as a template. So what you can use, the page template to create homepage, blog posts about contact. These are considered as templates. I think to imagine templates aren't so much difficult for you because that's something probably you might be already familiar if you have built a couple of webs out there. So this is considered as the group of the organisms with placeholders. The important thing is that here you do not have the real content in there. So you do not see like the precise images that you want to put into the hero, or you don't even see any paragraphs of the text that you want to or your content editors want to like edit and keep maintaining it. So it has to be with the placeholders. But if you put all these contents into the templates, then it becomes pages. And that is the biggest level or the scale of the component in the atomic design methodology. So we know in general of what is atomic design now, I hope. So here's another question. Why we should go for atomic design or why we should be interested in to go for the atomic design? Well, it's because if you follow this methodology, then means that you can reuse all these components, such as atoms, molecules, organisms, templates, and pages. And it's organized in our systems and components.

So probably you can imagine let's say like if you organize everything to store in where and what, imagine that in your room or your office you can easily work comfortably, right? But if you don't have any systems at all, then you're going to stack up with really chaotic room, right? And you don't want to stay in there, right? So it's exactly the same. So having a system will keep you in order. Also it's scalable because it has the system, that means you can adapt the system to develop into bigger scales instead of not having any systems at all to build stuff randomly. So that's also another thumbs up and it's easy to maintain because if people know what to follow, then you do not need to educate them for quite, spending long time of your precious time. Instead you can tell them that, we follow atomic design and this is what atomic design is and these are the components, what you can reuse to create whatever kind of templates you want to create and that. So here are the sources. I hope I was able to fit into five minutes. So like I said there is an ebook from the author and there is even the blog post from the author, both of them are free. So I highly recommend you to take a look at it.

Let's talk about what a content management system is. So as I mentioned previously, it's an application to, you know, like application on a platform to store, create, manage the content you have. So, for example, the blogs or any of the content, which we saw today like for example, the images coming on that, the final UI, which we saw, those are going to be coming from a content management system and most of the times it's, you know, like most of the times that's the purpose, that's, I mean, that's the type of content which you store mostly with content management systems.

Let's talk about the monolithic CMSs first, then we can, you know, easily compare them with the, I mean, with the headless CMSs. So if you talk about monolithic CMS, they are again called a regular CMS or a couple CMS. So if we talk about WordPress or Drupal or these kinds of CMSs, they are mostly referred as monolithic ones. This is because the, I mean, the front end layer, which you control is going to be coming from those sorts of platforms only. So if you talk about the monolithic system, you can even see the diagram over here, you can see that there is this admin interface, there is this database, there is this view layer, all of the integrations and stuff like that, all of the things are going to be inside that particular monolithic CMS. So it's like, even if you want to have your own designs, or even if you have want to have your own patterns or something like that, that's going to be, I mean, that's something which is not very easily accessible in these CMSs. It's like, because most of the times you are limited to what the CMS offers, the presentation layer, to be specific, is mostly, most of the time is coupled with these systems. So you cannot have your own frontend, you cannot have your own designs, you cannot have your own stylings, you can not have your own custom components and stuff like that. Yeah. As again, I was mentioning about the examples, these are the examples of monolithic CMSs.

And now the time comes when we talk about headless and why headless is beneficial. So yeah. Headless CMS is a CMS or a content management system which is decoupled from the frontend. So, you know, like the diagram which we saw, the admin interface, all of these things, including the presentation layer are at one place in monolithic system. But when we talk about the headless system, you can have the admin interface, you can play around with the content, you can change the images, you can change the text, you can pretty much control everything. And you also have the control on your frontend. So it's like the frontend is not tightly coupled. I mean, it's completely decoupled. It's headless. I mean, again, to mention the head is chopped off over here. So, you have a content management system sitting at one place and then you have your front end on it, and the front end can be anything if we talk about, I mean, it's a presentation layer can be anything. You can even use that content coming from the headless CMS to inside your mobile phones or you can use it for web apps, you can even use it for Alexa skills, you can use it for anything. So it's like the presentation layer doesn't really matter. It completely depends on our hands or the developer's hands where you know where they can just manipulate it or use it the way they want it to be. Anyway, you can. This is how you can use any of the frameworks, be it React, View, Next.js, like we are going to be using today Next or any of the framework with the headless CMS.

Yeah, this is how the architecture of headless CMS looks like. So you can see that we have the admin interface. And this headless CMS also provides you with the APIs and the database. So it's like, a database as in the place where the content is getting stored, not the data tables and stuff like that. It's most of the time content. You can see that you can use this headless CMS and you can even build your own custom integrations. So let's say you want to fetch the data from your own systems, your own external systems, or maybe from an eCommerce platform or any other thing. You can get that data as well inside your headless CMS. Again, because it's a decoupled approach. So you have everything sitting at one place and those things can talk to each other via the help of APIs. And you can see that this is a place where the headless CMS, this is the line where the headless CMS ends and you can use this content on any of the places. Be it web, be it on eCommerce platforms, be it on Android apps, iOS apps, or any other presentation layer or review layer. Yeah, these are the differences between monolithic and headless CMS. So you can see that when we talk about headless CMS, everything is decoupled but in monolithic CMS, these things are not decoupled. They are like, they're tightly coupled. The presentation layer is also tightly coupled. When you're using headless CMS, you get a lot of flexibility, you get to choose the front-end framework, you get to choose the types of content you create, you get to choose most of the times everything because again, it's headless so there is no hard rule of choosing or going with one sort of approach. And, yeah, developer experience and user experience are first-class citizens when we talk about headless CMS, because headless CMSes, they tend to focus mostly with the experience, so when you're using a headless CMS, the developers are going to be happy. The users are going to be happy because, again, they can pretty much do anything. They can extend anything and they can, again, they're not bound to use any specific sort of thing. And, again, this is an Omnichannel approach, so Omnichannel is something where, I mean, nowadays when we talk about marketing or advertising or user accessing the content on different platforms, a user can get the content delivered to them on different, on different, what do we say, on different devices. Like, I can be accessing a website on a on a mobile, I can be using the app for something similar, I can be using some same sort of content on my smart watch or anything. So these headless CMSs, they allow you to keep the Omnichannel approach in a very good manner. I mean, you can play around with the Omnichannel approach very heavily when you're using the headless approach, you can, you know, like you can deliver the same content, same user experience on different platforms, when the user is trying to access the same content on different platforms. So, you know, you make the content at one place, and that content can be accessible from any of the platforms. So you don't have to worry a lot about managing different versions or different places for different channels and stuff like that, you can use the same content for all of the channels. Yeah, and today we are going to be using Storyblock. So let's also see about what Storyblock is and how Storyblock looks like. Storyblock, as we always say it's it's the last headless CMS you'll ever need, because it has a couple of features and we'll, I mean, we'll be going through the features for Storyblock and how Storyblock looks like. If I go over here, you can see that this is this is I mean, these two things. One is the Visulator, and one is the component based approach. These are very heavily, you know, I mean, these are the two things we really invest our time heavily in. Because these are these are the things which make us a little different from from all of the headless CMS is present out there. So if we talk about Visulator, you can see your content getting edited in real time. So that's those sort of things are here and again, component based approach makes a developer happy, because you can literally, you know, like have different components for different sort of, I mean, you can you can have different components for different sort of sections for your for your app or for for for the places where you're utilizing your content art. Yeah, so who can use Storyblock, Storyblock works for everyone. So this is just an introduction of how you can, I mean, how if you're a developer, how you can benefit from this headless sort of approach. Again, as I mentioned, if you are a developer, you can use any of the front end frameworks. This makes everyone's I mean, this makes the developers very happy. They can go with the preferred technology, whichever they prefer. Then we, if we talk about Continuators, they can play around because we have the visual editor in place. So they can play around, they can, you know, like they can they can edit the content in real time, they can edit whatever the developer. I mean, whatever the developer I mean, the components with what developers has already made, they can just play around with those components. It's good for marketers as well, because they can schedule the content and there are a couple of other benefits involved. And it's also good for the enterprises because you can extend in any level. I mean, you can, you can make your own plugins, you can make your own extensions and stuff like that. So again, just I mean, it literally works for everyone. This is a glimpse of the visual editor. I mean, we'll be starting with this and I think Ariesa is going to start with, I mean, she's going to show you how we are going to start with every single component or every little component. But yeah, this is, this is how it's going to look like and you know, like we can be we can build our website with, I mean, step by step, component by component. And you can see that how it's, it's going to work. Now what we have for you is a student blog with React. This is just an introduction, we'll be using this dependency right now, once we start with the code, because this is something which allows, you know, like Next.js as well. We, I mean, inside Next.js we are also going to use the same package, it allows Next.js as well to, I mean, the visual editor, when we look at the visual editor, it allows us to do the live edits, fetch the data from Storyblock and stuff like that. So this is the library which we are going to be using, I think I have a video on that, I think I'll just play that. I mean, the... I need to go to this. I mean, I was just mentioning the first part over there was very important because that's the amount of time... I mean, there was a time... I mean, we have a JavaScript library, the plain JavaScript library as well, which we can use, but with the help of these SDKs or the libraries, which we have built on the top of these frameworks, I think this is the amount of time, which you need... Like the length of the video is the amount of time, which you need to do, just to start with the integration.

So it's like you can literally start with these sort of integrations. I mean, this is integration in no time. You can see that we need to install it first. I think, I mean, once we start, Lisa is going to show you everything in detail, but this is just for an overview. Then we need to initialize Storyblock inside our next application, and there are a couple of other features as well. So, I mean, this use Storyblock is going to help you to enable the bridge which we have for real-time editing, and this component is going to be used for dynamic component rendering. Then we also have this editable function, which allows you to like do the clicks and identify the component, and then do the changes in real time. So yeah, I think that's, that's most of this, that's most about this package. And we are going to be seeing that in more detail in a while. Yeah, I think that's the part which I wanted to cover about Redless CMS. Let me know if you have any questions so far. I'd be happy to answer those and yeah, I think that was it.

Yeah, so far I don't see like questions coming up but instead I just suggested or asked everyone like if that's okay to go over very quickly about intro to Storyblock. And then let's have like five minutes break so we can keep the relevancy into the first fundamental knowledge part. And then after you know, like, keep our minds to be more of a refreshed and we can get into like the hands on part. I saw a couple of response. But yeah, I think, yes, now I see. Yeah, more answers coming up.

I have a few blogs that use Next.js with MDX. Oh, interesting. And I was willing to migrate to Hello! CMS. Does Storyblock support MDX? From what I know, we do not like support like on the fly. Like built in. But depending on how you can, let's say, like build an extension, you might be able to integrate with this feature, depending, again. But as like from what I know, there are a couple of users who have created a couple of interesting extensions. I think that there are some possibilities that you might be able to unlock that feature. Yeah. What do you say, Cekid? Yeah, I mean, as I was mentioning, it's most of the times everything is extendable, so you can make your own sort of field over there where you can play around with the Jsx sort of things. But yeah, I mean, we don't have that thing on fly, so you can, but you can definitely make something similar if you want to. And I'm sure, I mean, not completely sure, but maybe if we search around GitHub, we might even find something related. Yeah. Sometimes, like, I even find out like couple of users have already created interesting, you know, like npm modules about it. And later on, we are also going to cover together, like how you can enable, you know, like the feature to use the Rich Text Resolver. There is actually a module that is also created by the community users. So, yeah, I would say like maybe give a try to search a bit. You might find probably like someone already has built something before you start to create such extension. Yeah. All right. Just to add on that, I mean, you know, like once you start using Storyblock, it's like, you know, like maybe as it's like most of the time, headless, there can be times when you don't even need to have that jsx present inside the CMS. if, I mean, I understand there can be a use case, but you know, like maybe you can make it work where you don't even need those things inside the CMS and you can just have that decoupled approach. Yeah, yeah. All right. As some of the people agree that we can quickly go over to the intro to Storyblock, then I will be very quick to take you to the Storyblock world. But it would be mostly like how you can, let's say use. Let me submit some of the training. How you can use these, you know, like atomic design methodology based approach in the Storyblock so that you did not need to implement such methodology on your end. You can just use it, what is already implemented. So here at the Block library, you can actually see all of the components that you have defined. And instead of, let's say, like creating these kind of, let's say, logic from scratch, you can just simply choose the type of the component. So in this case, let's start to create one sort of the component. And I can show you what kind of types we offer. So start to create a new block by clicking this new block. And first, I'm going to give a technical name of let's say like Contact in this case. Here I can select a block type. Block by the way is a story block terminology to describe as meaning as component. So don't get confused if we use block. It means actually components. So here you can choose like three types. The first one is called nestable block. This is something that you already learn from the atomic design methodology. Like atoms, molecules. These kind of anything smaller than let's say templates. So those components are considered to be nestable block. That means you can nest any of them. Regardless of the levels that you might consider or wonder. So the other one is called content type. This is I would say like equivalent to what is described as templates. In the atomic design methodology. So if you want to create, for example, the blog entry template, then you can just choose this content type block. And then you do not need to duplicate, you know, like many more sane, you know, blog entry content type block. Because as long as you define one, then you can reuse all these. Remember that atomic design methodology is based on the reusability. So that's what we adopt also. And universal block is something that's unique, we tend to get a lot of questions. But I would always like explain as if, for some reason, you don't know which type, either nestable block or content type block to define when you're going to create the components. And define as universal block, because it will behave as both. So it will behave as nestable blocks, something like atoms, molecules, organisms, these like this. But also it will behave as the template, such as called content type in stored block. So if you're not sure what to define the type, then just use universal block, then it will behave as both. So let's assume that I want to create the content block, because contact, let's say this contact component, needs to be made for the page template. So I'm going to click Add block, then now I was able to create the contact component. And that's why I can see on the left-hand side with the overview. By the way, if you want to store these, let's say like relevant group of the components, you can easily create the new group, something like atolls like that, and like that. And then you can easily like store them into the atoms. I'm not going to show this part because it's gonna take longer. So instead let's go back to the contact that I have created. So in here I don't have any field types compared to the other components that are already existing such as feature, grid, page, teaser. All of them have something, you know, like at least one field types. So to define one, I can create a name, something like name. And by default, it will give me the type of the field type as the short text, but of course it's not always the case, right? To change that, you can select here the icon and you can choose the one you want to choose. In this case, I'm happy with the name, so I'm going to stick with that. But let's say like I want to have the contact address and I need to have something longer than short text. In this case, I'm going to choose rich text. Maybe it's a little bit too much, but I'm going to choose, in this case, or you can choose text area too. So I'm going to add in here. And now I was able to store or create two field types into this one contact content type, which is considered as a page template. So if I even want to modify, let's say like this. Sorry, I'm not good at giving names when it comes to naming convention and I don't know what to define. I just wanted to show you the amount of options so that we can see how you can modify the fields or the field types that you created. So to modify, we are going in-depth more than the atomic design methodology. But after we discover and define and use these atomic design methodology, I'm showing you now how you can, you know, create new field types in each components that you've defined. So in here, if I want to, let's say like required field, make it to required field, I can take the checkbox.

Oops, sorry. That wasn't expected. Or if I want to change the source where I want to retrieve the data that are coming into this test, let's say field type, I can change the source from all these, you know, like different types of the places. So stories are again, another storyboard terminology. In this case, we are going to build a blog project. Sorry, their blog on web application. So stories are equivalent to the pages in this case. Languages, if you have some other languages to retrieve the data, then you can fetch from there. There is another feature called data source that is available from storyblog. We are not going to cover this time in depth, but it's somewhere that you can store the keys and the values in there. I just wanted to quickly show you the possibilities of what you can modify to field types. So if I'm good to go with this configuration, maybe change it on the order or something like that, I can hit save. And whenever I want to, let's say create a new story, means in this case would be like the pages, then I can create new, choosing this story. And from here, let's say like I want to create the contact page, that's why I created the contact page template, right? So from here, before it wasn't here, but just because I created and defined as a one of the atomic design methodologies, templates, then there is the contact, so I can create new. And now, compared to the other home story, this contact, let's say page in this case, uses a different template. So that's what I all wanted to show you. How we adapt atomic design methodology and how you can reuse all these components available from stored block site. And all these, let's say like configuration I have made, which is available from block library, all the users who have the higher permissions or the admins, they can do that. So it means that not just you, developers can modify all these and need to help the, let's say non developer users. No, they also can do that for you. And you will have all the information available from the JSON files, one of the JSON files. So in this case, I have used the contact and here you can see some of the slug info and there are a couple of info with there. I didn't add much of the components in there. So that's why you don't see that. But basically you will see all the relationship with relevant components available in the JSON format, which is more familiar or different friendly for the developers, but for non technical people, folks, they have here the block library to configure and see the same. All right, so that was about intro to Storyblock. Does anyone have any questions? I don't think I have something coming up. Ah, thank you, Tekir for answering it. Okay, all right. So we are gonna have a quick break. I would say maybe five minutes. I know we might want to take a little bit longer. I don't know, but we have hands-on fun part waiting for us. We want to make sure that we want to finish our workshop in time. So to do that, let's keep us in track. Let's say that we will be back in, I see that most of the attendees are attending from the Central European time zone. So I would say like Central European time zone 1221. How is it? I mean, five minutes and your clock. So let's say that after five minutes, me and Tekkit, we will also turn on our camera and start to talk about. So if you see both of us started to talk and I see up here on the screen, means we are starting. Sounds good? I see thumbs up. All right, then break time. We'll be right back. So we are now going to the hands-on part. So I highly recommend you to open up this notion note that I shared with you all, let me share it again, because there would be a lot of links where you can directly just, you know, like jump into the dedicated, let's say component files or some few lines of the source code. You can just copy and paste so that we can avoid, you know, like risking you to have some typos and then getting stuck into some unpleasant errors instead. Yeah, we have prepared a couple of quick, let's say, shortcuts for you, including some of the, let's say, sources that you also might want to take a look at it while we are going to together play, together to build the blog app in here. So to get started, I am at this create Next.js up, oop, section. So what we are going to do together as a first kind of tasks to do, we are going to run this npx create next app. So to do that, I'm going to open up my terminal because I'm using a macOS. Let me zoom up a bit. If it's too small, let me know, then I'm happy to scale up. Oop, what is that? That is something weird, copy and pastes, it doesn't work from the function, but let me just type it in. Just a couple of info, if you run this npx command to create the new, create, let me see that, create next app, it's going to create the Next.js 13 version of it. So that's what you need to be aware. And our workshop is not exactly going to use the beta features from the Next.js 13. Instead, we're going to use what it has been tested, then stable. So there are a couple of notes, we are going to inform you that here you need to probably stick to, let's say, some previous, let's say like 12 version of it because of these reasons. And I just wanted to let you know that in this case, we are going to actually generate the new Next.js application with 13 already. But we need to keep in our mind that in this workshop, we are going to use the stable features. So as you also can see properly in your screen, if you're following me, you're going to get a name, let's say like React, DaVinci, you can give any names in here. And I'm just going to create in the most root of my machine. So let's give Next.js a few more seconds, then it will be ready. So which version is needed? Yes, yes, both 12 and 13 will work, yes. And make sure that there are a few, let's say requirements that might help you for preventing to encounter some of, let's say, unexpected errors. So we expect you to have the Node.js with the LTS and NPM or Yarn. In this case, by default, if you generate an Next.js up, they use Yarn. So I'm going to stick with Yarn, but feel free to use NPM if you prefer. We expect you to already have a GitHub account. If you don't, don't worry about it. You can watch the later on the deployment part. That's what we need mostly for GitHub in this case. So Verge.js account is also the same. If you don't have yet, don't worry about it. You can watch it again at the end of this workshop, then you're gonna see how you can deploy your Next.js app. So Text Editor, I'm going to use the VS Code, but if you have any favorite one, JetBrain, whatever, feel free to use that one. Git, obviously, you will need it for deployment to commit any changes that we have made. But mainly, I think it would be better to stick with like if you have, you know, like the working Node.js version of it and using the Yarn or NPM. Alright. Now we have, what did I name React? Lin I guess, right? I guess so. I think you named it my app maybe? No, no, no, no. The most latest one is the React Burning. So let's go there. And then I'm gonna open up into the VS Code. So let's see突. Okay, I hope you also can see your brand new CreateNext app. So here you see the most minimalistic modules that are already installed. There are a couple of directories that are necessary. Okay, thank you everyone for being patient. Now let's get going.

All right, so going back to our Notion note, our next step is to check the app is working. So let's run on the VS Code, Run out to see. In this case, I use Yarn over there. So I'm going to run, oh, sorry, Yarn dev, because there is a script for running the localhost. And it seems like here is the localhost, that we can see that. So let's have a look on the browser if it works. So we should be able to see the very brand new Welcome to Next.js app is running. I hope you have no issues in there, and I doubt that you have no issues, as I was taking the longest time, which shouldn't happen in this workshop anyway.

So the next step that I wanted to do is open up this notion node, the one I'm sharing with you right now, and click this Duplicate link, or this link, both are the same. This is to shortcut your time and our time to have the precise, exactly the same components that we will need for this Next.js blog application. So I'm going to click this link over there, you also can do exactly the same, and it's going to show you exactly the same screen. So now you can see, or you should be able to see, this brand new, let's say, Space MIS project, so up and running in your StoryBlock. So here you're going to see your example space, and into the blog library, where I showed you an intro to StoryBlock. You see all these, you know, more than three components that are already prepared. These are obviously something that we configured for you. So I hope you all can see these components ready in your space, if not, let us know. Yes, you need to have an account of StoryBlock, first of all, it's free to make it. You need to sign in, yes, to be able to let's say clone the space, and to take a look at it. Yes, you can create an account of StoryBlock from storyblock.com. I'm going to paste in here, over here and Discord as well. Let me go to Discord. And then from here, you can click sign up to fill out your info to sign up. If you already have an account, but haven't logged in, here you can log in. So let us know if you need a little bit longer time. Yes, I will be mentioning in the prerequisite from the next time. Thanks a lot. All right. If anyone needs more time, let me know. Otherwise, this step shouldn't take longer because this is simply to create an account, log in, then click this Duplicate. All right. After that, we're going to go through to configure a very few small things from the Storyblock dashboard. So we are going to configure the path of the very root page. Not this. Where is that? Yeah, here. Oh, sorry. This one. Going to close this. So to do that, we are going to go to the content on the left-hand side of the sidebar. And in here, we have a couple of stories and the folder already existing. So go to Home, because this home should be the most root. Don't panic if you don't see the preview yet, because we haven't yet configured where we are going to take a look at the preview. So we are going to configure that together in a few seconds. So what I want you to go is this entry configuration icon from the top navigation part. And from here, when you click, just scroll down to the mouse button. So here you can find the real path. This real path, if you have clicked this magic link to duplicate exactly the same space, then you should actually already have this just single forward slash ready. So the reason why we do is, well, I can show you actually, if I remove it. If I do that save and clone, then you're gonna see this unexpected home slack being added in the end. And this is not what we want because imagine that sampling.com forward slash home doesn't look pretty, right? So that's why we modify our real path from the entry configuration of the real path over there. So I'm going to fix it by adding the single forward slash and save and close. So now the slack has been replaced, like instead of having extra home over there. So I hope that wasn't too difficult. And instead we are going to configure where we are going to take a look at the preview because this is not obviously something you wanna see. So from the change URL, if you click, there is an option to add or change preview URL. So this is what I'm going to click. Let's click this big green button. Then it's going to direct us to the settings of the dashboard. So and even to the visual editor. So in here location has been set to something like a default value, which doesn't, I would say like that's not the value we want to see. Instead, we want to see the local host 3000, right? So I'm going to here. I'm going to go back to here, copy that local host from the visual editor, and then replace it. And I'm going to add the forward slash in the end because what if I want to add some of configure slack later on. I don't want to have 3000 and then a suddenly about or contact, we need to have the forward slash. So I'm going to hit the save button. I'm going to show you one another screen or one another step until you get to reach to be able to see this welcome to Next.JS screen because there will be important steps that you want to take a look at it. So let's go back to the content and the most root of the story which means page home. And here. So now instead of, you know, like something error log that we saw before, now you can see HTTP is not allowed for the security reason. We want you to configure the proxy. And we have prepared two methods. Method one is something recommended. So first of all, you can install a couple of, let's say proxy related modules in there. If you haven't yet installed, it might take a little bit of time. So I highly recommend you to execute these commands now. And I try my best to wait if everyone is following it up. If you have any issues, let's say following this method one, and I highly recommend you to go through the method two for this workshop if the method one is not working so that we can, you know, like keep continuing the rest of the workshop content. So method two is something more of like a quick patch, I would say if the method one doesn't work. So you can just simply create the static HTML page that should be named as editor.html. And you can copy everything from here. If you do not see this screen for some reason, just in case right there, we have a backup, don't worry. So going back to the Notion page and in the mouse bottom of our Notion page, here is the HTTPS proxy resources available. So there are a couple of people probably using Windows different configuration. So we have the resources available from these blog posts or FAQ, more likely. Here you can follow just copy and paste the source code for the method two or even for the method one as well. I would give a little bit of time for people just in case to follow that. Yes, I see a question, where to put the token I see on the page? Good question, really good catch. I haven't yet actually covered that part because first we need to configure how to see the preview. And then later on, I'm going to show you where you can actually store or put the preview API key token value, which is going to be actually in the source code level. But it's really a good catch. Yes.

Arisa, sorry. It's rather, I wasn't really sure where, how to follow all along at all because of the registration. And then I lost completely the track of where you were going. How did you get, how did you land on this page at all?

No worries. It's good that you asked us. Thank you so much. And to, let's say like show you like the good overview, how we are at in this current page. First, you can log in if you already have an account from the story block or you can create an account from storyblock.com you can actually do that from this URL I have posted into the zoom. I did create an account already.

Okay, cool. Cool. Okay, so after that login, then after yeah, okay. Then in this screen you see a one or something, you know, kind of project going on. And after that go to the Noshem page where we put all the important notes in there because from there I'm going to show you where you can find the link to clone the space here. So go to create brand new space and either just duplicate or the link below then you will be able to duplicate the exactly the same configuration of the components for this workshop blog application. So just click duplicate or click this link then it will generate you the brand new storyblog space.

And then- I did everything but, so page then afterwards. Then afterwards, I think you're going to see this your example space with get started kind of screen do you see here? Yeah, all good. Okay. Okay. So after that, you're going to go to the content on the left hand side from the third element over there. And in the here there is a home. So if you go to the home, I think you might see like one line of the error log showing you. Do you see that? Yes, I do see.

Okay. Okay. Okay, good. So after that I know it's already configured, but just for your knowledge, go to the entry configuration icon. So from here all the way to the bottom, if you scroll down, there's the real path and here should be one single forward slash. Is it like this in your environment? Yes. Good. Good. After that, you can just close because you didn't make any changes. And to fix the preview, you can click change URL in here. And then after that, there is a big green button says, add or change preview URLs. So click this huge green button, then it will direct you to the settings and the visual editor. Do you see the visual editor from the settings screen? Yes. Awesome. Awesome. So here at the most top input says location, this is something else in your case, I guess. So just swap into the localhost 3000, where the default year create next up is running. And I highly recommend you to add the forward slash in the end because we are going to add the couple of additional slugs later on, and it will be helpful. So after you change this location input, then the save button should be colored something instead of grayed out, so hit the save button. Then after that. Going back to the content from the left hand side of the sidebar, and then from here, going back to the home story. So I'm going to click home. So in here, instead of seeing just one single line of the error log, now you should see the HTTP is not allowed. Do you see the same screen? Yes, I do. Awesome, awesome. Yeah, so after that we can follow either method one or method two. So method one might take a little bit longer time, but that is easier for your future, let's say uses, so just run these three commands first, and then the fourth later on, it might take a little bit longer time, or if you have, let's say like something issues while you're configuring the proxy with the method one, there is the method two to simply create a static HTML file called editor.html, and here is the code where you can copy and paste. So this exactly same information is on our notion note, on where we are following the steps one by one, so in the most bottom of the part, you can see exactly the same proxy configuration, so if you don't see for some reason, let's say some source code on the visual editor, which should be there, you can always take a look at the notion notes. I hope that was clear. Yes. Thank you. Awesome. Awesome. Yeah and if anyone has any issues or like, let's say I go too fast, let me know, we try to do our best to finish our workshop in on-time, but at the same time we also don't want to leave you behind. So let us know if that's the case, feel free to drop the messages in the chat at Zoom or Discord or speak out by unmuting it. Okay. I assume that, most of all, the people have already successfully configured. Is that right, Chikit? You see any chats coming up? Yeah, I think most of the people are there. I'm not sure how many people are already, I mean how many people have the proxy thing already running up, but I think- Yeah. Everyone should be there now. Okay. Okay. If not, let us know. So, for not taking anymore time, if everyone is ready, I'm going to execute this line of the code because I'm taking the method one. If you're taking method two, you don't need to do. So, I'm going to copy over this command right here. The target should be 3000 because that's where the default Next.js application is running at the moment. So, what I'm going to do is that I'm actually going to... Just one question, Arisa. Yeah. I haven't used the second thing where we use the HTML file inside. There is a question inside? Yeah. This should be in public folder. So, I'm going to show you the VS Code. So, there is the public folder already there, right? So, inside in this public directory should be this static HTML file. Okay. So, I am going to paste this last line of the proxy configuration, and I'm going to execute, but make sure the target is in 3000. So, I'm going to do that. And now, it's going to show me that, okay, it has been now configured. And I'm going to copy over this new localhost, 3010. And what I'm going to do is going back to the Storyblock visual editor UI, and again, going to click this change URL, because I want to add this new proxy configured localhost path. So, to do that, same follow, same steps. Click this green button, says add or change preview URLs, and going back to the visual editor from the settings. So, next up I'm going to add in this case, add the preview URLs so that I can switch between multiple different preview URLs on the visual editor. So I'm going to paste on the right-hand side of the input. And I'm going to give a name like something proxy configured, like that.

You can give any names as you wish. After hitting add button, and make sure to click save button. And now, I should be able to switch between this local host 3000 and 3010. Oh, I forgot to add the forward slash. So make sure to do that on your end too. I'm going to hit save. I see a couple of questions coming up. I should be changed for the method 2. Irina, I'm not getting what do you mean by that. Do you mean to describe a little bit more details? Maybe like while I'm showing like after how you can configure or save the new preview path, check it, can have a look at what answer. I think maybe it's about the HTML file. I don't need to change anything. No. You just need to copy the source code that you can also go back to the NotionNode and see here, and then create the editor.html file in Android the directory of public over there. And that's all for the method two, if the method one doesn't work. So I have added this new proxy configured localhost preview. Saved it. So let's go back to the content. Going back to HomeStory. And then let's change this URL into this new proxy configured preview. So now I have successfully enabled, let's say proxy configured visual editor configuration. I mean, not get completed because I cannot interactively or let's say dynamically can add the components or change the content in there. Just that I was able to create the link at least from the default local host that is running from our brand new CreateNext app. So, OK, Thomas you still get the HTTP error with method two. What kind of error messages you receive? Do you mind to paste in here. HTTP is not unknown. OK. OK. Let's go back to see the steps together again. So to do that, I'm going to switch back to the 3000. I recommend you to take a look at if you follow the method one. Make sure that you do not have any misspell, follow the steps for method two, also the same, copy and paste. If it doesn't work, there is another escape hatch in this case, which is not ideal, but for the time conscious for this workshop, I would introduce. So the UI you are taking a look at right now is the newest UI that is called v2, but it means that we actually had the old UI code v1. So from the older version of the UI, you didn't have to configure the proxy. So this is not an ideal solution again, but from the time conscious, I'm going to introduce you. So here if you go back to this, let's say like the dashboard page, there is a back to v1 option. So if the method one and method two for some reasons didn't work at all to save your time back to v1, then you will see different UI in here. And if you go to home and with this 3000 local host, which is not configured with proxy at all, you see the preview ready in here. This is again, not an ideal solution. And I know that we are going to deprecate this v1 UI quite sometime soon. So after this workshop, I would say that make sure maybe double check the methods that you followed. If you follow the same in here, it works. If not, let us know. We are happy to see how your journey goes after the workshop. So you can follow us on Twitter and even can ask us in there or Discord even. Storyblock also has the Discord too. And also this React Day Berlin's Discord channel as well. OK. I hope this quite sneaky escape hatch worked for you. If even not, let us know. Then it should be something other issues going on. OK, I think, yeah, I think everyone now can see the preview, right? If not, again, let us know. All right. Going back to the Notion page to see what are the next steps. So I'm going to go back to a little bit above. So we have configured the preview URL, and now we are going to connect with Storyblock, which is going to be a couple of, let's say another configuration, but you're going to install a couple of modules and let's say, get the preview API key token that is coming from Storyblock and stored into our Next.js application. And to do that, we are going to install two modules. So one is called Storyblock React. If you click this read more, you're going to see the read me off our SDK. So this is actually a React SDK that you can use also into the Next.js app because it's based on React, right? This framework itself. So you can see all the necessary like information about usage and some of the, let's say parameters, important parameters that you can configure by yourself. I'm not going to go too deep because this could be another workshop amount. To prevent that, I just will tell you that install this Storyblock React. And also we want you to install Axios at this point. I know that quite a lot of you might already know that Axios is not an ideal to use, I don't know, for a couple of, let's say, the projects, but we are actually working on to remove that. Probably very soon we will be able to announce that, hey, you don't need to install Axios anymore, you can be Axios-free. But we are still working on a little bit to finalize our work. So for today, we want you to experience the stable version of it with Axios. So that's why you can install by, let's say, like copying in this command in there, if you use Aron, if you use NPM, the command would be a little bit different, but let's quickly get it done. So going to shut the localhost for a second. And I'm going to, there's some reason this copy and paste really doesn't work in my case. I have no idea why, but let's say, For a block react and Axios with specific version of it, which has to be 0.27.2, 0.27.2. So let's add them. And by the way, you don't need to add it to the dev dependencies, you can just add it to the dependencies of there. So make sure the Axios follows this version of it because the newest version of Axios has a little bit of like kind of glitch with our current story block react SDK. And we are working on to fix that along with removing Axios option. So make sure that you follow this version of it. I hope you were able to install all these. If I'm going too fast, again, let me know in the chat and Ceget can, you know, like, let me know, you know, like if I'm going too fast or if you encounter some of the issues. All right. We have installed two packages and let's initialize the story block API into the underscore app.js file. So we are going to use the special API that is coming from story block react SDK. So if you click this story block in it, you will be directed to the exact, let's say lines of the code, where you can just copy and paste into the underscore app.js file. This, let's say like entire code is already completed repo that you can also, you know, again, copy and paste if something goes wrong and not working. But to follow, let's say the learning purposes, I highlighted the lines of the code where you need to copy and paste. Let's copy these lines of the code and open up the underscore app.js, which is in the pages. In here, I'm going to paste into, after the input, and obviously I haven't yet imported the Storyblock init API that should be coming from Storyblock react SDK. What I'm going to do is that I'm going to copy this line 2, I'm going to highlight differently, line 2 over there. So paste it into, under this, Storyblock, under this, sorry, the import over there, just in case I'm going to send you where I am copying it into the Zoom discord.

So you can just, you know, like click this link and copy the line where I highlighted over here. So that's the first process we need to do that. I don't need this actually, so I'm going to minimize it. So after that, there is the Preview API key token, which is clearly not yours in this case. So that's what we need to swap with your preview API key token. And I'm going to show you where you can find this preview API key token. Remember, this is kind of a glue where you can actually create, the link between your Storyblock application I would say and the Next.js application into one. So to find it, of course, it's coming from your Storyblock. So go into your Storyblock screen like this, and this is where we stopped. But instead of searching in the screen visual editor, we are going to go back to the previous screen by clicking this left arrow on the up above. And from here, where we are going to do is go into the settings from the left-hand side in a little bit bottom. So from here on, here another side bar in the white background part, you find access tokens. So here is where I want you to retrieve your preview API key token. And remember, we have a couple of different access levels of tokens. So to develop your, let's say application, first we want to have the preview API key token, not the public and not the theme. Theme is something you do not need to think about it now because that's something actually coming from a little bit older one, but just keep in your mind that you will be most likely using preview and a public API key token. Check it, will show you when you're going to use the public API key token, but from my part, I'm going to show you you are going to use the preview API key token. So here is the copy option, or you can just simply copy this value, sorry, value like this, and after you copy this value, going back to the visual editor into the underscore apto j s file swap this default API key token value into yours. So this is quite important. And if you have wrong preview API key token, it will show you, let's say like not working in bullet, let's say preview screen, or something different project that you're working on. So make sure this is kind of 101. If something goes wrong with the, let's say, visual editor, double check if the preview API key token is correct one or not. So after that, let's go back to the notion page to see if everything is followed. So we have initialized the storybook integration by using the special API call storybook init. We got the preview API key token from a beer space. So theoretically we can just save this result, like run the local host again, starting again. Let's see if it works again. I think it's working, if not, I can just rerun. Rerun, but what I wanted to explain you quickly is that by, oh, there is an error, okay, interesting. Let's have a look. Components, I guess. Ah yeah, exactly. Yes, this component has not yet been defined. So that's what I'm getting an error, but don't worry about it. As long as we add the components, we will be able to sort this out. So, before doing that I wanted to give you a little bit of info, what I call, let's say, to initialize the Storyblock API. So, first of all, we want to fetch the data that are coming from Storyblock API site so that we will be able to fetch the content, whatever you know like your content editors are going to input from the Storyblock Visual Editor or the UI. So that's what I am calling it in here. And it has the already formatted, let's say syntax in there. And that's what you can take a look at from our Storyblock React SDK readme. So, you can see in here all the necessary, let's say values, that you can configure or some of, let's say, the configuration for the options, et cetera. And what Jaquit has realized earlier than me is this part, components, we do not have configured any components yet. More precisely, dynamic components. We even didn't create it. We even didn't create these dynamic components. So, that's why. So, what we configured is here, access token. We also configured the API options. If you are located in US, this is what you need to configure. But I see most of both attendees in here are accessing from the European area. So, you have no issues with configuring like this by default. So, I will show you later on how we are going to configure the components part, but this is quite very important fundamental to create the connection between your Next.js app and Source blog space. So, let's move on to the next step which is going to be installing some of the styles. So, of course, we want to make our, let's say, blog application to be look prettier, right? But, I need to admit that I'm not the best, let's say, person to style things. And I believe a couple of you could agree with me. So that's why we are going to install the tailwind-css. Oh, sorry about that. I don't want to change anything in here. If you want to read more, click in here. And I'm actually going to do that. I have already opened up somewhere in here. So, tailwind-css has the quite detailed information how you can install depending on the frameworks or the libraries you use. So in this case, I want to know about the Next.js configuration. And to do that, first of all, there are a couple of commands that I can run. So I can actually, you know, like run this command mpx. Wait. No, we already have finished this step one, sorry about that. So we can just ignore because this is about to generate a new application. Next.js application. Here is the thing we need to do. So I'm going to install a couple of necessary modules that needs to be provided from the tailwind-css site. I'm going to, I'm going to actually like at or post the localhost for one second, and I'm going to install a couple of packages that I need. So you also can find the exact same command from here. Oh, I have installed with npm with Yarn. I didn't want to mix up, but anyway, so here's what you can do. And you can see, so here's what you can do. And after that, there are also the commands that you can also follow. That is actually exactly the same from what you can see from here. So next up, I'm going to run this configuration with NPX. Let's see it works. I have a bit of trauma but NPX from the previous, let's say, a couple of few minutes, but it worked. So let's move on to configure our template paths. So by default, it doesn't look something like this. We need to have these couple of content configuration. So I'm just going to copy into the clipboard from right there, and the file name should be tailwindconfig.js. It should be there already as we run the previous command, so I'm going to swap on the default, let's say source code values into something that we have copied from the Tailwind CSS page. And next up, we are going to, again, modify a globalls.css file. So I'm going to copy these lines of the code into a clipboard, and we are going to look this file into the styles directory. So let's search the styles directory, I'm going to close the unnecessary places. So here is the styles, it should be in the root by default.

And there is the globalls.css. You don't need to create one. You should have already one by default. So I'm going to swap everything into just these three lines of the code and save it, just in case. Let's go back to what tailwind-css says. We need to configure the rest. So it seems like the configuration has been properly done. We need to import or make sure that we import this CSS file though. So that's what we are going to make sure. Going back to the VS code. I'm going to actually close these configuration and files. In here, yes, at the underscore of the JS file, we see the import path is correct. So if we want to call any, let's say, values or the class attribute from tailwind-css, it should be loading. If there are some issues, we can always go back to the documentation from the tailwind-css. I hope it wasn't too complicated and I don't see some of the messages coming up. So I hope it's good to go. I'm going to show you again, the notion noted here. So here are the steps that we followed. So moving on to the create. Couple of dynamic components in this case means that it's the mixture of the templates or any levels of the atomic design methodology-based components. So, for example, this page is actually a template component that we call a stored bug as content type components. So teaser, great feature. These are nestable components, means it could be atoms or molecules or even like any other higher, except templates, I would say in this case because all these are nestable. So if you are also seeing this Notion node page, which is also publicly available for you, click this page component link. Now you should actually see the exact component file of page.js. You can copy these all lines of the code. And I'm going to explain you a couple of important notes after we create all these four components. So let's get this part done. So, after you copied it, in my case, I am going to actually configure my screen. Now you see I have a bit of cheat sheet, but I'm not going to show you that part because it's not gonna be good for your learning purpose, but to shortcut my time, I am going to copy and paste this component file. I believe you copied the page component. And to store, let's say this page.js file, we are going to create a folder in a root. So here we are going to create a folder called components. Not spelling this right. components. Yeah. I'm really bad at spelling. Anyway. So inside of this components, then I'm going to paste or in your case, you can create a new file with a name of page.js. So that's where you can paste over here. We still have three more to go. So let's go back to the Notion page. So here there is a teaser. So we are going to click this teaser. So when you click this teaser link, now, you can see this teaser component file. So this also should be inside of the components directory. What you can do is copy this value. On my end, I am going to copy the teaser.js file, going back to the VS Code. And in under the directory of the components, I'm going to close this over here. You can create a new file. This should have the name as the teaser.js. I just copy and paste, but it should be the same. So you can just paste the value where you copy from the GitHub repo example over there. We have two more to go. So going back to Notion page, I hope now you got the rhythm in here. So go into the grid. I'm going to click this grid. So in here now I can see the grid component file, which is in under the directory of the components. All you need to do is copy. I'm going to copy on my end as well. Going back to VS Code, in under the directory of components, you can create a new file with giving a name of grid.js file. And you can paste the value. Last one. So going back to Notion page, now we are going to create, or actually in this case, copy the feature component file. So this also component file should be in under the directory of components. Make sure to copy all. I am also going to copy the feature on my end. Going back to the VS code in under the directory of components, you can create a new file which you can give a name as feature.js file. Make sure to paste what you copied in there. And we can see that now we have created four dynamic component files. And last step. So, at this point, we have very quickly created four important dynamic components in the source code level, but we haven't yet imported into anywhere else. So here it comes where I got the error message because I didn't create and import any dynamic components at all, but now I have all these components. So I am going to actually import them and call inside of the stored block in it. So, to be quick, there is also another shortcut where you can click to see how you can do that. So first of all, here is what I mean to say that. So you can also directly store these components value in there, but for more, let's say, cleaner code, or let's say an easier way to maintain, I'm going to store it into a variable, as an object, so that I can just, you know, call this, let's say, variable name in there. So if you copy all of it, then you're going to copy, like, let's say, the couple of dynamic components that we are going to create in a couple of, after a few minutes later on. But let's say that we have created so far, four of them. So I would say, like, you can comment these out or just don't copy yet. In this case, I'm going to actually not copy once. And I am going back to the underscore after JSX file. I'm going to delete or close the unnecessary files in here. And above, from the story block in it, that's where I'm going to paste. And to make it cleaner, I'm going to delete just in case. And we need to import it first. That's why we haven't yet imported. That's why we see, like this syntax is not highlighting anything yet. And to do that, I am going to highlight from the line three to six. So that's where you can also copy.

And I am going to share with you this link into the Zoom. So you can just follow where exactly I am copying it. So let's copy these, and then paste into a new, the rest of the imports. So now you see the syntax color or highlight has changed. So after that, let's save it. Let's see if it works. So my case I use yarn, so yarn depth. And let's see if any error comes up, seems not so far.

So let's go back to the storyblock visual editor. So I'm going back to the storyblock visual editor, to do that, I'm at the settings right now, but I want to see the visual editor, so I'm going to go to the content and then click the home and see how it goes. I see some sort of progress, right? This style has been enabled. And some of the fonts are different right. The reason why we don't see, let's say, that feature or a teaser, these kinds of, let's say, dynamic components we have created, except the page template, is because, well, there is another cool feature that I really like to use from Storyblock. You can see the nested, let's say, relationship in this specific home story in there. You can see, there are no, let's say, dynamic components that we have created so far are defined inside, except the page template. That's why you don't see any, let's say, like teaser or grid feature, stuff like that. But we can see the style has been applied. So it means that also there's no error showing up, means that we were successfully able to initialize the Storyblock API so far, and also imported and enabled the dynamic components over there. So let's go back to see the current progress where we are at from the Notion page. So we have reached, we have reached to this level, and now we are going to edit the index.js file, the one we haven't yet touched anything so far yet. And by the way, we are actually following one of the tutorials that we created for Next.js case that is called Ultimate Tutorial series. And that's where I am going to take you to the source code to see the current progress. So you can actually take a look at this ultimate tutorial link from our Notion page, which is in above the diagram or table, sorry. So here is the ultimate, where is it? Yes, here. Ultimate tutorial series that you can have a look at the same page that I am showing you right now. And let me paste in there. And from here, what I'm doing is right here. I'm going to take you to this first step of the ultimate tutorial. And if you take a look at this first series of the ultimate tutorial, now you can see all the steps that we have been following so far, right? We also saw this, welcome to next.js with the direct node, we have configured everything. We also configure and retrieve to pretty API key token. And here is what we are going to actually like copy and paste and edit the index.js file. And to do that, I have also created the quick link for you. So if you got lost where I was showing you, very quickly now, go back to the notion page, go back to create react components section. We have completed so far until this add components to store block in it call. Here, edit index.js file is the link where I want you to click it. So if you do that, you can already jump into this one of the ultimate tutorial series, which is the first one to fetch the data that are coming from store block API. So here is actually the source code where you can just copy and paste or your index.js file. You can simply copy to clipboard from here and let's go back to the VS code. So I'm going back to the VS code. Here is the index.js file. There are a couple of things we have in here, but I want to remove all and paste what we have so far. So let's save it and see how it goes on the Visual Editor. So I am going back to our store block visual editor. And now instead of seeing, welcome to next.js up, now it has been changed to my site. So this is my site, where this my site is coming from. It's actually from this index.js file, where we configured the stories name. Story is, remember, in this, let's say blog application example, is almost equivalent to the page, means this is the name of the page. So this is actually like some of the default value. If for some reason we cannot retrieve the name of the story, which is home, then we are going to render the, let's say, string value, my site. So that's why you're seeing. That, for some reason, we failed to fetch the name of the story, home, but we kind of directed in an escape hatch to display the name. So now we can see actually, yeah, our very first like hello world kind of story block on Next.js blog app is up and running. So there I guess there is a bit of fail to fetch, but it's because we didn't configure like fully. So this should be fixed and now following my couple of configuration. So I hope you can see the same result that I'm showing you right now. If not, let us know. But I don't see someone is telling us that wasn't able to reach to this point, but if you got stuck in somewhere, let us know. So let me check where we are right now. So we are at here after, sorry, editing the index.js file and now we can see a very, very minimalistic kind of hello world of Storyblock Next.js application up and running. We are going to complete the rest of, let's say this section. I hope it's not gonna be too long as the first chunk of the content is actually what we are going to use on the catch-all slugs. So Next.js provides a couple of, let's say ways to handle like the dynamic routes. We are going to use one of the approach, which is that we are going to use a single, let's say square brackets. There is also like double square brackets, but we don't want to make the dynamic route approach to be optional. In this case, we want to use fully anytime. So that's where you're going to stick with the single brackets of catch-all slugs. If you want to take a look at it furthermore, it's quite the content in my opinion. You can have a look at the sources, I mean the documentations from Next.js from there, but I'm not going to go too deep in this case for the time sake. Instead, we're going to create this dynamic route of the file. Sorry, I forgot to add the link in this slug file, but I am going to share with you now. This is what I want you to copy for now and create this slug, I mean catch all slug file in under the directory of the pages because that's where Next.js generate the pages regardless of dynamic routes or not. So let's going to do that. In my case, I am going to copy on my end. So let me copy that. So make sure to copy all in your end. I'm going back to the VS Code and let's create such, let's say file in under the directory of the pages. In my case, I'm going to paste. So that's how it should look like. There are a few lines of the code with couple of, let's say Next.js specific AI, such as get static props, get stored, sorry, this is not Next.js specific. Get static paths, et cetera. So, as you might have realized, we are not using, let's say some of the beta feature, beta features of the Next 13. So, that's why you see a little bit of Next 12 approaches, such as like to configure, like revalidate for the ISR, things like that. It's going to be a little bit different, but let's stick to the, let's say, stable approach in this case. So, after you created this schedules lag file, then we are going to configure a couple of more additional components. They're not all dynamic, in this case, such as Night Hooter and the navigation, because this is something not probably always non-developers need to have a control, but if you want them to have, you can do that, but for this demo, we don't do. So, just keep in your mind that couple of components are not dynamic, but we are going to create that anyway. So, let's move on to create more components, in this case. So, let's click this layout. So, this is something, I would say, a sort of global component that you're going to apply the default layout, such as Hooter and the navigation components. That's why we import them, and we are going to create them after that.

Don't worry about it. So, let's copy this layout. In my case, I am going to copy in my environment, copy, then move on to the BS code. You know the drill, I hope. Going to the components. Let me close this pages. So, over here, you can create a new file that you can give a name as layout.js. So, we haven't yet created any of these components, but we are going to create that shortly after.

So, here is the navigation, and here is a quick note when it comes to, let's say, between next 12, and next 13. So, our, let's say, default create next app has been generated as next 13, but we are following next 12 to stick with a couple of let's say features that we want to make sure that works properly. It doesn't mean that these beta stuff doesn't work, but we want to stick to like the stable version of it. So, in this case, a couple of, let's say, components, or the APIs, we need to modify in a way to work. For example, like link component, it should include this legacy behavior if you want to stick to, let's say, like in this case, next 12. So, to do that, I'm going to first of all, like copy the code for the navigation first, and then I will add these values into the link component. So, let's go to the navigation from this link over here, and you can copy all of them by doing so. In my case, I am also going to copy that on my end. Going back to the VS code, inside of the components directory, you can create a new file by giving a name of navigation. So, as I said before, this is what I was talking about. So, we have a couple of links, so in here, what I need to do is, let's go back to grab the value that I was specifying. And here you can just copy this value, or if you want to take a look at further more, here is what you can take a look at on your end. So after this workshop, or if you want to read it quickly now, you can easily have a look at it, and here is the example where you need to add this legacy behavior to, let's say, like allow or enable or add, let's say like the anchor element over there. So, going back to the Visual Editor, where the links are, I am actually going to add this legacy behavior, and I'm going to look for another more legacy behaviors to add. Yeah, here, also, let's see, here. And that was the last one. So, there were a couple of places where we had to add, but I hope we were able to do that. So, let me save. I'm going back to the Notion Node. And here, we are going to create a Hooter component. So, let's click this Hooter Component link. You can copy all of it. In my case, I'm going to copy and paste on my end, too. So, going back to the VS Code, and with the directory of the components, you can create a new file with giving a name as a Hooter. So, that's how it looks like, and we don't have to worry about link. Yeah, I think. So, let's go back to the Notion page where we can include the layout component into the dynamic route. So, I'm going to show you where exactly you can do by clicking this link, and here is where you can add or import. So, going back to this catch-all-slug-file, component file, we can actually copy. Or, if you have copied this, let's say catch-all-slug file before, then it should already have in here. If not, you can import it. All right, so, going back to the Notion page to see where we are at. So we are now at the process to create the new block called Hero, and that's what we already have the components created on the storage block site, but not on the Next.js source code level. So what we are going to do is click this Hero component link, and you can see all these necessary components that you need to create for the Hero component. I am going to copy on my end, too. So you can also copy the source code from the same link. Going back to the VS code, you know the drills, going to the components directory, you can create a new file by giving a name as hero.js. Here's a little thing which I haven't yet explained you. So I showed you one of the drafts JSON files, right? Where you can see what are like the data and paths, what are, let's say, like the data you're going to fetch. All these datas are, again, coming from story block API that starts from in this case, index.js file. So here, after, let's say, like initializing story block API, we have the props that host the value that is actually starting from story something like this. I'm going to actually show you, actually. Yeah, so go into the Graph.json. So here, you can see the data layer is starting from the story and there is the content or the name of this story. So inside of the content, there is body and this is an array object to contain all the dynamic components. So this object here is actually a hero component that is actually what we are going to create. So you know, like, how index.js is passing the path right now. So following that, the hero component has this block prop. This block prop is a special prop because it holds the rest of the beginning of the path that started from story, content, body and the rest of the path, you just need to connect to complete to fetch these subtitle headline or the file name of the source attributes for the images, etc. And that's how it works to fetch the data in general from StoryBlock. So going back to the notion page, so that's where I wanted to actually like explain you in a little bit more in depth, but I hope you got it right. If not, you can have a look at it where exactly I was mentioning about. But the point is I wanted to show you how you can fetch the data that is coming from Storyblock API. So we have created quite a lot of another components. So we are going to add them into the StoryBlock init call. So let's do that. And to do that, we created a hero component, right? So besides from the navigations and the footers because that are imported already into the layout, a layout has been imported into the index.js file. This is what we need to do. So we are going to copy this hero component into the underscore apt.js file. I'm going to close all unnecessary files. So I'm going to import and here means that we need to register the name of this component. So it should be hero. So this should be the technical name that you assign from the Storyblocks UI. And let's save it and see if everything is correct. So I have added. So let's go to take a look at how it looks like on our end. Let's see that. Yeah, so I mean, for everyone, I mean, just to mention that, like the way we are fetching the data from Storyblock is this place. We're using get static props over here and I mean this is for the home story. So if you're on the index.js file or if you are going on the home route, you're going to get, I mean, obviously, I mean, automatically you're gonna get the slug that says home. So it's already gonna be the home story and I mean, if you are inside slug.js file where we are fetching the dynamic routes where we're fetching all of the routes, it's like we are first creating all the paths over here. We are fetching all the links from Storyblock rather than the home story and then we are creating, I mean, we are then getting the data for each and every particular page which we have generated. So this is the place where we do the static site generation. We get this static path over here and then we are getting all the paths and then we are for every path or every page we have, we are getting the data similarly to what we did in the home story. So we were fetching and we're creating each and every page on the build time. So yeah, this was about that. And I'm not sure again what's wrong over here because we see the data and we also see the editable part. We also see the content body area. Maybe, does it have to do with something like storyblock component that is also actually a special API coming from our story block react SDK We see the name of the story now instead of the, if anything falls out, like the string says my story or my home. My site. Yeah, yeah, yeah. It means that we can fetch the data.

Yes, for sure. But it means that the further step which is actually about dynamic components rendering is failing or not simply rendered. We are not rendering it so far. I mean, we are not. Yeah, I don't get the layout in the home story. Yeah, yeah, yeah. My fault, my bad. I only imported the layout and I didn't like call in the JSX scope. That's why. Is it just for me? Oh, you were just stuck for a second and I thought. Oh, okay, okay. Yeah. Yeah, so I mean the way we have it inside the slug.js, we are similarly using it inside the index.js path. And it's like, for the layout, I mean the layout is just gonna give us the header and the footer, and this Storyblock component is a special component, so whichever component we are registering over here is gonna be rendered dynamically. So that's what we are doing. And as Arisa showed you the data, which we get from the API, that data comes over here inside these static props. And we are passing that data as props, and then the Storyblock component is rendering each and every component it sees. So on the top level it sees the Page component because we are inside the page. I think I also need to import that over here. There we go. Whoa. I think we haven't done a couple of things over here. All right, so just give me a second. And we also need to have this, let me say, we need to have the story which we are getting from here. We need to use storyblocks state, and we need to pass the story which we had over here. So yeah. This is the thing which is enabling the bridge and this is the thing which is allowing us to, this is the thing which is enabling the bridge for us. And this is the story which we are getting from the props, get static props of passing the story. And then we're using that story and we are initializing the bridge over here. So this is gonna allow us to edit things in real time. Let's see if it works. Well, there is a lot that needs to be. Let me just see. I think we can probably just remove this part. Yeah, and here we go. We see the content now. All right, so yeah. So this is the layout, which is like rendering the header. And this is the layout, which is rendering the footer. And between that, you can see that we are rendering the hero component, which we have. And even if I go over here and even if we add the other dynamic components that Arisa already made. So for example, if we go inside the teaser, we're gonna get the teaser component and then we can just, hope it works. Yep, it works. So we can make them just, do these real time edits again in real time. So this is how you can add and play along with the components. Like for example, like the hero component, which we have or any other component, which we have. That's gonna be returned to us in the API. Just to reiterate over again, because I think it might have caused confusion because we went from one place to the other super quick. But yeah, this is the place where we are fetching the data. And this is the place, like where we are enabling this bridge where we can do the real time editing part. And again, this is the page. The page is gonna contain multiple blocks. So these blocks, again, we are rendering within Storyblock components. So these are gonna be dynamic. But for example, if we talk about hero or some other component, again, we are getting it as a block and then we are just using that data, which we are getting on any other component. So yeah, this is how it's working. And I think now we can quickly add the block folder or Arisa, what do you think? I mean, the block folder is already there now. So I don't think I need to make changes, but yeah, just to show you the scheme of a blog, how that looks. So if I go to the block library, and if I go on to the article, you're gonna see that these are all the fields which we have added onto the articles and these are the fields, which you are also gonna get inside the clone space you have. So for example, this image, title, a subtitle, teaser and content, these are gonna be the fields. And what you can do is you can again, let me quickly go over to, yeah, what you can do is you can quickly go over to this block folder and this article file over here, and you can just copy this article file, like which is gonna render the articles for us. So if I go inside this component, I'm gonna create an article.js file. And I'm gonna paste this, oops. Gonna paste the code. And now, whenever we go inside the article sort of thing, we also have to install the rich text renderer, which Arisa mentioned, the library which we had for, you know, like for the rich text, which we get usually. For example, if I go over here again to show you, this is the prod version. If I go inside the content and if I go inside the blog, and if I open up any of the article, you're gonna see that this is the schema, but we don't see the article because again, that that component is not saved yet, but this is the rich text field, which you know, like which kind of looks somewhat like this, and we are gonna get the data somewhat like this. So, we need to render this in the exact format which we see it, I mean, it gives you the objects saying that this is a paragraph, this is another paragraph, this is the content inside the paragraph, what type of content is it and, you know, like, in case if you apply any of the styles or maybe, you know, like, if you make it a header or doing any sort of things, those things are gonna be stored inside over here. So, yeah, this is one thing, for example, you can even see that if something is bold, it's gonna be like this. So, for example, this is gonna be inside the API response like this. And to render this, we need, you know, like, for example, this is the blog.content and this is the blog.content, which we have like the content field to render this, we need this storyblock rich text renderer, which is, again, I mean, SDK, which is gonna help you to render this. And you can see that it's pretty easy to use, I can just install this, and as soon as it is installed, it's just gonna render this part for us. I think it should be working now. It says the component article doesn't exist because it didn't until then, but it should now, nope. There is an error. The component article doesn't exist. All right, yeah, I mean, this is the thing where we see the issues. We need to import it inside the, like inside the dynamic components area which we had, so I'll need to import the article over here, and then I'll also need to map it over here. So article should be article. So that's what the API returns to it, I mean, that's what it says that the article component doesn't exist. As soon as you make that work, you're gonna see that this is how you also get the article thing working, and you also, you know, like you can edit these things in real time as well, which I think is not working again. I think... Yeah, I think- Because of the way you searched the page, it's ISL, right? How long you said? Yeah, but I think. Oh, okay. I think it should... Yeah. Work already, because you are working on local, so I think ISL thing works on local. Yeah. Yeah. So I think something over here is not good.

I think this preview environment can cause a couple of things. I mean, we were gonna add the preview environment, so right now we are not in the preview environment and that's why the bridge is not enabled. But the bridge should be enabled by now. So I see the resolve relations are not yet set, right? Yeah, yeah, we are gonna use that inside the home story when we publish articles. But yeah, as you can see, I mean that story block bridge which we had, it was not enabled because of the preview which is false and by default. That preview is gonna be set, I mean, I think if we get the time then, which we are already passed, but if we get the time I think I'll show you the preview environment, how to set up the preview environment for Next.js because as it was mentioning, if this is a static build, then for what, like once the page is built and if you change anything over here, you need to redeploy it. But let's say you want to see the changes which you are making in real time, right? So for that, we add a preview link with that Next.js supports and we can just use it from there. But yeah, I think that's most of it and this is how similarly you can even play around with the blogs and I mean, similarly we can create more blogs. So right now I think I'll just go back because we already have four blogs over here.

Now comes the part where we have this blog home, for which we are using the article, I mean, all articles component. This all article component, I'm just gonna again, show you how that looks. And this this all articles component is just like fetching the stories which are starting from block. So it's gonna fetch all of the stories inside the blog folder. And then it's gonna adjust a render that, I mean, that's just the basic styling part which we are doing over here. But it also has the article teaser component created. So that's a static component. That's not a dynamic component as far as I remember the article teaser component. I'll just copy these. But yeah, similarly we can create two of your, like two of your files. One with the all article component which kind of looks like this. It's fetching all of the components inside the user. So it's fetching all of these stories. It's fetching all of the stories which are starting from blog. So it's gonna fetch all of the stories. And then we are filtering that. Like it shouldn't fetch this one, which is already there. So if I again go over here, we are fetching all of these articles. And I mean, we are filtering out the home story which we have because we don't wanna show that. And once we get all of the articles because we want to show the cards for all of the articles. We are just passing, I mean, we are just using this articles area which we get over here. I mean, the filter one, which we get over here. And then we just render the article teaser component. And the article teaser component, again, it's not very much complicated. It's just the basic, what do we say? I mean, it's not even dynamic, but like it has this link. So I'll just add the legacy behavior over here. But yeah, it's taking the article and it's just fetching, I mean, it's just making a card out of it. So component are all articles component doesn't exist as it says. So I'll need to again, say all articles over here, oops, I don't need to say if the automatic import works but it didn't so, well, am I doing something wrong over here? Yep. All right, it should work now. And if I go over here inside this, it should work. Yeah, so as you can see, I mean, this is just a static component with just one of the fields that is sort of dynamic over here. So we can edit this, but this component, I mean, this area of the component is dynamic. I mean, it's more or less static, which is just fetching all of the blocks and you can see it over here. It's fetching the four articles, which we have, and it's just rendering them. And again, you can add these articles or, I mean, you can add these sort of components once these components are created to any of your pages. So even if I go inside the home story over here or maybe the about story over here, you can see that we have this teaser and then we have the grid. So it's like, I mean, you can just, you know, use these sorts of things anywhere. So even if I copy this grid, and if I go over to the homepage, and if I paste it over here, you're gonna see that that happening in real time. So that's how you can play around with the LiveEdit and stuff like that.

Now, the last thing, which we kind of need to do for the popular articles, we have a component created, again, that says popular article components. I'll just add it over here. And once I add it over here, like let's say featured articles, you can see that it's not changing anything because we need to create this component inside our front end. And again, do the same things which we were doing. I can just add it. And now if I save this, and if I show you the response of how that looks, you're gonna see that this is how we see the articles. It's like, we see the reference of these articles. I mean, if I go over here in the settings, you can see that, we have set it to select all the stories from the blog folder, and it's a multi-select field. And it should only allow the content or allow these stories, which have this content typeset as articles. It's gonna just give us the options of all of the articles over here. But I mean, you can select any of these articles. And now if I go back over here, inside the index.js file, because this is happening on the homepage. What we need to do, is while we are fetching the story, we need to resolve the relations for these articles. So I think since we don't have a lot of time, I'll just do a little cheating and I'll just copy the code. And if I go over here, you can see that inside the parameters, for example, right now we are fetching the draft.json, I can say that, yeah, I can say that like resolve the relations whenever you see popular articles inside the articles. Just resolve those. So I'm gonna get the complete resolve articles over there. And I'm gonna get the complete JSON, which also has these articles populated. So I can save this and then I also need to, create the popular article components. So again, I'm just gonna copy it and paste it, but you can again go over here and you can just, I think we should have it here. And you can just get this popular article like component inside your components as well. And yeah, I think we are good to go. We need to resolve the relations at another place, but I'll just show you how that looks. So if I refresh this, it's not working because I don't know why I'm doing the same mistake over and over again, but it's kind of good that we get to learn from this. You need to import the popular articles over here and then I'll need to map the popular articles because you can see again, it says popular article component doesn't exist. But yeah, so whichever component you need to be, you know, like whichever component you need to rendered dynamically, you just need to register it. Popular articles and that's popular articles. And if I hit, oops, if I hit save. I think you might have a little bit of typo on the left hand side. Thanks for spotting it. Yeah, and you can see that we now see the popular articles as well. One thing over here is that, you know like, if I try to edit this, it's gonna break because we also need to tell the bridge that these relations need to be solved. So if I go, I mean, so for that, I mean, so for this where we have the bridge settings, if I go inside the index.js file, which we are using for this particular home story, these are the bridge settings, as you also saw that. It takes a couple of arguments. So for example, when preview was enabled over here, we were not able to initialize this similar to what we have in slug.js. Similarly, we need to have a couple of, you can even pass a couple of other things as well. So I can have another object over here which says that resolve relations for these, again, for the same thing which we did. So you can even have multiple, I mean, you can even have this array of, I mean, multiple number of, you know, like multiple number of relations which you need to resolve. You can add that as well. You can add a couple of other arguments as well from the page which Arisa has showed, like the GitHub where we have documentation of Storyblock React, how this particular function works. You can see it over there as well. Yeah, and if I hit save, and by the way, you can even where. Yeah, you can even see that, you know, we have mentioned it over here that you need to do it at two places. So, one at the Storyblocks state and the other one is at the props where we did. So, inside the props was this place where we fetch the story. So we are just resolving it over there so that the data is, you know, like in that sense, and when we are, I mean, inside Storyblock state which is playing around with the bridge. So yeah, if I go over here now, and if I go over here, you can see that now we can play around with these as well. I don't think it's working. Yep, so for example, if I go over here, well, I think the ordering has something. Yeah, it's working, it's working. All right, so yeah, you can see that it's working as well. Like even if I play around with the order of the articles, that's also happening in real time. So yeah, I think that's most of it and let's, all right, so there must be some of the things, but yeah, we can probably ignore this for a while. And yeah, I think we are good to go now. I think we can just move on to the deployment of this. Yeah, I mean, deployment of this project. So if I now go over here, I've made a couple of good changes. I think, but I think, I think it's gonna be your GitHub repository. So. Oh yeah, I could see. Yeah. I think I'll just, Create a repository for myself and I'll just push it over there or maybe if you want to deploy it. I think creating in your like new repository might make more sense because you have the code ready now. I don't. Yeah. You certainly have, but not the one you have. Right? I'll just create a new. Well, I'm not signed in. Well, whoa, whoa. Yeah. I should be signed in. Yep. So if I go over here, I'll just add this branch. So. I'm going to say just new origin over here. I'm going to push it to your GitHub as well, which I don't think. I don't think we have permissions over there, but I think just ignore it for awhile. And yep, I think I have that on my GitHub now. We refresh it. It should be there. Yep, we have all the code. Now we can go to Vercel for deployment. I'm so sorry for taking it super quick because I know we are already late, so I'm just doing it a little, you know, like I'm rushing a little for that. All right, so I'll just go on adding a new project and let's see if we get, yep, that's the first repository we get, so easy for us. We don't need to search and everything and you can just hit on deploy, so this is how easily you can make it work on Vercel as well. You can just, you know, like you can just, I mean, you need to create a Vercel account and this is a place where you see all of your projects. You can go on adding new one and you can click on project, then you can just import that project with GitHub, GitLab, or Bitbucket, I guess, yeah. With Bitbucket and once you're done with that, I think, I mean, most of the times Vercel handles each and everything on the go, so it knows which sort of project it is, it knows if it's a Vue project, it knows if it's a Nxt project or Nxt project and it's just, you know, like it's just gonna set the commands for building it up and you can just click on deploy. So yeah, this is how it is getting deployed right now, which is gonna take a couple of seconds. You can see that it's like building, but by that time, I think we can add the, well, Why is this happening? Do you have like multiple accounts? I don't think so.

Hmm. I'm not sure, maybe because the repo is yours, I think this can be a thing that I can not change a couple of things over there. Yeah, I think so. Yeah. But yeah, I think our app is already deployed and yeah, we can share this with everyone. Just find the chat. Yeah. I'll just share it with you. So yeah, this is the deployed link where we just deployed our project, our code. So yeah, this is the Next.js app which we just deployed. I also had in mind to add the preview environment which allow us to make the changes in the production environment but I think I'm not sure we have the time for that. So I think I'll just skip that part but I'll really try to go inside the settings for this. Arisa, maybe I'm not sure if I can do this because the repo was yours and I was able to deploy it. So I should have the settings of that as well but. Yeah, you should have that too but I don't know why it's not working. I got it. I'm not sure, I haven't seen that. I haven't seen that sort of thing ever. Yeah, never seen that before. Yeah. All right, so I think we can go to the functions. No, I think, get over here. And yeah, we can create a deployment hook. So this deployment hook, you can input this deployment hook inside Storyblock. So it's like, whenever you hit Publish, the website is gonna rebuild itself because it's static. So again, everything happening is happening in real time. So if I change anything over here, you know, like, where did the space go? Oops. Yeah, if I change anything, let's just to keep it simple, let's go on the Home Story. If I change anything over here, you know, like let's add a couple of exclamation marks. And if I hit Save, and then if I go on this project, which we just deployed, and if I hit Refresh, it won't show you the differences. It won't add the exclamation marks. It won't has the has the updated content because it's like as we were talking about JAMstack, it's this particular thing, this particular markup, this particular HTML is built at the, I mean, it's built at the build time. So this static sort of thing is happening on the build time. That's why we don't see the changes over here. Because like when we are building it, that sort of thing is already the fetching of the data, those sort of things are happening on the server. And that's that, that just happened at once. So now whoever visits this website, it's just going to be there. But with the ISR, it can work. And I think it should work in a while. But what I'll do is I'll just, you know, like deploy it again. So if I deploy it again, you can see that if I redeploy it, it's gonna, I mean, it's again gonna take a little time. And once it's deployed, you can see that the changes are going to be there. But yeah, before, I mean, once, once, I mean, till the time it's happening, let's go inside this hook and create a new hook. All right, let's say main branch. It's already the branch. Yeah, main branch. And let's say that this is the published hook. And I can create a new hook over here, and I can copy this hook. And now if I go inside the, oops, if I go inside the example space, and if I go inside the settings for this space, inside the webhooks, I can add this, I mean, I can add this URL, which we had. This is gonna, you know, like whenever we hit publish now, or whenever we hit say, I mean, whenever we unpublish now, this webhook is gonna run, and this automatically gonna redeploy the website on Vercel. So this is how, I mean, this is something which I was mentioning before, as well when we were talking about Jamstack, that you need to have these serverless platforms to have the pipeline, I mean, pipeline in the sort of way, you know, where it automatically redeploys and pipeline runs, and it automatically does the complete things for you. All right, so let's see if the deployment is already done. Yeah, it's kind of done. And now if I hit refresh, we should see the exclamation marks added. So you can see that the exclamation marks are added right now. And, like again, if we make a couple of more changes, now our webhook should work as well. So if I go over here and say that, a webhook test or something like that, and if I just hit publish, and if we go over to the WordCell again, and if we hit refresh, which I think, yeah, you can see that as soon as I hit refresh, you see that this webhook is fired up and it is building the website again. So this is going to build it again, and this is going to re-deploy the code with the new build. So, yeah, I think, yeah, that's most of it, and I'll just see if we have anything else remaining, but yeah, that was most of the part. We committed all the files, we set up the project, we also set up the webhook to deploy it again and again automatically. Anyhow, we are done. I think the preview mode is something which I think I'll just, you know, probably I'll just add a link to on this preview. Like inside the next JS article, which Alisa showed the five-minute article, it has that preview sort of set up in place. We need to add this preview URL because, you know, like, as I mentioned, this is static, and now if I add this particular link, which we had, which we have in our space, it's not gonna allow me to edit because that static. So it's, it won't, you know, like, it won't work properly in the manner it should. So this preview environment allows us to run the, like, for example, inside the local, I mean, inside our local host, these methods, which is like, for example, getStaticProp and this getStaticPaths is gonna be running each and every time whenever we load it, because that's how the local host work. But once you deploy it, you won't even see this because this is just there to the build time. And, you know, like, this is, this is the reason why we won't be able to edit it. And this just stays on the server. So once in your deployed code, these functions are not there and they are not gonna be present inside the page. But once you add the preview that'll, for every page you are loading over there, these things are gonna be run on each time, not just on the build time. So once it's running again and again, you're gonna, you know, like even if you create a new page, you'll get the new page. Even if you change anything, you're gonna get that data delivered to you. So that's why we have the preview thing inside Next.js. But I think, I think, I think we can, we can just skip it for now because it's, it's like too long for, for everyone, I guess. So yeah, please let me know in case, let us know in case if you have any questions or any, any queries. Arisa, do you think we have anything else to cover? I think, I think we are done with most of the part? Yeah, I think we completed all. And so sorry again, everyone, for exceeding the time. And we also got a little feedback that we also might need to be considerate of the time. So we will take that for the future workshops. And thanks again, everyone, for joining the workshop. And if you're interested in, about more preview mode, how to configure the preview mode, which was the content that Chaked kinda mentioned that you can probably like figure it out later on. We actually have the tutorial ready. So you can take a look at our tutorial, you can get access from the ultimate tutorial, by the way, from the Notion page. So that's all from my side, I don't want to exceed any longer but any feedback would be appreciated for us. So feel free to tweet, let's say like how you felt about, or what you learned, or like, how was it for you like on Twitter by mentoring both of us or one of us, it will be fine. So we will be happy to have a look at it later on or hope you enjoy the recordings later on. All right, so with that said, I would say thank you so much everyone and hope to see you again in summer, somewhere, I couldn't say that. Yeah, thank you so much for joining on. Bye bye, see you all soon sometime.