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

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

- 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

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.

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.

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

161 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

Featured Workshop

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

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.

next.js graphql 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

react server components performance 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

Workshop

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 next.js devtools

Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce

React Summit 2023

139 min

Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce

Top Content

Workshop

Matteo Frana

- 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

next.js e-commerce react bricks react state management

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

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.

jamstack redwoodjs frameworks react full stack framework fullstack

A Practical Guide for Migrating to Server Components

React Advanced 2023

28 min

A Practical Guide for Migrating to Server Components

Top Content

Watch video: A Practical Guide for Migrating to Server Components

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 server components react next.js react query react 18 case study

The New Next.js App Router

React Summit 2023

27 min

The New Next.js App Router

Top Content

Watch video: The New Next.js App Router

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.

next.js builders and founders

You Don’t Know How to SSR

DevOps.js Conf 2024

23 min

You Don’t Know How to SSR

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.

astro next.js serverless

A Saga of Web Rendering Woes

Vue.js London 2023

28 min

A Saga of Web Rendering Woes

Alba Silvente Fuentes

FullStack Engineer at Storyblok

This Talk discusses the problems faced in building and rendering web applications, different rendering methods and strategies, and the benefits of the Yamstack architecture. It covers server-side rendering, static site generation, incremental static regeneration, and edge rendering. The speaker demonstrates how to build a static site using a Hello CMS and the JAMstack architecture. Other topics include connecting Storyboard with a Nuxt application, mock data, hybrid rendering, and handling I18N with a static site generator.

performance scalability jamstack