Crash Course into the Jamstack with Next.js & Storyblok

Rate this content
Bookmark

You may read already about the Jamstack. You probably already used Next.js, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why the Storyblok in combination with Next.js is the best combo for your next project. Stop and try it yourself!

165 min
10 Jun, 2021

AI Generated Video Summary

Today's workshop covers integrating headless CMSs like Storyblock with Next.js and Gemstack, using the atomic design methodology. It explores designing and coding components, connecting with Storyblock, and loading data. The workshop also discusses dynamic content, multi-language support, and connecting Storyblock with external databases. Participants are encouraged to explore resources and ask questions throughout the workshop.

1. Workshop Introduction

Short description:

Let's start the workshop on integrating headless CMSs like Storyblock with Next.js and Gemstack. We'll cover the basics, set up the environment, create components, and build a homepage.

Hi everybody. So let's start. I hope you are ready. If you are not ready, let me know. But I think we should start because it's already 7 minutes after the five and we should start it at five. So we give people some time to join. And if somebody joined, it's still time to get everything into the correct time and point.

So I prepared one more screen and let's start sharing the screen. I will try to be slow and not speaking too fast because this is a workshop and not a talk where I have to get everything in the 30 minutes usually. This is something very slow and you can ask me any time you want to ask me.

First of all, welcome! My name is Semmel Snopko. I am taking care of the developer relations storyblock. Storyblock is headless CMS which you can use nowadays for any kind of projects from the small personal websites to do enterprise websites already have clients like HappySocks or Education First which are taking care of that of their website and applications and everything they want.

So what we'll be talking today about is basically like a kind of continuous of the topic that I already started and that you saw my lightning talk on the RECT Summit, then you probably guess that it will be about the headless CMSs and how to integrate them together with Next.js in this case or with RECT also. It's almost the same but we'll be using Next.js and of course Gemstack and why the Gemstack is cool and how to create something with it.

This workshop it's there like starting from basics. It's about like how to create a very simple website then put it everything together and as you can see also in the description it's basically industry Gemstack and the headless word we will be talking about the atomic design how to prepare your project for the headless wars or for the Gemstack in general for the next jazz and you will try to set up try to set up the environment for a with the next jazz connected to the storyblock create the components in the NHS which will be represented the website and which we also identify on the design. We are also in short a moment and then we probably create the first page which will be a homepage and on the homepage.

2. Workshop Overview

Short description:

Today's workshop will cover the basics of integrating headless CMSs like Storyblock with Next.js and Gemstack. We'll cover dynamic routing, multilanguage support, and deployment. The workshop will be interactive, with breaks for questions and hands-on building. No prerequisites are required, as I'll be guiding you through the process. Check out the provided links for more resources and tutorials. Feel free to ask questions during the workshop or reach out to me on Discord or the chat. Let's get started with Next.js documentation and a quick talk on connecting Storyblock with Next.js. The workshop will focus on building a multilingual website and using the atomic design methodology. We'll also explore deploying with Octopus and planning your website with Next.js technology hub. Don't miss the talk on building an e-commerce solution with Next.js and Storyblock. Let's dive into the workshop!

Yeah I cannot pass a link but I will pass the link to the notion of it's probably a little bit later if then you will. But why not? I can share that around the storybook. Sorry. Yeah, sure. And I want to get as a template. Yes. Comments. Not not. So I need to have this link. And here is the notion page. And all who want to. I don't know. And also in the disco.

So the next thing will be creating pages probably understand how the dynamic routing of dynamic routing routing works in the next dress, which is not very complicated. Or maybe there is like kind of we will take the easiest approach. And if you have a time we will probably also check out how works the multilanguage in the storybook and how and how to render the website like with the multilanguage also, of course. And maybe we will get to the deploying to life, which is like not necessary. Like take it as optional because like deploying to the life is basically the last that we're just taking care of. And in the case of next dress, it's more or less I think he care about taking care of the risk, which is very straightforward during the whole workshop. There will be at least one break. Let's say a five minute break where we can get another water drink or get the toilet and also there will be always option to ask your questions, your questions or you want to have any question during the workshop, just write me on the discord or the chat or even in the Q&A. And if you want to say it like you can also like raise the hand and I will let you know to tell something or even it can happen that I say something wrong. You know that it's wrong then tell me and we can also like it's workshop which we are building together something. So we will be building the website together. The requirements for this workshop or sorry the timing very quickly. One more time. It's from 5 p.m. I guess it's over like two and half hours and then we will leave like 13 minutes for Q&A or such stuff maybe we will be faster and we will see and hopefully it will not take a longer time and as I don't want to go really like super deep. It's about to get a basics and how this stuff works. So the requirement are there really not a big requirements. I mean, I have their github account. You didn't have to follow and continue coding. I will be the coder. I will be showing you you are here to watch it because everything I will be showing there is a very nice tutorial which is here exactly. Not this Twitter, but this tutorial. Which is the basically the complete guide to build a full-blown multi language website with Next.js. It's already public. And it's already a few times updated and I will do a bit also like tomorrow or this week because there is already a new approach with hooks, which I will be showing you how to integrate Storyblock with hook, with Next.js. And in this in this case you can use a GetStaticProp. The current tutorial you see here is not covering to get static prop, but there is another tutorial on the Storyblock website, which is covering them. So if you don't want to wait, you can jump also directly to these... Basically to these tutorials, read them through and more or less you will learn all the stuff that I will be showing you. So... Doesn't mean that it's easier to watch somebody else to do it and then ask them. So let's then denote this. Of course, recommendation preparation. There are like no big ones Because there's like, of course, some React and Agile, optionally Git. Workshop you are following. What is the link in this to this workshop? You're following. Yes, of course. I can share that. I will share all the links. Don't worry. So here is also the Netero link I show you. I should always send link as soon as I do it. I show you. So then, of course, If you go to the this is wrong. So if you if you also go here into the into the notion you will I will give you here the list of all the interesting links I prepared for you. So of course you already have the links the completed build guide to the builderful multilingual website. Also, this is like introducing the atomic design by Bradford also the Atomic Design book, which I haven't which is also very very nice book. And you are like in from the agency war to your building website or you want to build a websites very fast and you want to reuse your components. This is something I did or totally recommend you check it out read it through or take inspiration. There are many methodologies but in general the atomic design is something where everything begins and then you can build on top of that and create your own methodology. Use your own naming. So I don't also prefer like atoms molecules. They use the different abstractions, of course, Verso. If you are going for next try and do in Verso or netlify or like tons of other tutorials how to deploy story block is that CMS we will be show I will be showing you and how to use it together with nexjes. So I mean maybe sometimes we will be more focusing on the story block than the nexjes because the nexjes is really like the easy part here. Maybe today octopus is one of the tool. I will be showing you in short and how we will be showing you how to build or how to plan your website and how you should like cut it into the pieces or like components and stuff like that. Then the you have here the Nextjs technology hub which is another important link maybe that you should check out later and here you will find anything that you need to know to connect basically story block with the nextjs. So here is like also video of me doing a 30 minutes quick talk about that and then they're very fast getting started which we will we should get through a little bit or I will show you what is the result of you getting started and this doesn't require basically anything just for getting started. You just need to create an account in Storyblock and using I will show you in a second understand and of course link for the multi-language website some by role polite a lot of links how to do a stuff with nextjs also pointed to the nextjs documentation plus the Storyblock community if you want to ask me directly and also the github and where you can request the features or bugs plus some samples the projects built with nextjs already check it out and some cheat sheet for the nextjs oh and don't forget also how to build a storefront or E-commerce solution with nextjs and the bcommerce and I can also recommend one more thing that I totally forgot because it's very interesting and that's you go to search and you call for just vault conference. There is also this video of Liz Leinhart which is my colleague and I will show it to you, talking about how to build also E-commerce solution with the nextjs and storyblocks and sorry nextcommerce which is nextjs just also for the nextcommerce. So I will add it to the notion that everybody has it. So this is the nextcommerce story block. And that you know this is the video. Great. I just check the questions. There are no questions, any hand raised, no, no hands. So great. Do you have any questions or something you missed? Then let me know.

So what next? The Next.js documentation, of course, something where you should learn Next.js. Definitely go there, try that. Versa is doing a good job to creating more and more better documentation. Then here is the talk from the nextConf, this is my talk, basically, more or less if you don't have two and a half hours, then go check it out. It's a 30 minutes and in the 30 minutes, very fast pace, I will connect to a sample website with the story blog, with next.js, build everything together, show the major features, why I think it's great and why I like it, and even for me who is coming from the Vue.js world, which I should also mention in the beginning, probably that's very easy to work with Next.js and story blog because the gemstack is super easy and super fast. Right. So that was quite basically a quick introduction of the of the course and what we will be doing today. It will be a crash course, as I said.

3. Introduction and Design Overview

Short description:

I will start by introducing myself as Semyon Snopko, the head of developer relations at Storyblog. I have experience with Vue.js, Next.js, and React. I didn't like the restrictions of monolithic CSS and the challenges of managing content in new frameworks. That's when I discovered headless CMSs and the gem stack. I found Storybook and became an ambassador for its approach. Today, we will build a website based on my design, which includes a header, hero area, feature articles, a Twitter banner, and a footer. We will follow the atomic design methodology. Let's get started!

And now we will start to covering. I will check my time. So, okay, I just already like over 10 minutes. So the course schedule, the introduction of me and I miss your link. There was a link. So me, you can see me. My name is Semyon Snopko. As I said, I'm head of the developer relations at Storyblog. I am usually working with Vue.js and Next.js and also like learning a React on Next.js.

So originally I'm doing learning more and more about the Next.js and how we can use Next.js together. I am also I should also mention that I'm originally from Slovakia. I lived some time in Germany and now I am living in Austria, where is also the story block based from. So if you want to know basically more about me, you could check me and follow me on the Twitter. We definitely recommend. I don't know why, but you should. So Semmel is my name. And you can ask me also questions anytime directly on the Twitter. I'm always answering my DM's so far open to anybody because I didn't get any crazy messages so far. So feel free to follow me and ask me anything on the Twitter directly. I'm posting different stuff, mainly about the Jamstack Headless, sometimes main Vue JS, sometimes Next JS. So this is like Twitter Semmel. Yeah, whatever. It's probably nothing. So that's me. And what I'm doing like also I was a front end developer, as probably a lot of you here. I was building a website, different website. Mainly, I was considering myself as CSS guru.

