Next Js with Storybook and Drupal

Thank you. Uh. Hi, all. Uh, welcome to my session. Now, this Next JS, Storybook and Drupal and, uh, hope I can present something good. Uh, and it will be, uh, learning for everyone. So, uh, let's begin. So good afternoon, everyone. Uh, welcome to the session. So, uh, first of all, it is about me, um, working as a software engineer director. And I have worked on, uh, a couple of, uh, companies, including Acquia, uh, and Digital Polygon in my past experience. So, uh, before starting, I wanted to, uh, tell about some of my contacts. So I like to, uh, in my free time, I like to produce some music, which I like to publish on SoundCloud. And along with that, I, uh, I'm I'm into UX as well. I, I'm exploring UX, uh, field as well for additional learning. And apart from that, I like writing. So I publish one book in 2018, which is called The Weaving. And, uh, it's available on Amazon for anyone who wants to, uh, take a look. So, uh, what we'll be covering today. So first of all, we'll be I'll be introducing on Next JS on a wider scale and what all why Next JS is so popularly used in wider scale.

And then I'll be, uh, I'll be telling like on Next JS Drupal like how we can integrate Next JS with Drupal and then how we can use Storybook, uh, in next year's. So let's start. Um, so first of all, I want to start with one fun fact on next year. So worldwide. Uh, it's around the Next JS is used around 13.52% in, in total. And, you know, like most likely or most of the developers use because they prefer reactjs and uh, by they prefer next. Uh, React.js is one, uh, big portion for everyone. So, uh, according to the stats in 2022, uh, you can see the, uh, there are different technologies and frameworks which are used. So in this, if you see, uh, in Drupal it was 2.2%, while uh, next year you can see it's around 13.2%, which is far less. But, uh, this is starting from 22, but in 23 and 24, it has increased, uh, uh, in some regions, more than it's, uh, goes into the 20. So this is one fun fact. Like, uh, people don't usually use Next JS like it's it, it is gaining popularity, but it's not that popular, uh, as compared to React.js, but, uh, in fact, uh, Next.js is built on top of, uh, react use, uh, using React.js.

It has made some of the properties. So the answer lies in pre rendering methods which is used in Next JS. So. One of the most popular rendering method is server side rendering. So first let me explain what this, uh, four different parameters are. So first is, uh, static site generation, which is updating queries on every request during build time. Uh, so, uh, there are two concerns. One is built time and runtime. So time is uh, let's say you're running an app. So let's say for example, you run build. So you're building that particular, uh, page. So that's a side to side generation, like all the data is uh composed on the page. Uh, so that's static site generation and server side generation. You can say like, uh, you are uh, have you have an app server which is running in between your browser and your, uh, database. So this app server, uh, is a is not that, uh, like pro uh, as compared to other servers, but it has some functionality, like there's a function which is used in Next.js which is get server side box.

And I'll be explaining that with an example. So this is just for an understanding this. And uh clients and rendering is what uh, React.js does. Like uh, let's say we have a page, um, we have a database and we have a, uh, uh, so let's say we want that data, uh, in the page directly. So we use client side rendering. So, uh, React.js, uh, does that, uh, so, uh, reactjs or any other framework which we can see, uh, glance at rendering is, uh, most popularly done in any headless, uh, uh, manner. So, uh, the last one is iser, which is incrementally updating your content. So here we use a parameter. So this iser is used with uh static site generation. Uh so I'll, I'll get, I'll show an example which would make it more clear like what is exactly iser CSR and uh, SSG and SSR. So this is a small pictorial representation of what uh, CSR, SSR and GCS. So clients are entering is can see there's a Chrome browser and uh, you're sending a request from a web page into Next.js and then, uh, simple, uh, request response is sent back via JavaScript Odysseus concise scripting, which is using React.js.

So in SSR you have a web server. So in this diagram you can see that. But uh, there's a uh app server which comes in between, uh, your browser and your Next.js, which renders the HTML. And uh, it's processing the app server, and then it's sent to the, uh, Chrome browser. And then we have the static site generator. So, uh, so what happens in this is we send a request from your browser to the CDN. So CDN is basically, uh, servers which are situated in different parts of the world. And uh, this web page, if it's sent the request, then let's say you are, uh, sitting in us. So there will be a server over there, uh, that would send you the, uh, request back and forth. So, uh, in this case, during the build time, uh, site generation, uh, comes into picture. So, um, let's take an example of what static site generation is. So I have a small, uh, component named my blog. So it's just returning. We are a day of rage and we are supporting that particular block. So this is one small example of CSG.

And in server side rendering we have this function called Getserversideprops in which um, all of the magic happens basically. So we accept the context and then return the props in this. So um, so whatever. Yeah. Um, so um, in props we send all of the data. So this gets outside props is uh, one function which is used. With an incremental static regeneration. We use this revalidate and we give this ten milliseconds with that. So let's say we are trying to fetch an API and we're waiting for the response. And uh if there is no change, it will revalidate after ten milliseconds and the changes will be reflected. So I'll show an example, uh, after this, uh, how it, uh, it works.

