Crash Course into the Jamstack with Next.js & Storyblok

Rate this content
Bookmark

You might have read already about Jamstack. You probably already used Next.js, and recently you may be hearing a lot about the headless CMSs. This quick course will put all the pieces together and show you why Storyblok, combined with Next.js, is the best combo for your next project. Stop by and try it yourself!


- In-depth Jamstack knowledge. How it changed from old times to the modern world. Learn how Jamstack was created by comparing Static Sites and Dynamic Sites.

- How Next.js serves content, and how content is served with Static Site Generation (SSG).

- Atomic design methodology, and how this is applied to the content management system.

- Hands-on project experience by building a Jamstack project with Next.js and Storyblok.


Prerequisites

- Any Text . Visual Studio Code recommended

- Node.js LTS

- NPM or Yarn

- GitHub account

- Vercel account

- Familiarity with JavaScript, React, and Git. Having worked with Next.js before is a plus


What's included

1. Introduction and overview of the workshop

2. Introduction to Jamstack

3. Introduction to Atomic Design

4. Overview of Headless CMS

5. Introduction to Storyblok

6. Next.js app creation

7. Storyblok space creation

8. Next.js and Storyblok connection

9. Custom components creation

10.First-page creation

11. Introduction to Visual

12. Dynamic pages addition

13. Blog section creation

14. Deployment on Vercel

This workshop has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.

FAQ

Storyblock is a headless content management system (CMS) that separates the backend (content management) from the frontend (presentation layer). It allows developers to use any frontend technology to build applications, making it flexible and ideal for creating fast, scalable, and secure web applications. Storyblock provides APIs for fetching and manipulating content, which can be integrated seamlessly with modern web development frameworks like Next.js.

Static web pages are delivered to the client exactly as they are stored, without any server-side processing, making them fast and easy to maintain. Dynamic web pages, on the other hand, are generated on-the-fly by the server based on user requests, allowing for personalized content but typically requiring more server resources and complex management.

To deploy a Next.js application on Vercel, first connect your GitHub repository containing the project to Vercel. Then, configure your build settings if necessary, and deploy the application directly from the Vercel dashboard. Vercel automates builds, deployments, and hosting, providing a straightforward platform for managing Next.js applications.

JAMstack stands for JavaScript, APIs, and Markup. It is a modern web development architecture that emphasizes pre-built markup and decoupling dynamic APIs from inline server-side code. This architecture allows websites to be more secure, scalable, and faster, leveraging client-side JavaScript, reusable APIs, and prebuilt Markup served through CDNs.

Server-side rendering (SSR) enhances SEO by rendering HTML on the server before it is sent to the browser. This process ensures that search engines can crawl and index the content effectively because the fully rendered page is directly available to them, improving the visibility and ranking of the web pages in search results.

Using a headless CMS like Storyblock offers several benefits including flexibility in choosing any frontend technology, better control over the content presentation, enhanced security as the presentation layer is decoupled from the content management, and ease of integrating with various APIs and services for extended functionality.

The Storyblock bridge is a tool that enables real-time editing and preview capabilities in web applications. It allows developers and content creators to see how changes to the content will appear on the live website directly from the Storyblock editor, streamlining the development process and reducing the time between content updates and publication.

Arisa Fukuzaki
Arisa Fukuzaki
Chakit Arora
Chakit Arora
161 min
28 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Workshop on Web Development covers topics like static and dynamic web pages, the Jamstack approach, content management systems, and the usage of Storyblock. It emphasizes the benefits of having a system, the integration of Storyblock with Next.js, and the creation of dynamic components. The Workshop also discusses configuring Storyblock, connecting it with Next.js, and deploying the application on Vercel. It concludes with a focus on the preview environment, creating blog components, and the deployment process.

1. Introduction to Web Development

Short description:

My name is Jagat and I'm based in India. I work as a Developer Relations Engineer at Storyblock. You can find me on Twitter. My name is Arisa, originally from Japan, but currently based in Berlin. I work as a Developer Engineer at Storyblock. I have experience with different talks and workshops. We will be building a blog website. It has a header, hero, blocks, blog page, and details page. We will have breaks for questions. Let's talk about static and dynamic web pages. Static pages are delivered as stored HTML. Dynamic pages have HTML decided on the server. Static pages are fast, cheap, easy to maintain, secure, easy to scale, and stable. Single page applications are useful for dynamic interactions. They have one HTML file and are fast. Server-side rendering is generated on the server, while client-side rendering is handled by JavaScript on the front end. Server-side rendering has better SEO, faster initial page load, and is more secure. It requires reloading the page when navigating to a different page.

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

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

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

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

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

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

2. Introduction to Jamstack

Short description:

If we talk about cons, you can see that it's overall a little every time you need to reload the complete page when moving to another page. On the other hand, with client-side rendering, there are pros like written interactions and lower server-side load. However, the initial page load is slow and there is low SEO. There are also a lot of dependencies. Jamstack uses JavaScript, APIs, and Markups to optimize performance. It generates cacheable static websites and deploys them on a CDN. JavaScript is used on the client side and APIs are called for dynamic interactions. The structure involves changing content, rebuilding pages, and deploying static assets on a CDN. APIs are used for generating dynamic content. Static site generators allow the extraction of static assets from websites. The static site generation flow involves data, content, templates, and a generator. The benefits of static websites include better performance, easier maintenance, and lower costs. Next JS is used as a static site builder. Content management systems are not always necessary in the Jamstack approach.

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