And my story is that as a CSS guru, I was, I didn't like a lot that all the monolithic big CSS is because they like give you a lot of restrictions, how you should build which language, which templating language you should use, how you basically build the stuff. And as soon as you wanted to build something, you had to take a lot of JavaScript to edit your whole HTML or like you had to go and build a right code into the CMS, which was like against my feelings. You don't know where the code is changing that is coming from. You could see the versioning of it. So there was a lot of known ways I didn't like about. Then I got an opportunity to get a new project in the company and I choose a new framework. That time, I choose NextJS. Next, not next. But this time, Next. And this was like, I really liked because the learning curve and everything. But there was like still something I was missing. And the missing part was like how to manage your content. Because, yep, the headless CMS or the good, based CMS is even the monolithic is like great for the developers. But there was like still problem like how I should defer this new framework, which was great, powerful. The NextJS and then both of them were like build. Everything was great to build with them. And how to get my content editors on board. And then I found out about the headless CMSs and the gem stack and the whole idea of the gem stack and building the static websites basically, or like servers I rent statically rendered website or that's SSR. And the second for short, I forgot, of course, is server side renders. Yes, correct. And basically what happens is that I was checking out the universe or the ecosystem of the headless CMSs and I found storybook and I was like, really, it was like a huge thing for me as I found out there are great tutorials. And then I wrote to the support channel directly and then suddenly they answer me like no, no, like like people answer like real people. And I ask for some minor features and they were deployed next day because they felt that there was like great idea. So I made a friend there by accident. They are also from Austria as I'm leaving this like it's like two countries next to each other. And then somehow I get a kids and I was like, really, like, always, like, ambassador of StoryBlog and the whole approach over the headless and Gemstack I thought like this is like the best thing which happened to me after atomic design and even like mess. Because it's worked on the top, on the atomic design, you can build like your stuff from the design systems exactly as you would like to your you don't have a restriction. The only restriction is what you want to do, basically. And from that, it came to the point that I moved to Austria because of the kids. And then I joined the company and now I'm here. So that was in a form of me about me. And I will spend a lot of time about me. So now start showing you something. So lets you should prepare the design and simple portfolio, one page. So what we are going to try to build today and I try to show you basically the final screen. So we are going to build this website which is in the abstract. This is the tool for websites similar to sketch. But this is like for the handover of the final designs. So. And the question is like how you are going to build this. So this is my design and we need to build it. So if I go here and I stop from up and down, there's like nothing special. So we have like a header then we have a header. Sorry. We have a menu bar or header bar then we have a hero area where it's like of course a title, some text picture. Then we have like feature articles where we feature some other articles that's probably also exist as entities or objects in my CMS. I need to take care of them, create articles. And I have some other stuff which is like Twitter or let's call it a banner where you can like click on the Twitter and go and check out the Twitter of your website or like of your company, how where you can be contacted or like what is your email. And then, of course, we have a like footer and we want to build something similar where and like in the jams that way. So that is where we are heading and why are we trying to do. And then probably what I would try to also create something like a page for the article. So as you can see here already, like very similar, the menu here, it's almost the same. Then we have the header title. Then we have a title article with some text. Auturname and then bottom it's again some related articles component which looks very similar to the featured articles. And then, of course, on bottom, there is something like a footer. So this is our final design. What we are going to build. First of all, how we are going to build it. So first of all, I mentioned something which was atomic design and atomic design. And I'm always like if I'm looking on the left side, I or right side on your screens. I'm looking if there are any questions. So what here is happening, so how to start like you get a design from your designers, they just do whatever they want to do and they build something which looks nice.

4. Atomic Design Methodology

Short description:

The atomic design methodology involves building a website or application by defining atoms, which are small components, and combining them to create molecules, organisms, templates, and pages. This approach allows for flexibility and scalability. Designers may not think in terms of atoms and pages, so it's important to let them experiment with the design.

Then, of course, there is some business manager who say, yeah, I like this design. So let's build it. And then came to us, the developers to start to build it. And the big question is, like, you can like hard coded, you can like create the forms with all the input fields like for the for the headline. So if I move you like you will create a form where you will build a like template for the home page and all times you would just get like, hey, here is a input field for a title. Here's an input field for a text. There is input for a feed for the picture. And you just feel all the input fields like in like static form, which is like usually the way you can get like in the headless CMS. Also, like WordPress, for example, or in all or in all other instances of the CMSs, content management systems. And then this is this has two problems. That's first, it's a static. So if somebody come and say like, hey, we would like to get something different on this website, we would like to experiment with it or we have we would like to have something modern, then you have to go there as a developer and build the new forms into the template or you don't have because you are really giving a lot of options to the people. Then, of course, you are not releasing the part of the website because everything is basically a form that form can the whole form can be moved to the Nephraeum website. So you are creating a lot of templates like you will be creating also template for the article page probably. And that's great. I mean, like it works for a small website. This works also in many cases. It works. But at the end of the day, then always came some designer content editor, content manager or somebody who was like, hey, I would like to, you know, like I know that that flow or other page builder and you can build and move the stuff and everything. And they're like, hey, I would like to create something like that. That I can I can really explain without this website. I can easily change it. And I don't want to have you. I don't want to ask every time you if I need to do a change like you as a developer. And then came to idea like to Atomic Design. So how to build a website from small pieces to bigger model. So the idea is quite old already. So basically the article was written in 2011. I'm like now guessing. But I know that it was pretty old. I don't remember any more the date. And it's from the Atomic Design, basically developers of the idea of the design system. So what Brett Frost came to idea is basically that it's also like the idea that I really like this quote from Stephen Hayden, that we are not designing the pages at the end. We are designing system of the components. So also you think about every page, the page is built from some parts, components, building blocks, sections. And this, this now are many things. And there are many methodologies, how to name it. But at the end, like let's call it the atomic design for now. And the question is like how to get it. So what is the atomic is designed? Is that this methodology built from the periodic table. So we have atoms. And from those atoms, we are building the bigger play bigger, bigger stuff, bigger components. And in this case, like literally they take to the names and just do like atoms, molecules, organisms, templates and pages. And it doesn't have to be your case. You can take inspiration. And then, of course, like do your all naming your own like definition of what kind of stuff you need. But in the end, every time it's like building the website or the application or whatever we are building, because this is also about like if you are using a React native, you can build those from the components and putting together the components. You're creating a bigger component. And then after some time, you have a final application. So and what is it about is like you define atoms from those items to create the molecules for molecules, like bigger stuff and bigger stuff. And you get to do pages where you have already, like real content. So you could read this article or I could also give you some I could show you a little video where it's very nicely explained. So let's do that. So if I go to Notion give me a second, so just read all of this. So there is like very nice video explaining that. I will stop the music, so basically the atomic design is that you are building and crafting from a small parts, and what is happening here. And I hope the atomic design video is working for you because I don't know, I'm streaming. So how does it work at a moment? And you were create the design so you just define a small part like like the basic like the buttons or input fields here. So it's very, very small, like nothing, nothing else. And you have like different versions of the button. So you have a white button. You have a red button. Then you have a like black button. But then you put input field and button together and create a molecule. So it's like a search form or something that you can use on multiplaces. After that, of course, you create a bigger organism where it's like search, for example, is added to the header, like your header bar on the website, and you have something you can race on many pages. Like it's defined. But you can use it. The small parts on many places. Then, of course, you create a template, which is like no content like it's like where you will feel the contents are already like template of the page, which consists of many different options. Like you can have, like, many templates and on those templates, you can use a different component, so many different molecules. So here in this case, if I look on here, I see here that this is a molecule on the top the header. Then, of course, the other molecule will be basically the hero right here. So the Lorenz and Dallorz I'm at with the big picture. And of course, like this other area would be another so-called molecule. Sorry, organism or component or section, or whatever you will call it. And after all of that, then we will create a page in the moment as we fill it with a real content, and the real content is created by not multiple ways, but basically you give a template to your content editors, but the template has some set of rules usually. So like you can fill here an image which has to be a at least so big, or for example, the headline can have a maximum of 100 characters. So already in the template or like in the molecules are some definition of the small pieces, like how much of what. And after all, as you can see, you create basically a website. There is one question which I always love to talk about, and that's something which I will just open again link. Because sometimes this is the great ways for the developers. As a developer, you can build from small pieces to the bigger one. And at the end, you get the pages and the abstractions. Great. It's worked for us, for everybody, like for the developers. But it doesn't work really for the designers. They cannot think literally from atoms to the pages. So so if you speak with the designers, don't press them to that. Let them let them experience and experiment with the design.

5. Designing Website Components

Short description:

When designing a website, it's important to start with bigger parts like organisms instead of individual pages. This allows for exploration and alignment between designers and developers. By starting with organisms, developers can quickly construct molecules, atoms, and pages. It's crucial to involve the client early on to ensure their preferences are met and to avoid wasting time on unwanted features. The Atomic Design book is a valuable resource for understanding this methodology. In this workshop, we will be using Octopus Tool to design our website, which is framework-independent. We will create a map of the pages we need and determine the components to build the website. Let's start by designing the header and footer components.

They have a lot of, like, how it's called in English, blind stops or like a full basically a roadblocks where they explore some idea and they find out this is the wrong way and they have to go back and start again. And they're creating a nice, a real good design. They what everybody usually did is like started with the pages and then those pages they're using. But that's also too much because you invest too much time into creating a pages. And that's why I always think like you should start to create or start with organisms.

So if you speak with your designer designer or like in your team as a team, the best way how to do a workshop on the building website is think about like some some bigger parts, not the smallest one, not the biggest ones, but something that already makes sense. You can speak about like how the visual language is there. How how are the colors? If you want to use those colors or not use the colors and then you as the developers, you can you can then construct those organisms to molecules and atoms, but also from those organisms can these are built very fast. The pages and then the pages is something you will usually present to the five as a final spot of the client. But for the client and first steps, you all also very often you can take organisms and like a step back from the whole pages and let them explore how to they like it. And I know like this is not exactly like developing stuff still, but this is important for you as a developer. Don't lose and don't invest too much time in building something that your client at the end of the day don't want. So if they like what they going to get and you know that is the possibility built with the component, then you is even situation. So that's my point here.

OK, so that was the Atomic Design and then one last thing is the Atomic Design book. So I think you can still order the book. Order it. It's it's it's not a big book. I don't know if I hear it somewhere here because I still don't, I moved and I don't know, like, where's the book is that is quite thin. It's not a huge thing that you will have to read for a long time.

OK, so what we are going to do now. So now we should at this time. So we have a website and I will have to drink. So we are going to design our website. And what does it mean is like this is like the first step. No question it's cool. So this is the first step where we start to think about like how we will build a website and it doesn't matter what framework we are going to do. Still like this is all a framework independent, even like the gem stack, like the whole idea of the headless and jumpstack is the framework independent. That's the cool about it. So we are going to design a website using the octopus. So we have this abstract. Yep. So this is our website. This is our article. Let's go to the home page. This is our home page. And then I have here my browser, which is Octopus Tool. And the Octopus Tool is basically something I am using for the workshop and you can use it for anything, like you all like to. I like it. The visualization is easy and it's cool for a workshop. But you can use like mirror. You can use the flip chart and the markers. You can cut you can print your pages and cut it to the pieces. If you want. It's totally up to you. So what I am doing here and in what way I am showing the Octopus in the Octopus Tool is that basically we are going to build something like this. So we are going to think what are going to be our website. So this is a sample of what it could be. But what I am going to do. So we have a fast like empty stuff here. So let's throw everything away. We don't need it. So great. Then we will have some page probably. And these are like the template. So we have a main page or let's call it the home page as a template. And then we know that we have article page. Usually we would have maybe a about page, of course. So I'm going to creating something like a map. Then we could have our page if we have a detail page for our author. So there's like something creating like, OK, we know that how many and what kind of pages do we need and what and now we need to think about like what components from what will be built this website or these types of sites. So let's get to make to my design and let's start with it. So, OK, I will just do this. Usually I would do this like on the flip chart or something else. But for this I just find out that this is great to use just here are the screenshots. So I just do a screenshot and I just now start thinking like how I'm going to cut this. So you think about it. Then I'm cutting that in many many pieces. So let's start. And OK, we could cut it like this, but OK, maybe it's not the right. So let's start with something we are hundred percent sure. So first of all, we will cut and we will create like this header. So I could like call it header. I just let's go on the side and let's do it this way. We can see also this on here and we see everything on the screen. So we have something header here. I will just add the text. It's here. Yeah, it is here. So this will be like header. So this is header. Great. So we need here to add a header. This is a component that we will have somewhere. So great. We have a header. Next component is probably a footer because these are easy, easy ones. So we already have like footer and I can text the text and I would have a footer, right? Oh, I didn't want to do that. Just add a footer. Of course, I have a footer.

6. Designing Components and Reusability

Short description:

We identified the header and footer components that will be present on every page. We also designed the HeroArea component and discussed its reusability. Additionally, we explored the creation of the featured articles component and its usage on multiple pages. We considered the option of adding more articles and discussed the importance of preparing components for different content variations. Finally, we created the article teaser component, which can be reused in various contexts.