>>:
Um, so. So I have created a small, uh, app in Next JS where I'm using a mock API over here. And which has a user list. And I'll be. First of all, I'll show how CSR works. So here what we are using is yeah, I'm using the API. I'm using that API over here and trying to fetch the data. And I'm using the Useeffect to fetch the data and show it return the data in form of Json. So here I'm printing those data I'm sending. So this is simple use state which we use in react 16. Uh you you uh, you might have used to skate or use u-pack and uh, um, this is a simple, uh, CSR box. Uh, the static site generation. Uh, we use get static props. So here instead of using here, you can see here not using use state or. Uh use state. And instead we have you have this function. Uh, here you are returning the data. And before, um, uh, before that, we are using this get static props where all the, uh, fetching part, uh, is responsible for fetching the data and sending the data. And then if it's sent to the, uh, this function, static site generation, and it returns the data and, uh, returns the data.

So, uh, in, uh, static site generation, this is the function which is, uh, responsible for its role. And similarly, as I said before, uh, we use gets, uh, server side props, uh, which is one key function in uh SSR. So here it's similar to SSR, but here we are using get server side props instead of get uh, static props function. So, uh, one key highlight here is, uh, in SSR, the data fetching is the time it takes to show the data is low. So, uh, so using each of these, it depends on the, uh, scenarios as well. Hey, sorry to interrupt.

>>:
Can you hear me? Can you increase the font size of the code? Contribute at all. Okay. Thanks. So. Yeah. Thanks. Uh, so, uh, in ISR, uh, it's. And so it's using the get static props. But here we are trying to increment the, uh, revalidate to 100 seconds. Uh, let's say we are shown a block data. Okay. And, uh, there's a change in the content. And, um, so in static site generation, as I said, if you rebuild it at that time, the changes would be reflected, but instead of rebuilding it, what we can use is we can do it. We can simply add this revalidate to 100 milliseconds. Uh, in this case, what it will do is it will wait after 100 milliseconds. And then it would, uh, reflect the change back.

>>:
See if you could make that a little bit bigger. It'll be hard to read on the projector in the room or actually as big as you can tolerate it. Bigger is better. Okay. Is it visible to all? If you can get bigger, it'll. It'll help them in the room. Okay. I think this. Yeah. That should that should help. So, uh, let me. So what I've done is I've created a, uh, an API, um, which is a mod, and I have created this user list. Okay. So I've deployed this code to Vercel, and, uh, I'll be showcasing how this works. So let's go with CSR first. So here I'm showing some data. So the way this works is, uh, here. Every time when we reload the page, all of the data changes. So if you see if I refresh this, all of the data refreshes instead of, uh, this getting. Uh, so let me show you SSL. With server side rendering. If you know, if you see this, you would see that this doesn't change. Let me refresh the page. You can see that this doesn't change the data. So if I go ahead and change the API. Um, so that's the difference in statistic generation CSR and SSR.

And ESR is similar to SLG. But I have added 100 new circles over there. So let's go ahead and change the data. So. I'm just changing. The record for this. Um. We saw this. So in answer, as I said, it would take around 100 milliseconds to reflect the change. So I change this data. Let me change refresh this. CSR like the world. It works. And if you see a static site generation, even if I try to reload, this won't work. The reason being, I have not rebuilt the site, uh, from diversity. So that's one drawback in static site generation. As I said, we try to refresh this page. This won't change because I need to redeploy the changes again. If I build my, uh, app again, if I try to rebuild this, it will start to show the, uh, data. So, um, so that's why, um, SSG is, like, is just used for those places where you just need to show some static content, and there is no situation where the content would change every time. So here, if you see in SSR it's similar like uh, the change would appear and uh, similar for uh CSR as well.

So in CSR and SRG SSR basically uh, you're loading the template first and then the data, and in SSR you are. Uh, all the data and the HTML are loaded from server. So that's the difference between CSR and uh, server side engine. This was 1.1, uh, thing, which I wanted to explain on next year's like why next year's is most popular. Uh, when we come back to, uh, React.js or any other frameworks. So it has its server side properties. Thanks for. So now that we understood like why we are using Next JS and what's what all properties are used in Next JS, let's go ahead and uh, talk about things like how we can use Drupal with Next JS. Um, so Drupal CMS is popular among, uh, many people, um, of, uh, like high website complexity, uh, sites, which you can build on Drupal, but nowadays it's decouple, uh, decouple is trending everywhere. And we want a mechanism where we can show the data in less time. So so here we will use our Next JS this one. Let's do that. So the basic step in while installing uh, Drupal CMS along with headless uh headless uh decouple framework or library is first install a Drupal instance using DDEV or Lando.

