English versionEN

Crash Course into the Jamstack with Next.js & Storyblok

Arisa Fukuzaki

Chakit Arora

Solutions Engineer @ Storyblok

Please sign in to watch this workshop.

Bookmark

Sentry

Promoted

Code breaks, fix it faster

Crashes, slowdowns, regressions in prod. Seer by Sentry unifies traces, replays, errors, profiles to find root causes fast.

Get started

You might have read already about Jamstack. You've probably already used Next.js, and may heared a lot about the headless CMSs.

Designed for developers already familiar with JavaScript and React, the course explains how Jamstack, Next.js, and headless CMS architecture work together in real-world projects.

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

- 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

P.S: Some data about Storyblok CMS and its implementation may be also found in the real business cases of development agencies.

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

FAQ

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.

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.

next.js jamstack

Arisa Fukuzaki

Chakit Arora

160 min

28 Nov, 2022

Comments

Available in other languages:

Watch more workshops on topic

AI for React Developers

React Advanced 2024

142 min

AI for React Developers

Top Content

Featured Workshop

Eve Porcello

Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and Next.js. We’ll also incorporate additional 3rd party APIs to build and deploy a music visualization app.
Topics:- Creating a React Project with Next.js- Choosing a LLM- Customizing Streaming Interfaces- Building Routes- Creating and Generating Components - Using Hooks (useChat, useCompletion, useActions, etc)

react next.js artificial intelligence

Tracing: Frontend Issues With Backend Solutions

React Summit US 2024

112 min

Tracing: Frontend Issues With Backend Solutions

Top Content

Featured WorkshopFree

2 authors

Frontend issues that affect your users are often triggered by backend problems. In this workshop, you’ll learn how to identify issues causing slow web pages and poor Core Web Vitals using tracing.
Then, try it for yourself by setting up Sentry in a ready-made Next.js project to discover performance issues including slow database queries in an interactive pair-programming session.
You’ll leave the workshop being able to:- Find backend issues that might be slowing down your frontend apps- Setup tracing with Sentry in a Next.js project- Debug and fix poor performance issues using tracing
This will be a live 2-hour event where you’ll have the opportunity to code along with us and ask us questions.

next.js debug

From Frontend to Fullstack Development With Next.js

React Summit 2025

91 min

From Frontend to Fullstack Development With Next.js

Top Content

Featured Workshop

Eric Burel

Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps.

next.js

Build a Headless WordPress App with Next.js and WPGraphQL

React Summit 2022

173 min

Build a Headless WordPress App with Next.js and WPGraphQL

Top Content

Workshop

Kellen Mace

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.

graphql next.js wordpress

Next.js 13: Data Fetching Strategies

React Day Berlin 2022

53 min

Next.js 13: Data Fetching Strategies

Top Content

Workshop

Alice De Mauro

- 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

performance react server components next.js best practices

From Todo App to B2B SaaS with Next.js and Clerk

React Summit US 2023

153 min

From Todo App to B2B SaaS with Next.js and Clerk

Top Content

WorkshopFree

Dev Agrawal

If you’re like me, you probably have a million side-project ideas, some that could even make you money as a micro SaaS, or could turn out to be the next billion dollar startup. But how do you know which ones? How do you go from an idea into a functioning product that can be put into the hands of paying customers without quitting your job and sinking all of your time and investment into it? How can your solo side-projects compete with applications built by enormous teams and large enterprise companies?
Building rich SaaS products comes with technical challenges like infrastructure, scaling, availability, security, and complicated subsystems like auth and payments. This is why it’s often the already established tech giants who can reasonably build and operate products like that. However, a new generation of devtools are enabling us developers to easily build complete solutions that take advantage of the best cloud infrastructure available, and offer an experience that allows you to rapidly iterate on your ideas for a low cost of $0. They take all the technical challenges of building and operating software products away from you so that you only have to spend your time building the features that your users want, giving you a reasonable chance to compete against the market by staying incredibly agile and responsive to the needs of users.
In this 3 hour workshop you will start with a simple task management application built with React and Next.js and turn it into a scalable and fully functioning SaaS product by integrating a scalable database (PlanetScale), multi-tenant authentication (Clerk), and subscription based payments (Stripe). You will also learn how the principles of agile software development and domain driven design can help you build products quickly and cost-efficiently, and compete with existing solutions.

react devtools next.js

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

Routing in React 18 and Beyond

React Summit 2022

20 min

Routing in React 18 and Beyond

Top Content

Delba de Oliveira

Senior Developer Advocate @ Vercel

Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.

react next.js patterns react file based routing

A Practical Guide for Migrating to Server Components

React Advanced 2023

28 min

A Practical Guide for Migrating to Server Components

Top Content

Fredrik Höglund

ephem.dev

React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

react react server components next.js react 18 react query case study

RedwoodJS: The Full-Stack React App Framework of Your Dreams

React Summit Remote Edition 2021

43 min

RedwoodJS: The Full-Stack React App Framework of Your Dreams

Top Content

Tom Preston-Werner

GitHub cofounder, RedwoodJS author

Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

frameworks jamstack redwoodjs react full stack framework fullstack

The New Next.js App Router

React Summit 2023

27 min

The New Next.js App Router

Top Content

Lee Robinson

Vercel

Today's Talk is about the Next.js App Router, which has evolved over the years and is now a core feature of Next.js. The Talk covers topics such as adding components, fetching remote data, and exploring layouts. It also discusses submitting form data, simplifying code, and reusing components. The App Router allows for coexistence with the existing pages router and enables data fetching at the layout level using React Server Components.

builders and founders next.js

You Don’t Know How to SSR

DevOps.js Conf 2024

23 min

You Don’t Know How to SSR

Top Content

Emanuele Stoppa

Active contributor to the Biome project

The Talk covers the speaker's personal journey into server-side rendering (SSR) and the evolution of web development frameworks. It explores the use of jQuery for animations in SSR, the challenges faced in integrating React with Umbraco, and the creation of a custom SSR framework. The Talk also discusses the benefits of Next.js and the use of serverless artifacts for deployment. Finally, it highlights the features of Astro, including its function per route capability.

next.js serverless astro

From Segments to Suspense: The Future of Next.js Caching

React Advanced 2025

27 min

From Segments to Suspense: The Future of Next.js Caching

Wyatt Johnson

Vercel

Introduction to Cache Components in Next.js 16, transforming the app router with new features like partial pre-rendering, Dynamic I.O., and caching directives. Deep dive into static params generation in Next.js focusing on changes in generating static params for improved performance. Exploring challenges of generating static params and balancing static vs. dynamic rendering for better performance. Addressing challenges with cache components, optimizing static and dynamic rendering for improved performance. Understanding impact of parameters on rendering with cache components, managing dynamic components, and introducing suspense boundaries for faster page loads. Enhancing cache life APIs, introducing a new caching model for static outputs in Next.js. Revolutionizing cache management with granular control over cache lifetimes and dynamic segment configuration. Navigating data and caching in Next.js, exploring cache components guidance and caching differences between server and client components.

performance react react server components next.js frontend server cache