And this is something what you can like already know that it will be on every page almost. You can have like some special character there or you can just move it very quickly. As I am doing right now. So, great. I just know that the header and the footer is like raised on every page and I already identify something.

Hey guys, I'm able to join a worker. I get redirected to ED.EDT. I'm not sure how can access the worker. OK, give me a second. I just sent a link. I will just go to this browser. All right. Question answered. So where I was. Okay. Header and the footer. So we created and defined that we need a header and a footer. Then if I look on the website here, I need other stuff. And in this case, I can start cutting. Probably I would be cutting like this. And this will be, I'll let change a color to it also. Ah, I'll come on, to blue. And I need to add a text. Tag. And the text will be also blue, just to make it clear. And this will be like HeroArea. And the good thing is sometimes you have components that are similar. So, for example, here I can add, no, I was adding wrong. Here. So this will be like HeroArea. HeroArea or just a Hero, whatever we call it. And the Hero can be, of course, you can see also the order. So you have like the abstraction. You are not focusing on the design only because you can take this always and discuss, like, hey, make it sense in the big picture. Don't you want to use, like this hero also on the outer area? Like this hero can be now used also, like let's say, we'd like to use it on the above page. And this is like something that you will allow that it will be able to use also on the hero page, sorry above page. You don't want to make do use it on the article page, but you are already defining a components that can be reused on many different places. That's the components. And of course, I cut it here wrong.

Then next, then we have something here called, oops, these articles. And these articles, there are one, two special things about them. So first of all, there's some kind of grids. What I definitely recommend is don't go to the thinking of the developers, try to stay into the context. So here I have a featured articles and this user, right? We use, let's use a green. So the feature articles could be all called, for example, featured articles. So if I go, also, like they take the text, I added here and I changed the text to the green just for you to have it. I hope it's a readable. So this could be like featured articles. And there's like totally okay. If it's like special, special component, let's call it featured articles. And it's something like we want to use here. So like I just added here, I call it featured articles and have it featured articles. And great, I have a header, here are featured articles and footer. But if you remember correctly, then we had here also another page. And I hope I didn't lose this. I will not lose this and I shouldn't. So, and this was the second page. And yeah, we will have it now. So I now have here are... Sorry, the homepage and I have also the article page. And if you think about this, then this article, which is... Sorry, the component here on the bottom, which is called a related article is also very similar to the featured articles. So either way, you can keep the name featured article or you can, for example, change this to something which I then of course, love to use this article listing. And then basically you would use the same thing here that you know that this part here is also an article listing articles, for example. So now we have identified that there are like two pages again, so these featured articles, let's delete them because we changed the name, so articles listing. And we want to reuse it here on the article page. So when we, at the moment know that we have article list thing also on the second page, and there's like many other stuff, so it doesn't matter that it has to look the same on the every page. Because at the moment, it looked like there is only change in the name of basically of which how you feel the content. And this is correct. The second option, of course, is that you could have here like more articles. This is one change that they you just add more content. So what will happen you will prepare your components for that, or add a step. What you can do is also like include some optional checkboxes or options in the story in the storyboard or the headless CMS, which your content editors will basically decide to how it will be rendered. So maybe you will, you would like to have a different derivative, we would like to articles in the row under each other all the time. So that all options we will be showing later. And if you think about this, what I'm doing here, it's just basically cutting my website to the small pieces and I will restart my camera, give me a second. Ah, it's okay, it's focused now. So, but there is one more thing we told them about atomic design. And if you think about it, it's a, for example, the article teaser here. So this is the article one, article two, article three can be used theoretically on many other components. It doesn't have to be only in the article listing. We could have also like featured articles and then related articles. And in those articles, we're using the same component called a teaser. So if I take like now the cutting and I will take, for example, the pink one, then I can basically cut that this is something and I will of course name it article teaser. And this article teaser is the purple thingy here. So give different color and purple one, oh, sorry, the pink one. And basically I created the article teaser. So I have here three article teasers. So if you think about it, these three are article teasers that are reused. And yeah, this can be like this.

7. Designing and Coding Components

Short description:

Stick to using components and avoid going into small pieces in the CMS. Design components with the input of the design and content teams. Use the same component but render it differently based on the page type. Feedback and questions from the audience are welcome. Next, we will start coding by setting up Next.js.

So and these are not my item. These in this case are my items, because yes you could go ahead and have a headline but sometimes you don't need it. So in the case of the headless CMS or in the CMS, you wouldn't go to small pieces. I don't recommend that because it will be too much complex for your content editors and your marketers all the people, the non-deaf people who are using the CMS to edit and build your website.

So as a developer, I recommend you like stick to this. Yes, in the Next.js, you can go so deep that you will create even small items called like our headline or something like that. And the last thing, what I do definitely do is like created this banner. So it's quite easy because it's even white. So it's something you think about like, hey, this should be probably cut it. So I can make it a little bit smaller. And I mean, like this usually you should do with your design team or the content editor team or to marketor team or like with the people who will be using at the end, the software to build the website. Because if they understand what they are building from which component and what they have to do to edit those components, they will be very, very happy. So in this case, this green one will quickly, let's make it brown and let's call it a banner, whatever. Sorry. Copy. Okay, that's funny, I cannot change it. So, and this will be banner or a social banner. And let's change the color of it. And basically you see that I, at the moment, identify on the homepage are components. And then what I will be doing, I will be not like hundred words and continue here now. I will be focusing here. So I will add it also into my like, the big Oreo. So now I want to add also the article this, I have. So I have a social banner and the social banner also can be added like in different things, sorry, it could be a different layout, how it will be rendered as options, or it can be used for example, on different pages. So if I click here, then we can enable it also on about page. So, and in the future, if you think about it, and come somebody to me, I will say like, okay, I allowed to use the social banner on the homepage and on the about page or the page of homepage type and page of about page type and then somebody tell me that, hey, I would like to create that social banner also on the outer page, then you just can go and allow it. You don't have to do any edits basically, because if you set up correctly on Next.js to correctly accept the dynamic components, the headless CMS will send you that, hey, you should render a social banner here and the system will just render it here. And the same thing you could do also like with you where, and now I will be not sketching a lot, but basically you have two approaches. So this is the article and you could have like also hero. So basically this is gonna be like hero, like homepage, like special one and then here on the article, you probably you would have a definite hero call, maybe article type or, and then you have a, two different heroes, like two different components and that's okay. But if those components are very similar, like, check it here, like, like, like, like these two articles. So hero era here has a headline text or some description or subtitle or whatever we call it and the picture. And here on the article, we have a title or headline, then we have a subtitle here. So this is a hero era here, then we have a subtitle or a description or text and then we have a picture. So those two are quite similar or even I would say like the same in the way of building. Like if you, if you zoom out and look from the bird perspective on it, those are built from the same components. They just look differently and you don't need to definitely create like two different components for this. Maybe you need to create like two, two versions. Like version, version, the homepage. And then you will have only some bullying in your headless CMS or in the CMS which you say like, hey render this in as this or render this as this or even you don't need to have anything. You just use the same component but if it is rendered on the page of type article you will render it differently as you would render it if you are rendering it on the homepage. But from the content perspective and the data you are getting is the same thing. Okay, do you have any questions maybe about this? If you want to ask or say something, just raise your hand and I will let you write, sorry I will invite you and you can tell it directly to everybody. So far so good? Very nice. And any feedback, do you like it? Should I go more to the coding stuff or is it does it make for sense for you? Did you expect something different? So far everything's on fire. Great, nice. Guys, nice. Just give me some feedback. It's strange to speaking directly to the screen, like I don't see any faces, I don't see any this motion, so it's hard to know if everything's working okay. So great. What's next? So I will probably save this pictures. Okay. Yes, I don't want to delete and then I don't want to delete. So, notion, where's the notion now? So there is a notion. Oh yeah, one more thing. So in the next just works up this like little bit older one which has building and what it's a different look on the same thing. So what created here is like, only if you, like you look on this now. You can stay, you can know what you probably building and what kind of website it will be. So like here, like you're here in your intro section, there will be a grid which grid can contain different stuff, newsletter section. And then of course you can see here like the article page has a rich text editor image, which is probably a resource for the text. Then the image sponsor banner newsletter section. So the newsletter section can be used on different pages also and the about page skills, be your newsletter section. And if you think about this, there's like a simulation or like Schema or skeleton of very easy portfolio page. Okay, so we basically get through the designing using the Octopus and now we should start coding. So we will be going to the next gestures setup and set up in our app. So hopefully everything will work and then we will create a homepage with dump data or maybe we will jump to doing getting started to Storyblock just to get you some glimpse what and how it will work. Sorry, I'm just restarting my camera. Hi, I'm not able to attend to workshop entirely. Will the recording be available? Yes, the recording will be available. The question to the, so yes. So how to start with Nick Just setup? I don't know like how many of you is here. How good with the storyblock? Sorry, with Nick Just. But basically, the Nick Just is very easy to start. So all I am going to use a yarn and we are going to go for a yarn create next app. So let's hope everything will go correct because now it's that's fun. So yes, create a yarn, create next app and let's call it Next Work Shop. And I will be doing a lot of copy pasting. So and now at the moment, basically I'm following the tutorial I just mentioned. So what's happened here and what I recommend you just usually always use a yarn create or an NPM create next app. And why I recommend it is that, basically you can create your own startup, your own startup, but it's better because the people who are responsible for the next JS project or the next project or any other framework, keep this stuff up to date. So you will get all this up to date stuff. So here now I can do a cd next workshop. I will all the code editor there. So great, I'm opening the code editor and basically I'm doing yarn death because it's set in the readme file. If I will open readme file, it's basically saying that I should say, do a yarn death. Of course, if you would be cloning, then you will have to install first. So let's go to... Oh, I can close this one because I have this one and then I have this. Sorry for all the jumping now. And now on the localhost, I have my next JS.

8. Creating Dummy Data and Connecting with Storyblock

Short description:

You can start by creating a dummy data with static content to quickly build a website without connecting it to Storyblock. To connect with Storyblock, you can follow the getting started guide and create an empty space. The empty space already contains dummy content for you to work with. You can use the visual editor to edit the content as you would in any other Headless CMS. You can also preview your draft and published data. From these data, you can render your website or build any other application.

So it started and you can already read documentation and this is like a great starter page, and you can start here very easily, very fast. It's running on my localhost and you can see, okay, I have a page, right? I can learn about... I can learn about the documentation, how to learn it, some examples, and also some deployment. So what I need to do next and how to learn and connect this with story block is there's two ways you can approach this.

The first way is like you starting create a dummy data. So what I mean with dummy data is that... I will just hide this. So you will just take this component and you build them with a dummy static content here. So you open an Index.js. Then you see here, I have here the create-next-js-project and there's welcome to the next.js. I could just change this to, welcome to the next.js workshop plus a story block. I can remove this probably yes, save it. And if I go to the local host, then I see like welcome to the next.js workshop and story block. So what I would do is basically create here a component page, a folder, sorry. And in component folder, I would create a lot of components with a static content. So I would just build everything without connecting it with the story block because I can connect it later. This is sometimes useful because sometimes you just need to do a very quick POC you don't need to have a headless CMS, they can't so you don't need the story block. Basically, you just need to show how the website will look like we want to build something very quickly. And you're confident, don't care about like editing because it's POC.