And then there's a module which is used, uh, in Drupal which is Next JS module, which I'll showcase how we use it. And then we need to use this API module in Drupal, which is part of our code. And then uh, we need to install a boilerplate for Next JS. And along with that we need to update the environment variable. So this is the basic step of installing your Drupal CMS. And along with your headless, uh, component. So there are two ways. Um, so one is using pantheon. Second is using the next year's next two lectures from chapter three. Um, so one of the easy method, which I found while working with Next.js, is like using this boilerplate, which I'll showcase, uh, like, it's a simple. And I have created a repo for you guys to try out and which I'll be, uh, uh, sharing the link later, but, uh. So I'll be showcasing this, uh, how we can use Next JS Drupal. And in within seconds, you will be able to have your data from Drupal into Netflix. Now. I'll just showcase how we can do that. So I have created this, uh.

Uh, GitHub repo where I have added, uh, installation steps for Drupal using, uh, DDEV. We're, uh. So this is the basic step for, uh, creating your Drupal site, adding the d10, uh, configuration, then using DDEV stuff. So one, uh, ask is like you need to install Docker as well, right in the beginning for you guys to particular. Then we need to install this. Uh, we need to achieve this uh, project which is basic step for installing on Drupal and then Drush for running your commands like import export and clearing caches. And then, uh, this is for generating the, uh, your, uh, admin engine and then launching your site, and then you need to use. Uh Composer. Drupal. Next. This is potentially the next, uh, 16 and Drupal as a man. And in composition, you need to add this patches, uh, for, uh, for the reverse. So there are some issues with the API module. So, uh, we can need to add this patches for it to work properly. So this is how you can control people. Can your system. And then for next years you need to simply create a boilerplate using this, uh, and then uh, update your source, be uh, to inject local and then simply run yarn dev.

And you can now see the magic. So I have already created an instance and. So I've already created an instance using the method worker and calculated uh, three parts. In word and. Data. Article content. Let me choose an image. It's. In. Okay. So. Um, I've just created a, uh, title image and, uh, uh, uh, description. Now. And. I'd like have also created the, uh, Next JS app, my local machine. And. So here you can see the data is fed directly over here. And I've added this, uh, cart title over here. And the image, the, uh, title and the CTA, uh, text. So, uh, how have we done this? So I think this, uh, Next JS, uh, folder here. And first and foremost, what you need to do is, uh, you need to change the file. Yeah. So here we have this, uh, URL of my website with the port ID, which is, uh, you need to provide this for basic connection with your Drupal instance. So here we are connecting this Drupal instance, and then we need to provide the image. Uh, can you need to do with Https. But, uh, for now I'll just for demo purpose, I'm using, uh, this.

Um, second is I have created a, uh, pages. We have pages where, uh, we have integrated. So I'm using node article type and I'm using a get static props along with ECA which is revalidate also added the Sloughi x. That. Um, so what I'm doing is I'm adding this title body field, image field, and, uh, this field as a parameter. And, uh, over here we are calling the component this article component. And. This company is using Storybook, which I'll just follow. So what we're doing is we are passing this title Body Image and the button text. And or in this article we have our CSS file. And in this folder we have the CSS file in the story uh series in there. Uh so this we are passing in this component we have, we are passing the article uh, into that. And here we have the particle CSS article and article series file. So this is basically for Storybook. Uh, I'll be explaining later on my slides. So, uh. So you just need to create these pages, and you need to remember to integrate your, uh, your need to send the parameters using this.

Um, so this in order to explain this in detail, uh, it's a lot, but just to give a, just like what we're doing is in this index dot TSX, we are, uh, mapping our node article, and we are, uh, and we are calling our APIs, and we are sending the parameters like, which we need. And if we just, uh, see over here this for console.log, the data which we are getting from people and we are having this title, the body, the value of the body, the image. So that's how simple it is. Like, uh, for, for the starters. Right. So here, you see, I just console log the data and we are we are sending this data like we were. And if we want to create a data we can create a field. Let's say you just need to go to the content, type any fields and add a custom field and just add the data map this field over here. Be able to see. Okay. I have that field which is mapped. And then you need to map that to send the data to having the node to send that data to our components. So. So that's one simple way of integrating your Next JS app to people.

And. So. Uh, next is, uh, talking about the Storybook. Like what Storybook is. So this is a simple definition, which I have. And, um, like, based on my learning and what I have done is like, it's a component libraries, which gives us more flexibility to implement the Drupal theme or decouple training at a more granular level. So what we what we mean by granular level is like, uh, having it segregated into atoms, molecules, organisms. So atoms is so if you if you know the atomic theory like you have this four basic, uh, things which are universe is made of. So we need not to be also generalized in such a way that we can, um, it's more readable to any user or any developer who's working. So and so one, why we use Storybook is just to, uh, it's like a, uh, stylesheet. Like for us, like. Uh, designers, coders or mockup designers, right. So it's similar for us. Like, we can create color palettes or we can use you can create components which we can refer at any point of time, or we can refer by anyone, like, let's say, a project.