And, in the next step of POC, probably they would like to ask you like how we will edit this content. So for that you have to connect with something. And to connect and start to connect it with story block, you have multiple ways how to do it. I definitely first of all recommend you to go for a getting started. So the getting started here of the story block is that how you do it very easily and how to how to set up the project. So you create a new space. So basically you will just go and go to the app you will you go to storyblock.com, then you will of course, register, you will set you are developer and you can then also create a new space. So the app and how to create a new space is you will enter the screen like this, which is a dashboard of all of your projects as developer using your email address. You can have, of course, multiple email addresses, but here you can see all my favorite projects or the project that I am usually building a work a bit, but I have like tons of them. So just for your example, for your imagination, how many of your, you can have. On these projects I have a different right. Sometimes I am only editor, like for example, the storyblock.com, where I am not a developer because we have a developers who take care of that. And I don't want, I shouldn't jump to they do their work or do some by accident, something wrong, because I don't know what is the context. Why, why, why, why should I have those rights? And then of course I have like projects where I do demos and I do a lot of like experimentation. So that's my project and I can invite other people. So you have a project where you have a different right. Somewhere you're admins, somewhere you're like just content editor, somewhere you are just a visitor kind of. So anything you will set up and create for yourself or on your team. One of the project I wanted to mention here is the getting started. So the getting started is basically what you will create. So it's, if we go through the getting started, you just create an empty space and the empty space is not really empty in the story block. It's a little bit, it's added a dummy content for you just to have something there. So if you look here in the content, I write out the story block and this was the dashboard so I'm not going to do a full demo of the story block here. I just expect that kind of you will understand some of these things. So the dashboard over there of course. And then in the content section, you will see that I have here a home and the home is like the story or which represented a homepage that it have a name home in this case. And there is added already like four components. So if I go to components actually, where you as a developer define component, and in this case, you will have like feature grid page and teaser and I can prove this very quickly. Just go to app store, sorry, the story block created new space, create empty space, like temporary space, let's say I just create, I can close this tutorial and you see here there is a home and in the home, there is basically empty editor. So I have here some visual editor, which is not set up at the moment and I will sit there in second. And there is a content editor on the right hand side. What you always can do is minimize also the visual editor and enjoy only the content editor. And sometimes this is useful if you help stories or the entities that are not represented by the individual page or the layer. So here you can edit basically the content as you would do in any other Headless CMS. So that is what you will get and all you need to do to try the getting started and basically also, all you need to do to show it to some people. Of course, if you want to show the story blog in general, I can also recommend call for play demo and there's like full, so it will set up the whole project with the deployment URLs, links, and everything like that what you need on top of the NUC.js project, which is not necessary and it doesn't change anything because it's same experiences with the NUC.js. So back to the getting started. So we're getting started. The first step is create a new space. Then we will check what is the space. So we have a little bit explanation, what you can do and what you do here. So you can like prepare the data and change the data here so you can play with data, just to prove that. Also, that I should let it open. Let's hope this is the content. You can go here, open it, and you can see that I can always did like change the stuff here. Hi, next workshop. I can save it. I can publish it, and if I would have a webhook set up on the publish, then I would trigger the deployment to Versa for example. Of course I can change the statuses of the story, and then if I would try to publish, for example it will not allow me to publish because I'm not allowed to do that in the reviewing stage logically. So that's kind of change, and of course I can preview also my draft JSON. So basically the data and how I will get them. So this is what I will expect and get in my next application and from these data I will render my website in this case or any other application, if you want to build an application. And of course you can also preview your published data, so they are a little bit different because they are compressed and removed from all not necessary tokens or attributes. Great, I'm talking a lot.

9. Setting Font and Terminal Size

Short description:

I will increase the font size and terminal size. I apologize for the confusion. Let's move forward with the workshop.

I'd have to double check the discord. No, can you increase the font size? Oh yes, of course. Samuel, please increase a little bit terminal size. Oh, sorry, the terminal there was, I just show you back to terminal, but there was like nothing, literally. Yeah, I just run a yarn, create next up next workshop. So sorry, I didn't notice that you are asking for that because we will be not doing a little more in here and in the cold font size. Yeah, I will do that. Thank you. Just you, good point. So let's do this. I hope this is enough and so I will do this for now. Yeah, great. And also the website just for you that we are sure and it doesn't matter, it's okay.

10. Creating a Space and Starting Coding

Short description:

First, we prepare the data structures. Then, we create features and explain how to build the get story block. We define a content type called 'page' which contains blocks that are components. We can add different components to the body of the page, such as feature grid and teaser. The schema of the page can be edited, allowing for the addition of meta titles and reordering of components. The homepage does not have a visual preview, but we can use the code sandbox to connect with the content editor and experiment with different components. We can easily switch between different frameworks and preview the changes in real-time. Finally, we can start coding by creating a space.

Okay, so, okay, great. So they're getting started. So first of all, we prepare the data structures. So we already have that because it was created by us for us. So then we create a features, sorry. Then we have some explanation, just read through getting started because it's explained how it's build the get story block.

So here in the content, sorry, I'm just going here. You can see that this is the page is type of the page. So this is a page that's the content type and you can create many of them and define a schema of every of them. So in this case, we defend that it has a body and this body contains blocks and blocks are components and can be any of the components that I showed you a few seconds ago. What I mean with that is basically I can add here a block and then I can choose from feature grid and teaser which are those next table components define it here in the components. So if I go here, you see the feature grid and teaser are nest table components here. And the page is a content type that I use to create the homepage. So this is how the story will basically works. You are using a content types to create stories or entries. So here I choose a content type. I will add the name of the page. So a new page, and I will create a new story and in that story, as I created it as a page type, I can add into the body any other complements so far as a feature grid and teaser. And this schema of the page can be always edited like on the high level. So I can add here, meta title, whatever. So under the text, I can reorder it, save it and then it will be here like one input field and then it's here it's still, an array of my body of the components. So here I can add still the future grid and I could like add many features or teasers. I changed the order and I do the editing stuff. So that's very easy and very quickly how to do it.

And finally, let's do, what I want to show you that what we will going to build. So if, as you can see the homepage here, doesn't have a visual preview. So, and in the getting started, you need to have any bigger knowledge you can get working to get it working. So you will read through it, which I recommend, you get some ideas how the Strictly works, how the headless CMS in general also works, how the API works. So what is the draft and publish? And then you get to the point where, let's talk about a code where you need a GitHub account, because we are going to work in the code sandbox. So in the code sandbox, you can choose one of your favorite languages now. So we will be going, of course for NextJS, but I'm, and then you will just go for code and then it's the sandbox. And what you will experience is exactly what I was going to show you and I waited for it. So here you can see I have a local host, but I can go and change, for example, to the NextJS. So I have multiple values and I can initialize the getting started. And I can show you the same getting started in the local host also. So I just find the getting started. Yes, this is the getting started with NextJS. Browser, yes, exactly. So let's stop this one and show you this getting started. So let's start the yarn dev. So this is my getting started code with Git static props already and this is like, very easy for explanation and you can follow it and check it out on the code sandbox I show you here. So you just, if you click here, it's open a code sandbox with all the code and you can play with that code if you fork it, of course. So we just go there, fork it and you see it's already connected with the story block. All you have to do is replace here in the library, there is a story block JS and you have to just replace this access token to your space. And then you can play with this. So what's happening here is that we have a live editor up and running. So this is like the hello world example. So now I have the functionality. I can click here on different components and on the right hand side, they are opening. And this is all because we have a bridge, a JavaScript bridge, which connects the story, the barrier here, the I-frame of your application or our application, which is built in Next.js with exactly the content editor. So they know using the, in the draft node, that if I click on teaser, I want to open this teaser here. And if I added, for example, a new block, let's say I add a new teaser. Then you see that it's added here, empty block or atom or molecule or how we call it. And now I can add here a new text and it's instantly getting updated without me having a need to save or deploy. So I didn't redeploy that. And it's not running my localhost. It's running in the cults end box. So this is a link you can run theoretically also in a versal and Netlify, and also practically. And then you can give a private environment to your content editors. And why I am saying all of this and why I think it's important is that also, of course, there are multiple preview links. So for example, here I have a cults end box for the Nuxt.js, Nuxt.js and one of these is a wrongly named should be Gatsby. So to be honest, I don't know which one is now the Gatsby. I guess this one. So, and you can very easily switch. And if I am now in development mode, I can go for localhost because I just started my localhost, the same getting started. So I am running now localhost in the I-frame and connecting to my content editor so I can still get and do this all fancy stuff. And I could go, like for example, I could like save it. And now I could go to the teaser component and in the teaser component, for example, here in HTML, I could change this text left, I think. And then see I just changed the stuff to the left size. So it's, I as developer can work, can experiment on the content I build. But if my content editor is working on the next Jes, then they don't see that till I don't deploy it. So it's within this situation, like they are not blocked. They can work on the website and they could do all the stuff and I still do a lot of local hosts on my experiments. I can also like, interest like somehow the development mode and other stuff. Okay. Yeah, that's an old question. Any hands? No, any hands? And what's time? 1815, great. I think we are getting quite good. Maybe we will not get so far as I expected, but we will cover all the necessary stuff. So that's getting started. So how to get there. So finally, let's do some coding. So I will just reverse these changes and let's go to do some proper coding. So what we are going to do is that I donate this local host. So I need to stop it here. Yes. So let's stop this. I donate this getting started. I donated getting started. We have a local host here, right? And we not need to do create a space first.

11. Connecting Storyblock with Next.js

Short description:

Storyblock is a headless CMS that offers decoupling from frontend and backend, allowing for increased security and scalability. It provides a visual editor, supports REST and GraphQL APIs, and can be used with frameworks like Next.js. With Storyblock, you can focus on building your application while relying on their services. It follows the Atomic Design methodology, allowing for granular control over component creation. Connecting Next.js with Storyblock involves requesting data through the SDKs and rendering it. Storyblock offers a free account for 15 days, and the basic plan covers multilanguage support and simple blocks. After discussing components and mapping the design, it's time to start connecting and coding. A break is taken before coding begins, and Tailwind CSS is used to create components.

So let's go to Notion. Yes, there is a notion. So we did an external setup, how we created it, and now we created a homepage. Let's save some time and don't create directly this, and let's connect the Storyblog with Negages that I will explain how this magic works. And also explain you, I basically covered what is Storyblog, but very quickly click. So what is the Storyblog? It's the headless CMS, you have a freedom. So decoupled from frontend and backend, there is a great reason for the security because we have the experts for the security and you don't have to update your database, your CMS basically anytime. You're just using the service and we're taking care of everything. And what is good about it is like if you're using REST API, you basically update the REST API, it's suddenly faster for you. And there's other great stuff for you. So you can also focus on the creating the final application. So, and that was covered in my lightning talks and I recommend you to check it out and what I am talking about. Storyblock has the visual editor, which we will get soon and show you how to do it. Then of course focus on the product. You can scale, it's scalability. So basically as you need more, you will pay for more and you will just scale the Storyblock. If you need more spaces, you can get more spaces, you can duplicate so we just reuse the same space and the same scoped. Or if you need less, you can scale down. You can remove the number of users you need to use Storyblock and then you just pay for all what you need. And of course it's Atomic Design. So you can approach really clearly using the Atomic Design as in the granularity as deep as you need to and want. So how does it work? It's basically you have a high, a Storyblock where you can request your data using the different SDK. So we have a management API, we have a content delivery API, which are the rest full, both of them, of course. And then we have a GraphQL, which you can use, then your favorite technology in this case, probably Next.js, you will use to build your website or application and then you will render it. And if you go for e-commerce and mobile apps, I should make it bigger. Sorry. Is this possible? No, sorry. Yeah. And then of course like e-commerce, mobile, just websites, digital showrooms or any next big things like Siri or Alexa, whatever it's content. And you can just get that content through the API. And that's more or less the same thing in the Storyblock in one more picture. So you build it exactly as I show you in the Octopus, just create like what is built from you will fill the content data, then you will get the JSON and you will render. So very quickly, what is Storyblock? And... Yes, yes, yes, create an account and space. Yeah, let's say we did it. Yeah, of course I should mention that you have a free account for 15 days. You can try all the premium features. And already like the basic plan covers the multilanguage, basically everything you need for the simple block. Like if you need to have your own block then or without any problems, you can use it. And there are like no big limits that should limit you for using that for your own personal portfolio. So I kind of started explaining the components and mapping the design. And now what we need to do is start to connecting. So as I already show you and maybe I will just ask another time, are there any questions or do you have any questions? Can someone please reshare the notion that's already done. Thank you Timothy and no questions. Do you want to take a break before we start coding? We are almost in the middle. So let's take a three minutes, five minutes break. Let's take five minutes breaks. I will take something to drink again and we will see each other in five minutes, in 18, 25, and we will start by coding. All right. All right. All right. All right. All right. Okay. So I'm back. Yep, correct time works. So now we are going to code. So we created an next step and we're going to build and connect this next step with the storyblock. So first of all, we are need to create some components and we are going to use Tailwind. We are going to use Tailwind. So if I go to the storyblock and then we just create a new space one more time and call it a next workshop. So I have a new space called the next workshop and what you can see here is that basically I have here a component. So I have a feature grid page and teaser, right? Straightforward. So what do we need to do now is basically, and this is like 99% of the cases. So just checking out. There are any questions because I just moved the disco too far away. No, no, no. So if in this case, I am building an adjust component, I have to render them. So first let's say, let's connect the live Brio and then create a component. So I have here a homepage and I don't see the homepage. So it's quite easy. I want to see this page here. So this is running at the moment of local host. So what I need is like take my URL to local host, go to my Stribrick project and go to the settings. And all the need is that in the settings, there is a local location, like the different environment. I will add that local host and also here in the add new preview. So here I could add something like a local host with local host. And then for example, I could have a dev preview which could be a bars or something. I just want to like illustrate something for you. So now hit the save. And now if I go to content and open the home, I'm already getting a different thing. I'm getting a error. Local host, local host slash home. Local host refuse to connect. So that means that my local doesn't run probably. So I should start first my local host. So let's start the local host and I'm in my terminal and this is the project I just built a few minutes ago. So you see next workshop, the names that's just coincidence. I get the same name, it doesn't have to be the same name. So now reload and now I get error.

12. Connecting Components and Loading Data

Short description:

To resolve the issue of the page not being found, we need to make some changes in the Next.js project. We can either create a routing for the home page or use a hack to overwrite the home visual editor. After making the necessary changes, we can see the local host in the iframe of the story block. The next step is to connect the components and create a teaser component. We create a new folder called 'components' and add a file called 'teaser.js'. We also install Storyblock React and Tailwind. After setting up the configuration, we can start the Yarn dev command and see the changes on the page. To load data from Storyblock, we need to create a hook and a Storyblock JS file in the lib folder. This file will handle the loading of data from Storyblock.

So this page could not be found but this error is coming from the next jazz. So this is something good for us. So all I need to do or change is that we are asking for a local host slash home but if I go to the next just project and if you know a little things about it like routing here, if you look on the pages, there is no home. So I could create a Honda jazz but basically my home representing the index jazz. So I could do a routing here in the project or I could do a little hack that we did that story blog and then just overwrite my home visual editor to say like, Hey, if we are this home page or this home story represent the index. So here in the real path, I just had an empty slash and I save it. And instantly I see basically my local host in the eye frame of the story block. Great, so I'd see that individual preview and I can still like minimize it and focus on the editing if I want, or I can focus here.

The next step here is that of course, I have components here on the right-hand side. So I have some content in my page but I don't see this content here on the website and there's a problem. So I don't have a connection and I don't have the same component. But as you also like remember, we wanted to create a different component. So what kind of components are we going to create? So let's create, let's connect very quickly a teaser component. So everyone this one and save it. Just we have a teaser. And now we are going to create a teaser component in our code. So in the code, I just hide this and I just add a new folder called, just give me a second. I just jumped to the right project on the left side. I just create here a new folder, yes, called components, why components? So and the components, I want to add a new file called teaser JS of course. So I have a teaser JS component and here in the teaser JS component, I add my code. So I just copy pasted the code. I will get it to the code in a second. So what I'm doing here as you can see is that I have added react. There is something I called Storyblock react. So I didn't install this. So let's fix this. So we need to install Storyblock react, yarn, at Storyblock react. Also, we need to install Storyblock Axios if I'm correct, and let me double check what all I need to install at the moment. Now, let's install in the step by step. So Storyblock react. So I have, it's very simple component which expect that this will be getting some props and the props will be block, and then it returns that adjust HTML, which is encapsulated or wrapped in the SBA the table component, which is coming from the Storyblock react, which was just installed. So everything should work basically. And this SBA the table is getting some content block and running the HTML. So these are the SBA the table is taking care of that, that it will be clickable. Our visual preview will be clickable. And this is something which will be not render if you go for production, because you can do a simple check for that. So what is the next thing I need to do? So I created my teaser complement. That's great. So I see that I'm using here a Tailwind. So I should also install a Tailwind. So let's do that very quickly. So I did it like, and this may be too small. Just let me double check. No. So I just installed a Tailwind here. Yarn at Tailwind and post CSS preset environment, which basically is required or recommend way to install the Tailwind. So what I need to do now is just add a Tailwind. So create a post CSS file called post. Oh, give me a second. Yeah, no, this is correct. So the file called post or config, JS. And here I just add my module, Tailwind and post CSS. Great. Then I need to have also a Tailwind config.js. So new file, and it's Tailwind config.js. And add my code. So just adding a some code, right? And the last thing I of course need a front face. So let's create a public front face. Add new, and we add a front face. Of course I added also the front face and we of course need a front face. So give me a second. I just get my font faces. Ah, so the fonts are here exactly. So I just copy these files. Add them to the fonts, that is works. So what I'm doing is just setting up the tailings very quickly. And now I need to create a tailings CSS file. So I am at a new file, tailings CSS in the styles. And there, basically I just add my configuration for tailings. So what I did is adding a tailwind. And now the tailwind is almost all loaded. The last thing I need to do is load also the tailwind. So you can do that in the pages, or no here, in the appJS, and I here basically remove the global CSS and I will add a tailings CSS. And that's it. So basically if I now start the Yarn dev and everything's runs and I didn't do anything wrong, that at least my page should look different and it works and looks different. Great. I still didn't use the teaser. So what I need to do to use a teaser is to very easily to load the data from the story block. So the load data story block, it can happen multiple ways. So the first way how to do and load the data is that we need to create a hook. So I am going to use the code from Getting Started and probably I could show you that, what I am doing here that you also see and tell you maybe more idea for you. So this is my code of the Getting Started with NetJS where I already, but I followed this give me a second. It's added the tail-end and I used the teaser component here. I added also the teaser component and send mode. Yep, and as you can see, what I need to do is now load the data from the story block. So here we are doing that in the lib library. In the story block here, we create a first a story block JS file. So we can create a basically copy, paste the whole library, right? So I did here, passed and of course in the wrong move, it should be on the first page. So I have here at library. In the library, first, what I do is also loading the story block JS client, which we didn't installed.

13. Connecting Storyblock and Editing Index.js

Short description:

To connect with Storyblock, an access token is required. The token creates a connection to Storyblock and the Starblock client. The access token can be obtained from the settings API keys. The Storybook hook is already set up and takes care of live editing, updating the state, and sending it as props to the page. The hook handles change, publish, and input events. The bridge is initialized and acts as a bridge between Storyblock and the Content Editor. TypeScript and Tailwind CSS are not necessary for this project. The localhost is only accessible to the developer during development. To edit the index.js, replace the code with the getting started code and load the index.js directly in the pages. Create the layout and pages files.

So let's... oh. Yarn at starboard JS client. And of course there is an access token. This access token, this is, this will create like basically a, a connection to the story block and to the start block client. And we need to get the right access token for our created repository. So for this one, so I go back to the settings, there are API keys. And I hear, hear how the preview queue for my access token. So I took that access token. I just saved here in the store, block jest, or usually you should do that in the dot end files, but let's not waste such a time to create. Also dot end files. So I just saved here at the moment. And then I am creating here our storybook hook, which is something you just, you basically can just copy paste. You don't need to do, you don't need to do a lot of editing, editing here. So this year storybook hook is already set up for you. And what did you take care of? Is it will be taking care of all of those life editing I show I was bringing for you. So it will update a state of the story of the pro and send it as props to my page. So here we can see that I'm using the user. If I'm going to use date from rec, then of course I'm using the story book land and I'm exporting a used story book function then, which then get our original story. And then I will hear use and initialize the, even a listeners for the editing in the story book. So what are those, are those that exactly if I go to content in the homepage here, which, if I would click the safe or the publish, then this is the change event and this is the publishing and if I hit the, like open teaser and start typing, then this is the input event. So here you can see that I have a change event, publish you on an input event. So what I do here is basically, hey, just if you do a change or publish, so if I hit the buttons of safe or publish, just reload the website in the iFrame, very simple. This is all the sense to the iFrame and your application that we catch it. So you have to say set up this to just get that experience. In the case that live update, the story of the, this is the life update for the input event. So in the case you are hitting the keyboard, you are listening for the input event of course. And then there you are checking like just double checking if you are on the correct story. So basically in the event, we just send to the application or the Next.js is the whole new story, so the contents. So if we think about that, that this is the draft JSON and this draft JSON will be sent to the event of that and the next JS will catch it. So in that case, basically you will check if your story is the same that it's open in the iframe or like you are editing. And then basically you'll just add a comment. So you will update it according to the new content. So even the story content, add comment and set story with the event.story. So basically you add a new story. So you will just update the event story a little and then you will override the existing story. And then of course here is setting up also the bridge. This is initializing, which is added to the website and creating and using the story builder latest just to use a bridge between the Storyblock and the Content Editor of the JavaScript which run the whole magic. You don't need to know more basically as this will be running. And the user effects first load the bridge then initialize the event listeners. So basically these user effects, we run it after it. This sound a little bit Kickstarter-ish website which has all the projects in relation to the... Oh, there are some questions. I will look on that in a second. Is it TypeScript compatible? This project is not TypeScript compatible but the story block is in general TypeScript compatible and you can do it also TypeScript compatible. Intel is necessary for it. Is tailwind necessary, can I use this style? No, tailwind is not necessary, just answering the questions. And tailwind is not necessary for this. You can use anything you want, anything CSS, PureCSS, SASS, whatever styling you want to use them. Because you can update the whole components. You can just write the CSS directly, so whatever you would like. As far as see on the Getting Started Guide, this is only intended for the example to make a skeleton, make it nice and has nothing to do with story block. Please, Facundo or Martin Gordillo, can you then write me more? I don't know what you mean building a skeleton. And I have a Kickstarter website which has a project or a relation that there is. Please write me on the discord, Facundo. We can discuss it later Because these are like more complex questions. Ah, sorry. Okay. I was confused. Any questions? And can anyone here to StoryBlock account access to local page via browser or is it only possible with the same machine? Of course, the localhost is the question from the discord. Can anyone with access to StoryBlock account access the localhost? No, the localhost is, of course, access only for you. So it's the developer you build in the localhost. If you would want to have it for your developers, you would deploy it to Vercel in basically the same stage as you have in localhost, and then they can have the same experience as anybody. So the localhost is just really like for developer in the moment of developing. Let's hope that I answered. And now where I was. Okay. So we have also there's StoryBlock hook and this should run. So, okay. What do we need to do now? No, I didn't save this teaser. Okay, great. It's the last thing is that we still didn't get, have update. I can start yarn dev, just to be sure to show you, maybe we get some errors. I don't know now, but it should run. Yeah, we still don't have a connection. So it's still don't see this one teaser, which I have here. So what we should do is basically edit the page here, the index.js. So how to edit the index.js? This is the big question. So why and how you should, how we should do that? So first of all, we can basically replace this code and I will now replace it with getting started very quickly. So getting started is here. So make it very easily for us. Oh, I just take this getting started and replace the original one, original code. Save it. And you can see here a few missing stuff. So we are getting some errors. So what we are going to do is we are going to load the index.js directly in the pages. So we are going to ask Storyblocker, Hey, give me the data for the index.js. But first of all, you see that we are going to use here some layout and some pages. So we need to create those two files. So just take them here from directly from getting started and I will just explain them.