And, uh, I want someone else like a developer who is coming later and he wants to know about the website. So he'll go and check the Storybook for that and see like what our basic components are created. So that's why the Storybook is made. Similarly, Pattern Lab and there are many other libraries which I use, but Storybook is most widely used because it gives us options for integrating with, uh, decoupled applications. Such. So. Uh, the basic architecture, like how we use Drupal, uh, let's say like here you can see we have this impulsiveness which is sending the data to twig, or it's like we are, uh, using, uh, decoupling the data and sending it to the, uh, any, uh, frameworks or any front end frameworks. And then we are saving it and we are sending it to browser. Else we are teaming like, yeah, sending, teaming the, uh, components Storybook. And likewise we are sending the data and the Storybook and then we are, uh, showcasing those into the browser. Right. So it comes in between all of these things.

So that's why this is something which I had pasted like three basis of what I had uh, before. So some of the advantages folds down. Uh, so Storybook is a component library. It allows this allow is allowed like for front end development and graphics prototyping without any additional lift of integrating into your theme. So in traditional Drupal, what we do is we just go ahead and create a CSS folder and try to theme the big files and what we have. So in Storybook it's like, uh, it's like a uh, some thing like just have, uh, in between your twig. And so and. So, making it more readable to the users. Likewise, Storybook is a component library and you can use for content editors as well, and you can use it. You can see the variations in which it's visually appealing as well. Uh Storybook can also be extended. So the templates used to generate example markup come from your applications and languages. So. Now. So it's like Storybook comes in between and you have the data which comes and it's sent to the Storybook.

And then the query book is displayed on your page as is. So it's a completely decoupled thing I would say. It's also decoupled. Uh, and it's like very interesting to use. So let me go ahead and show you how we are using Storybook. So in order to, uh, Storybook need to, uh, install our permission steps, um, in the, in the, uh, folder, and I'll just share it. So one so once you install the Storybook, we have this folder where we can, uh, uh, define the paths from where our storage should be to. So in our case, we have this folder from where we are, uh, we can, uh, we need to tell the Storybook that we have a storage inside companies, and, um, so. So, uh, yeah, we are, uh, adding folks and we use Firefox. So this is one change, like if any changes we need to do need to do over here. Like any changes. Uh, let's say we don't want it from components. You need to have it from any other, uh, library, any other folder. Then we can, uh, go ahead and change it over. And. So. Yeah. Uh, here, what we are using is this, uh, using a button component, uh, which has two agents, primary and secondary.

And, uh, so here I said like primary to false. So by default it will take secondary. And, uh, in this series we are passing this argument. But these are dummy data. If you don't have a data coming from Drupal or any other CMS, uh, we show the, uh, this static data. Show you how. So, um, if you are able to see my screen. So I have this card content. So this component which you are having is being shown over here. Uh, over there. Uh, so in this component over here, it's been, like, displayed on your, uh, next year's model. So. And, uh. Here, as I said, uh, before in the pages. So in Vegas we are sending the data to articles. Yeah. Article content. So this article component is are Storybook component, which are we have. So it's a independent component. Like if you want we can go ahead and use it for any other purposes like independent. Or we can integrate in any other uh uh, any other uh in our application. So this is a component. We have this button over here. We have this primary button.

Secondary button. So, um, let me show. So right now it's false. So it's not picking this secondary. Let me go. But here, if you see. We are having the second primary one because we have set it to false the second. So we are just passing the data like what we need. And accordingly our button component which gets the data and shows it. So here we are having uh. Will you be adding the condition? Let's say if you are having primary as data, then, uh, add this. Uh. This class of. Primary and secondary. So that's how. This. Works. So, uh. These are some of the links which I'll share for everyone who wants to, um, start with basic installation with Next JS and Drupal. And, uh, once you explore more, I'll share these links, and, uh, you guys can take a look like, uh, how you can simply start with basic application. Then we can, uh, consistent developer. Uh, this. Um. That was pretty much from my side. And, uh, if you want to. Stay with me. Uh, there are some rooms over here. And, uh, do follow me.

And just anything to help out or just reach out to me. Thank you. Yes. Any doubts? You can let me know over for our next call. More on females. And if anyone has any questions, they can step up to the laptop and ask. The mic may not pick you up from out in the room. Okay, I think that's it. Thank you. Sabu. Yeah, I'll just share the links with you so that you can, uh, pass it on to. So. I just. Thank you. Just add it in the chat. Serpentine is equal to six. Please feel free to reach out to me if there's any doubt or.