14. Layout, Pages, and Dynamic Components

Short description:

The layout is the way to set up the layout. The pages represent the content type and can have a body with different components. The dynamic component decides which component to render. The content.body is looped through or mapped to render each block using the dynamic component. Components can have multiple attributes and be nested in other components, creating a chain of nestable components. The same experience can be achieved by running the application on a URL in dev mode.

So the first of all, layout is just the way as direct you can set up the layout. So here in this case, we are going to have a layout compliment where we are getting all the children and we will basically dropping all the pages in this case if we are using the layout. You can do it this way, or you don't have to do it this way. And I should basically remove the diff here at the moment. This is the recommendation I found about next just to have a layout file. So where you can see I just add in a class name where I'm doing some wrapping.

Then the pages is something special because this page basically represents my content type. So in the story block, if I go here, I have here a compliment, which is a page. And this page is a content type. And on this page, I can add a body or I have one property called body of special type blocks. And this means that in these blocks, I can add any other component. But for example, I could like restrict this and say like, hey, you are allowed to add only the teasers. I can save it. And now if I would go to the content, to the homepage and adding a next block, then I am automatically adding teaser because I am not allowed to add any other blocks. And you can also set up a different stuff. So for example, for the body here, which I opened again, the schema of the page, I can define also like, hey, you can add maximum two of the teasers or other component inside. Or what is the required, if it's a required, then you have to add at least one. So now I can add more and now I am not all but able to add it, but still I don't see them. So how to do it.

So first of all, I added a page and layout. And then in the page, you see that I have a dynamic component. A dynamic component is something that we will need a little bit later, but in this case, we will use it just show you, or maybe I will do the getting starting. And then I will show you the final product that will be better because we are running out of time. So the dynamic component, now is a component which will decide which component we are going to render. So I just copy it again, and one more component I'm adding. So you can see a building slowly, the component-based and this component is like a crossroads. So you want to render a component, but you don't know what component, which order usually, because that body here now contains teaser. So I could, every time render at teaser. But if I remove that white label, sorry that a white listing and save it and remove the teaser, I can add also a grid or feature. So I don't know like in which order and what component should I render in the same time. So that's why I have something called a dynamic component. And this dynamic component in this case can render a teaser feature, grid or placeholder. So in this case, just make it a little bit easier, let's go for, for placeholder and the teaser. So we will bring those two later. So I'm going to take also placeholder, copy and add the placeholder here. So now I have a placeholder which will should take care and should be rendered every time I, I'm trying to render a component that I don't know. So here the placeholder C is like basically, Hey, placeholder, component name, just written a placeholder and the placeholder code is just, diff which renders some styling and saying like hey, this component, component name has not been created yet in the next just basically. Very simple, nothing complicated. So right? I have a dynamic component. I have a page. I have a layout. I have a teaser. So finally I should get there maybe. Or no, I need to explain the last thing here in the page why and how you will decide is just you are looping through the body. So this content.body is like what you will get to the page. It's just the content and the content.body will basically get and loop through the body or map and take every block of it and then render using the dynamic component. And now I should explain how it is done. So the dynamic component is, as you can see here, if I publish this to have a simpler JSON, I have a teaser and bridge. So if I open the publish JSON, I have here in the JSON, I have JSON or content of my whole page of the home. And here on the bottom, I have a content, I'm sorry, I have attribute called content, and in that content, I have a body. So this is exactly what I showed you here, content.body. And this body is a array of the components. So that I, something I said, so I have a array of two objects, and each of these objects, contains a definition of what kind of component it is. So this component is a teaser, and the second component is a grid, of course. So the component teaser, we already defined in the NexGES in the component grid, we didn't define it, so we should get a placeholder. And then of course, in the case of the teaser, we have also attributes called headline. So the hello world attribute can be filled in. And if I go to the storybook, and go to the components, and check out how does it look like this teaser. So I can see here that I have a sub headline, and I can easily edit it, like let's add a sub headline. We just simple text, change this, I could change it to one of these, or possible options, which is not necessary to get through all of them. I just want to show them that are like many of you can choose them. And let's say that, just save it. And, or, yeah, keep it that way. And let's go to component, homepage, open teaser, and write a sub headline. Let's publish it. And let's open a publish JSON. And now you see that I am here also the headline and also the subject line. So if I would add multiple attributes inside that component, I can basically have so many attributes as I need. And I can also add another block so I can create a never ending loop of nestable components. So that's exactly here that you have those content types and nestable components and the nestable components can be nested in any other component. And this way you can create a chain and never ending chain of a component that can be then creating different layouts, different combinations, can be reused anywhere you need, et cetera, et cetera, et cetera. So basically atomic design. Sorry, there is a question. I assume aligning text to the left on the local host as you just showed only works if you are checking this on your machine, right? Or is everything on dev machine stream back to the server? No. So back to the question, Michael Healy asked, is like, what I did is like exactly it's work on local host, but the same thing I could do, it's what I did here. So the getting started. I will show that in getting started. So I have a content box link. So here and that's a standalone server. So here the getting started. If I go to component and the home, then you can see that my local host is not running at the moment, but I could go to this NGIS and after the initialization of this, which of course I get an error now. Or did I open the wrong link? Let's wait. Let's, now it's something wrong with, of course, with content box sometimes happen. Let's wait, what happened here. So basically, what is that? It's the same thing. You just need a URL where is running your application, Nexus, Nexus, Svelte, whatever, in the dev mode or yes, in the dev mode. And in this case you will get exactly the same experience. You can even do it on only one URL. So you can have a live preview and then you can check switching between the different views. This is covered in the tutorials.

15. Aligning Components and Using Hooks

Short description:

In this section, we discuss how to align components and define schemas. We also cover the use of hooks and dynamic components. Additionally, we explore the recommended approach of using GetStaticProps to build a Next.js application. We explain how to retrieve content from the Storyblock API and render it on the page. We also mention the possibility of using preview mode and provide resources for further reading. Finally, we encounter an issue with the Talwind CSS and Axios dependencies.

I will be saying, sending. So here, for example, you see that I have a content box. I have some fancy stuff and there I can do like editing. This works with editing. But if I would have option here for the content editor, I would define a schema, which is saying like, hey, align aligned left, or call it something like that and change this Boolean, change this to a single option, no, Boolean, Boolean, save it. Then I could, I would be sending basically the value like, hey, I want to align this component to the left and if I send this value, I catch it in the Annex Jet Application, then I can basically apply a correct class to align everything to left, or this can be more context like a big, this could be also something like a defined schema, it could be like versions, version and the version could be like a single option and I could add options here like different sources of the, where it's defined, but let's have like big teaser and this could be like big and small and small, save, cancel and then I could also go for like, hey big teaser! Okay, great. This is working, this is working, so where we were. So Brave, where are you? And this is I think already done. So how we called our stuff is the next, so it's next workshop, great, the content here, this is working, the local house is here not working and we have a page and we have everything and I have to start this one and we have Index.js. It never happened in German, it's just a streaming, it'll go over your mobile connection. Yeah, nice joke, I'm in Austria and I would be very happy for any table, but sadly I don't have that and I still have to get that somehow and it's more complicated than I hope and guess. So what is here happening with the Index.js, we already get all the stuff we needed. So I have a layout page, a story block here which is getting me the story block, do I need it, do I need it? I don't think so, I need it, do I need it? Ah yes, I did it, I need it, yeah, I'm using that here and then I have here the use story block which is the hook and what I am going to do in the home and I'm going to get a props but the props to get the props reactive with the getStaticProps was a little bit tricky and you can do it with the hook I already explained to you. So the hook basically, all you need to do, I will leave my question here, yeah, I will look on to the question later. So here I have a story and this story is basically where I am getting the content of my story. And then all that I'd want to do is just wrapping the layout and rendering it in the page. So the page I already explained which expect the dynamic components and we'll decide what components in what order will be basically rendered. So I will send the prop with the content of the story and that will accept the content and then basically will map through all of them and render them. Great and in the case, if we have a teaser we will render the teaser. So this component and in the case we have any other component, we will under the placeholder because we didn't define any other components. It's quite easy. So what do we do here? Next is also to defining GetStatic props because this is a recommended way of the Next.js or from the Next.js team to how to build the Next.js application. Today, you can get a lot of other big pros or like advantages using this approach. You can have a preview mode which is not necessarily needed for Storyblock but you can also do it if you want. Check out the documentation and the articles I was sharing in the Notion. It's everything there. But what do we do here at the moment is that we have a Slack where I statically define the home Slack. And the home Slack is basically where we are getting our content for the homepage. So the home is also this page here. So the home, and you see the slack of this home story and the config is home. Because we not call it home and we could edit it to anything we want but we need to give some name to our homepage. So this home is okay and we will ask it from the home. And we will then ask the Storyblock API for it. So here you can see that I am asking for the Slack home. So the Slack here, it's added here and I am asking the Storyblock CDN basically like give me a Slack. I am also asking for the draft content. In this case, you could like go for the published content or the draft content. In this case I'm staying for the draft content. Then we also have it like it would be at preview mode which I will not cover today but there's, this is covered like in the document, sorry in the article. You can check out from my colleague written by Lizzy if I'm not mistaken. And basically just do some same version and you can change version or you can do a cache validation. And then what do you do is basically asking storybook API for, hey, give me my data and the data, or you will get a data and then you will let the data to the story. So the story and if you get a catch even you will get there a new data. So this is the first initialization of getting the data back. So this is it, like this all you need to do it's like not complicated at all. Basically you just do a cool of copy pasting and this is the something that it is at the moment on the index, the JS but you could also abstract this function out there because there I will be always repeating. And of course like for example, something like a slick you would get it from the context. I will show you in a second on a different project I already built. So here, I just save it and if I saved everything correctly then I should go here do the yarn death and we should have a connection and I will open also here the Q and A and chat. So I don't see anything in chat, of course, because I left and in the Q and A there is nothing in Q and A. So the project is running. Let's check out the local host here. So what's happening here? So, yeah, of course, I forgot to install Axios here at Axios. So you need to install Axios because it's a dependency for the story block client. Yeah, and restart. And we have a hello world read. And it's working. Our talent is not working. The question is why? Because that should work if I'm correct. Styles. Tailwind CSS. Okay. That's strange. Did I ring something wrong? Give me a second. I will just do a quick double-check. So apps style app print. Okay. Side neat to her the moment and okay. Styles tailing CSS base components potatoes pasturs come figured. Okay, why are you post confit? Post confit here is this? It is a error. Give me a second rename conflict of course. Yeah, we just Edited the fonts. Yeah, correct and yeah, certainly there is a error. Why using a future option, not enabled message web act error, Oh, come on, not today. I will just jump to the getting started and explain that problem. Elvin says, yes, what is wrong here with you? Tells you this, anybody have idea? What is saying here? Telling us this with the loader. Get brought this with note the function, now we made one more try. Just double check. Strategeist against a rocket plus talent making chase and this also so out of prefix to anyg of, I need to get out of prefix. Of course how to prefix and post. As this is, of course, rights. So now I should work later on and I should start the correct project as it is. yarn add post, says this I will install it, of course in wrong project yarn and add out to prefixer with error. Sorry for this. It always happened during the live coding. Great. So now enter and let's hope it works. And we are waiting. We are waiting. Does it work? Does it work? Building, building, building successful, still building.

16. Creating Components and Building the Website

Short description:

We created components, including a Hello World component and a grid component. We can drag and drop components and start building our website. I quickly explained how to create a component that we already have on this page. In the grid component, we have columns and we can add features. We added two new components, grid and feature, which have specific definitions. We can add features to the grid and customize their names. We can easily reorder the features and save and publish them. This allows us to quickly add new components and create a great website.

Okay, yes. And it's working, finally. Great, so what we created is like we run with a components here. So I have a Hello World and here you have also the component grid, which I already explained. We can do a drag and drop already and we can start building our website. And how I would build a website is that basically I have to switch and scratch some original plan and do a different stuff. So I will very quickly explain how to create a component that we already have on this page. And then I will explain you that on the Repositor A already have created. So I don't need to save this. I just want to show you that I have a components here and I have a grid and I have also the feature. And for example, in the grid, I have a columns which I did the attributes. And I would say like, hey, here I would like to add all the features. So let's save it. And now I have a features. And what I mean here is of course that I can, no, no, no, no. Why not save? Yeah, save. I need to add those two components. So I added a component here. I have feature and grid components and can copy paste them. Add it to the component here. And I have a grid which also renders just a random component dynamically. So it's doing also a dynamic component and using the dynamic component again. So I could replace this by feature because I restricted that in the story block to a feature. But in the case that I would like to maybe in the future add something else that like another type of the feature, it's not so clever. So let's keep it a component here and I have here the whole edit table. So everything in this works. Then I need to have in dynamic components, I need to enable or import the feature and grid. So I do this. And then the feature lastly, it's also only rendering some classes. So you can see here that basically I have a class be padding Ypsilon two and stuff like that. Right, so I added a new two components very quickly. So grid and feature, they have some definitions. So I show you that grid is accepting some columns and these columns can be used on the features. And the feature is basically a name only component where you add only a name. So now, if I go to content, then in the content you could do like I could open this grid and start to add their features. And this features I can change like, I can change like this is the feature number one, F1. This will be like F2 and this will be like F3, for example. And then can I also reorder it to the right correct order and save them and publish them. So, and now I could also change the definition of the page, here that I restricted that to two but I will like to be good restriction. And then I go there and like, I can very easily very quickly copy paste the stuff. I can rear the stuff and I can save it. Then I could always like check the versions I created and I click the first version and just very easily restored it and see what was the initial version of this. Basically it was like, hello world with empty grid. And I would add again, like my feature and do all the editing. So this works pretty fast and it works that I can add very easily a new components. And that's what something we wanted to create. So it's great. So what you do, and you see is like create a great. But the question was also like how to choose, how to edit it, how to make it even more dynamic. And to cover this as I don't have a lot of time because it's 1927 at my time. And we should have official like 30 more minutes only. Take the errand. That was a good one of course. And what should I do is like I will jump to a real project that I wanted to build with you, but I didn't manage to. But I have it on the side. Something to worry. I have here the one more repository. I will show you and present in a second. So let's forget about the getting started and let's forget about what we edited and build. Let's get to here. So this is something I was applying to, to any of it. Yes, it is. There are all the edits. So it's library, it's a hook. It's exactly what you expected. I can do a yarn dev, start localhost. So if you check here in the storyblog.js, I have some random storyblog.js ID and it starts and now if I go to localhost, then I should see some result and I should see a website. And I have a website here. It doesn't look so nice as I proposed to you, but this is something you can get. And exactly this should be running even on the version if I'm correct. So if you go to the storyblog.js, create multi-language website, which I will update this week, then you, because this is not using the hook at the moment, it's using the initial props, you can get that result exactly. And at the bottom, there should be even the Vercel link that I wanted to show you. And you can also deploy to the Vercel, whatever. And there is like how to do it. So take a look at the deployment project on the Vercel. Let's hope it's still working and it will up to date. Yes, it's working. So, and this is the Vercel link. So it's running on the Vercel. So what I want to prove with this is like, I have a local host here, and what is here, height, go bottom, yes. Here is my project, and here is a demo for it. So here is the storyblock. Next multilanguage website. And on my internet, it's still running, right? And here I can go to the content and show you the homepage. So this is exactly the same page I have on local host. And here, you can see that I have a different component. So if I click on Hello Coffee, I can change a coffee, I can do the editing, I could do upload a different image. So like I choose it a from asset management, I could define a different one. So let's upload the new and see how is the best way to destroy this. So let's go to the desktop.

17. Dynamic Content and Component Implementation

Short description:

You can create dynamic content in Next.js by using components like banner, grid, and feature. These components allow you to render different icons based on the chosen option, such as mail, phone, or Twitter. The implementation involves dividing the website into molecules, organisms, and atoms. By creating dynamic icons and loading them from the icons folder, you can easily render different icons based on the block of icon. This dynamic editing capability allows content editors and marketers to make changes without hitting save. In your Next.js code, you can define the options for these components and receive the published JSON. By using components like teaser, placeholder, page, navigation, layout, header, footer, featured, post, feature, and dynamic component, you can build a website with multiple content types, such as blog posts and pages. The routing can be dynamically handled, allowing for different rendering based on the content type. This provides flexibility and scalability for your Next.js project.

There's a talk and I have here the main image, open it and confirm it. And there's a big image and my internet is slow, of course. At a moment. So sorry for that. I hope you can see what I am showing and that it's still working. Yes. Is it uploaded? Yes, it is uploaded. So you directly see also update of the image, for example. So I could like now prior to it, like how does it look like on the mobile field? Okay, this like starting to finish. You see it like it's still would be needed to some work on the mobile or the iPad same. But this is kind of working on the iPad or the tablet view. And we can work with that. And there was like this good question like how to get the stuff like more dynamic. So you can do like dynamic content without hitting save. So I can hit now save. And I create a new version. Great. So see, I just create a new version. But here is a very good component called like this banner which we called a grid in this case and this feature. So the same thing we created in the getting started. But here it's already like literally more complex because we have here like this Twitter and here down, we have an icon, which is like a rendering. Like we can choose which icon will be rendered there. And we can choose at the moment from mail, phone and Twitter. So if I change it to mail, you can see it suddenly changed to the mail. If I do it for the phone, we have a phone there and if I Twitter the next, of course there's a Twitter. And this is something you can do directly in your code in Next.js. So you create the options for your content editors, marketers, or whoever is changing the website. They can, then you will get basically the published JSON which this was not published of course so we are working whole time on the draft version. And here is a icon. So here's the icon to write Twitter. So you see that we are sending in this feature, we are sending also the value icon, and it's saying Twitter. And now the question is how did we implement the data? So how you can do that? Because this exactly, you have this molecule or organism and inside this is basically an atom, atom, atom or even we could say like this is a molecule and this is an atom and this is atom. So this is like how you will cut it in pieces, it's up to you totally. So if I go here in my repository where I am running that, and I will show you now the components, you could see that I have now much more components or it's like, I have here a blog post, dynamic command, feature.js, et cetera. So I added more of them and you can build it very easily using that article I mentioned. And now check out the features. So in feature.js, I have here something I call the dynamic icon. So you could have a dynamic classes but you can have also even dynamic components. So in this case, I am just rendering, according to the block of icon, I'm rendering a different icons, for example. And the icons are loaded here from the icons folder. So the phone js is basically returning the SVG of the phone. The Twitter is returning the SVG of the Twitter and the mail, of course of the mail icon. And here in the dynamic icon, it's again, just this definition, like, Hey, what should I render? And you can also send nothing. So if you click here and do nothing, sorry, nothing, then there will be like no icon. So basically nothing is rendered and it's even in HTML is no code present at all. So it's like, right. Of course you should probably have there's some styling getting. So this is the one thing what I wanted to mention. So you can like, have some this kind of a dynamic editing, thanks to this. And then if you, if you look on the, on, on the, my project now you can see that what kind of components is this billed from. So I have here like teaser, placeholder, page, navigation, layout, head, the greeter, footer, featured, post, JS, feature JS, dynamic component, blog posts. If I go now into my project and open the components, then you can see here also that I have like, post and the page. So I have two content types. So here I have a blog post and the page. So in this case, I even renamed that differently. So the blog post is what should be rendered if I am rendering the post. And this is for example, done here in the pages. So here in the pages, I am doing like a little bit more complicated routing at the moment. So I have a dynamic routing. So in this...

18. Rendering Blog Posts and Multi-Language Support

Short description:

Instead of rendering the page, I will render blog posts. The code for rendering the blog posts is similar to the code for rendering the page. We can make everything dynamic and decide whether to render the post or the page. Now, let's move on to the topic of multi-language support. In Storyblock, you can create a multi-language experience easily. By defining the language in the content, you can switch between different language versions of the same content. Translation is simple using the translator field. You can also translate images. Adding a new language is straightforward in the settings. You can create a new language and translate the content. Previewing the different language versions is possible using the versatile preview. The code for multi-language support involves getting the context and finding the default language.

Instead of having only the index JS, which I already explained to you and it's working almost exactly the same as in the demo before, I have here also a blog. And in the blog, I know that in the folder blog are the Slack JS, which is dynamic Slack, is basically are the blog posts. So instead of rendering the page here, I know that I should render blog posts here down. And I do exactly the same thing as before. Basically I will send here, this is still a little bit older code. So this is not using, as you can see, this is using initial code prop, but it would be used basically the blog posts instead of the post. But we could do it also dynamically. So we could have everything dynamic, everything would be Slack. And then we would just are expecting like, hey, should I render the post, or should I render the page? Now I'm getting a little bit confused. Give me a second. This unexpected break by Wraithrow. Something I didn't expect, and then of course now I lose my track. So what's more today? Yes, of course. I should have at least one more topic, but I should definitely cover is the multi language languages. So how to do languages. And you can see that also here in routing, I have a folder languages, or here I have also languages.js. And what does it mean is basically that in the languages, or index even, you can see that I'm like designing, I am going to define what language I am going to render, because the Storyblock website, you can do a very quickly, you can create a multi language experience. So here in the content, if I would go to home, you can see that I have here English version, but I could go to German version very easily. And then I didn't change this view. So there's an error, but I could go here, sorry, to localhost, and go for slash D, and I would like German version. And if I would go for English version, then I would have an English version of the same content. And how to do a translation for it, it's very easy, very easy. So for example, take a sample, here's the headline. The headline, if I take in the teaser here, the definition, the headline is a translate table. So you just click it, and this is a translator field. And in this case, you are enabled to translate stuff. I have a question, okay, that this is a translator field. And in this case, you can of course, translate this field in the German language. The English is the default one, so there is no checkbox. But if I would go to German one, then I see there is a new version. I could easily do that also for the image, for example. So let's do a translatable image, and let's hope everything will work, because this is something I didn't prepared. So by default, you can see it's uneditable. So that means that it's the same version as the English version. So here's the original image with the lady. But let's make it bigger. But I want to change it. So let's change the German version. I will now check that I want to translate this, and choose the coffee one, save it. And now if I'm correct, and if I would go to here today, I should get a different image. And I get, hello, cafe. So I get also the German image. And the next question is like, how is this done in code, and how it's complicated to add a new language. So to answer the first... First, I would answer the second question. And it's like, any new language is very easy. I go to settings, I go to here, languages, and I can create a French, or let's do something very... That I understand at least something. Ah yeah, let's just look. So the language, added the Slovak language, I save it. And now I go to the content, open the home. And in the home, I already can choose the Slovak language, which in the teaser by default, I held the English because the English was defaulted. But if I want to translate, I can just hit translate. I can, for example, go to Google Translate. I could easily translate this, but why not use Google Translate, save it. And now I don't need even publish because we are working in the... these are in a draft version still. So I can go for SK and I get a recover. So basically I already create a new version and my local is running and not even the local host. If I am correct, and if this is correctly deployed then we should say, should get here the German version. And now if I'm correct, we can get also the Slovak version already. Also the image is loading. So you see that it's running on the versatile basically and it's already liked with the translation. And this is running because this is running basically the same approach as the local host. And then I can use this link also in my preview. So what I mean with using that in the preview is that if I'm going to English and go to the settings and you see this preview, the versatile preview the next story block multi-language website then this already set up, so I have a versatile preview. And if I go to content, I will go to home. I can switch to the versatile preview and I see the preview from the versatile which is running on the versatile. So for example, I could go to blog also and first blog, and I see like this is my first blog there's of course, there is some errors something did wrong with routing but if I go to localhost, it should work at least I was checking last time. So you could see, like, okay this worked. I could also like open the preview link at the moment from the local host of course and this will work or I could change translate this but I think we don't have a translation or do we have? We will see. So yeah, we have also translation here. My minhstd, and drag it. And this way you're very easily editing of course your content and the storyblock like editing your languages. We're still able to, like, edit the live editing having all the other stuff to do. So if I go to German and I think this should work. Yes, it works. Yeah, now here it works. You saw, it was only on the homepage was still not handled the error. So here you can see that I have a dead block. My first post, everything works. I can even translate the stuff or I can always like, go back to the original which was now edit because I added it in English. So how does it work in code? Is what I forget. So there's two approaches. The one is, of course you have the language.js. So you're just getting the context and the context in the matter of the hooks is explained here in the index. So you see that I am getting basically here in getting starting props, I will get a context. And in that context, you have a params. So I will find out what is default language. By default, my default language I set up as English.

QnA

Dynamic Data Retrieval and Customization

Short description:

The speaker discusses language handling, dynamic data retrieval from Storyblock, and the use of UIDs to resolve relations. They mention the support for RTL languages and the ability to create custom fields and install apps. The speaker also encourages participants to explore the Storyblock website for tutorials and resources. They mention webhooks, the ability to set up a demo space, and the growth of component libraries. The speaker invites questions from the audience and addresses a couple of technical questions. Lastly, they mention a user's question about using Storyblock with their existing database project.

This is why I see always English version on the home because I didn't handle that one thing that if I change a language on the home and I don't get there, I, you're a new param. So in this new param basically have a language. So this language.js or here the language folder, if you do a context.params.language, will recommend language. So, and that's why we know what language we should show if we change between the languages. And in this case, we dynamically can then ask Storyblock for data. So basically ask Storyblock, get a CD and stories in the real language. So give me a language, which I found out and give me the slack.

The quick answer for the question, yes there is a support for RTL languages also. There is a checkbox where you can change all the inputs to right to left also. Which is hidden there in the field definitions. So you can define which fields are right to left if I'm correct. And what I wanted to show is the last thing and this is like a reference to the other stories. So here you can see I have my first post. And on the content of the home, I had this featured post which I call this component feature post. And here it is on the bottom. So usually this could be a quite complicated because what you do here is like in the post, I'm just referencing a post somewhere else. So here we can see I have my first post and if I would go to the blog post and I will just duplicate this, call it my second post duplicate, let's open it, let's do a quick change. Let's change this picture to the new one, save it. And yeah, let's go to English, my second post, save, publish, whatever. We can also like publish from here to select everything of course, and publish, or we can go for more complicated filtering. But now on the home, I want to feature some posts, I want to pick them by hand. So I created a special component called feature posts. It makes sense. And I can see my post here, I can like search for them, so if I go like first one, then I see the first one, I can show also on in selecting and how does this work is like I said basically that I am going to rest with this content only to post or I could like change, choose a category like get me only from a blog folder, that's how. And then I'm referencing to other stories in my CMS. So what I mean with that is like if I click here and I suddenly see the result, I didn't hit the save, I didn't ask anybody like, hey, could you give me like do their API request? So what I want to show you about is this, I don't use a GraphQL for this at the moment, but you can use also GraphQL if you want, but we have a solution without a GraphQL and this is like, I published it just to have a like, leaner JSON, so in the cleaner in the JSON, if I go to future post and it's here, it's an object and this object content, which is component featured post, contains a post, but only their UIDs and we, but we have on the, in the preview, we have the real content, so how does it work? Is that we are using the UIDs to resolve relations. The reservations works that I added a special parameter to my request, so here in the parameters, I, by default requested that all, if there is a future post component and inside is an attribute called post, please resolve this relation. So instead of getting UID, give me the data of the post selected there. This can be used, this is very useful. And this is something that I also do in the hook, so in the hook, I'm also like saying like, hey, please resolve these relations and then I will get the real data, and then every time I'm typing, I already like have our CDN is ready for it. And it's sending also the data that I need to show you in the live real time preview. So in this case, I can easily do the drag and drop, I can unselect the stuff and again select the stuff, I can change the feature, puts to a related post if I would like to, and I can reuse a lot of components. I can also reuse a lot of components inside of other components. And this is like how I think you should use Next.js, sorry, Next.js, now I get really confused already. Next.js, oh, it's Storyblock and why it's so powerful. So probably thank you very much. And if you have any question, I will check out the questions and I will answer them. I think we slowly filled in all the time we had and there is like those other things to show you, you would be interesting with like just quickly is like apps, of course, you can install apps, you can build your own apps custom apps, you can build their own custom fields. So if I show you like in components there, like define a field, you can have like already like this 12 default fields, but you can always create your own custom field or field like install app for cloudinary You can use a cloud in a library to use a asset library outside. What I should definitely or what you should definitely check out before leaving this go to storyblocks.com slash Next.js, where you will find out everything I mentioned today and I will be updating also the tutorial which I told you about. So the how to build a multi language website. I'm sorry that we couldn't get it through because also my internet, I'm really, really sorry about that. This is quite a detailed tutorial where you can copy-paste a lot of stuff and component and basically get it run up and running quite easily and fast. There is also for a few hints how to do the stuff, how to do a little a real time, et cetera. You are interested in other technologies definitely go for storyblocks slash technologies we have already like trees, hops like for the next Nuxt and Gatsby and also how to start with other technologies like Svelte or etc. And of course, if you would go to the APIs then in the content delivery API, you can also check out like how to connect to languages like Java, C sharp, Swift, Python. What should I mention even more is like probably I should check out the notion. So I think it was little bit chaos but I explain everything I wanted to explain and I think we created also some components and yep, we did an explain how to do web hooks, of course, I set up the project on the Warsaw. This is explained also in the tutorial I mentioned but it's very easy. At the end of the day, we have here a web hook which is for the published and unpublished where you will add a webhook from Warsaw or wherever you will be doing with webhooks and also like we have some other webhooks for other events depending on your plan and what apps are using because it depends if you are using like apps like pipelines and you have a different frozen content on different pipelines or you are using something like scheduling content into the future. So that releases app for example, there's also some webhooks, et cetera. So you can set up a lot of stuff with Storyblock. It's at the end of the day, only your imagination is the bar is the limit. And the last thing is like we don't really needing to do anything. You can go still and go with the play with demo and then we'll create for you and initialize basically a demo space with a lot of component. You will see the power of the Storyblock together, how you can build a really complicated stuff, how you can present it. So what I mean with that is that if I get it running, it's like, you see here, this is like a two collections. The websites look like literally very complicated. You can add basically a preset. So for every component, you can set up also predefined dummy content or lower Empson content that you can then create a very quickly the component from scratch. So instead of creating from empty scratch, you just choose, for example, this let's do the black one. I added inside also already with some data and I then change only the stuff I need to change or the content editor. Some headline and I can jump to the call to action and basically change the color, the button to the white or maybe I want to have empty one and then have our internal links. So let's link to the block article number two, save it, publish, and it will be redeployed. And you can try out see how it's build also this. Excuse me. And then you can see also in the components, how the library of the components can grow if you build everything together. So for example, the best sample of the atoms and the molecules in my opinions, like button and button group where the button consists of some fields or properties. And the button group is basically only a one property which contains a list of buttons. So I would like say here, you can add only buttons and that's it. So that's it. I think like I covered everything. Thank you very much. I sent you the notion, I send you all the links and all the recordings. So hope you enjoyed. And if you have any questions, then raise your hand. I'm happy to answer any question because we still have time and I still can you offer a few more minutes after my internet went down. So the questions I see here is the, in the get static in index.js, the relevant value is mandatory for a sweet spot. There are validate value. Then it's to be honest, I don't know exactly the answer. I just know from my colleague that it's something that is needed to be there to revalidate and this is how work the get static props with hooks. I can check out the question. If you know, want, if you can drive me placing the discord I will, I will check with my colleague what was exactly that about, because I was not able to come, I'm not to like a super expert on Mac, just also. The other question I see here, I will leave my question here. This is Facundo. I have kickstarted this website, which has a project that are on the day, are on databases right now. I am thinking of using storable to make it usable for my content editors. Do you think it could be a good solution because I have some doubt regarding connection between my database and those project content, let's list content. No, precisely because I need you track the backers, the organization behind it, make the ID consistent between the database and storyblock and so forth.

Connecting Storyblock with External Databases

Short description:

To maintain consistency between the database and Storyblock, it is recommended not to save the IDs of people directly in Storyblock. Instead, connect them with Storyblock to retrieve presentation data. Data such as backers' names and credit card information should be stored in the database, while Storyblock takes care of displaying the information on the website. For example, when creating an article, you can choose authors from an external database using JSON and render the data accordingly. This approach is also applicable to e-commerce solutions where the product database is separate from Storyblock.

No, precisely because I need you track the backers, the organization behind it, make the ID consistent between the database and storyblock and so forth. Yes, that could be a very good, very good sample for the storyblock but I wouldn't save the IDs of those people in the direct in the storyblock, you can connect them with the storyblock I would see the storyblock, that storyblock shine shines where you are going to get like the present presentation data.

So all the data for the logical use where you have all the backers, like for example, also names, maybe credit cards or something like that, that should be their database. Storyblock should take care what is shown on the website.

So what I mean is that if I go to the App Store here that you could do something like I have a author here or I have an article, even better. So let's go to the article. And here in the article, instead of choosing author like this, I could choose the authors for external database also if I want to. And I would do it like there's multiple ways. The one way is like I would have a single option and then instead of the source, I could change the external JSON and there will be basically URL where I can get those IDs or the JSON. And there is also sample how to render the data. So if you seeing JSON with a key value pairs, we will show a nice names and then you can match it together with a Storyblock. So definitely that's something for a Storyblock and the good sample of that is also the e-commerce solutions where you have a database of your e-commerce products.

Watch more workshops on topic

React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
WorkshopFree
In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Summit 2023React Summit 2023
27 min
The New Next.js App Router
Next.js 13.4 recently released the stable version of the "App Router" – a transformative shift for the core of the framework. In this talk, I'll share why we made this change, the key concepts to know, and why I'm excited about the future of React.
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.
React Advanced Conference 2021React Advanced Conference 2021
21 min
Killing BFFs with GraphQL and Next.js
Frontend applications are getting more and more complicated, often delivering far more than just a UI. With this growing complexity comes a growing need for knowledge from the developers creating it, as they have to deal with matters like state-management, authorization, routing and more. In this talk, I'll show you how to use GraphQL in your Next.js application to create a data layer for your application, that exists between your frontend and your backend. In this data layer, you can handle complex matters to help you to keep your frontend application clean and "stupid".
TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
If you're using a headless CMS for storing content, you also work with URL slugs, the last parts of any URL. The problem is, content editors are able to freely change the slugs which can cause 404 errors, lost page ranks, broken links, and in the end confused visitors on your site. In this talk, I will present a solution for keeping a history of URL slugs in the CMS and explain how to implement a proper redirect mechanism (using TypeScript!) for dynamically generated pages on a Next.js website.

Add to the talk notes: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022