Fast & Furious - Going headless with Nuxt.js!

Rate this content
Bookmark

This will be fast & furious! I will show you the fastest possible way to connect your Nuxt.js (Vue.js) project to the headless CMS and deploy it in seconds. You should know a thing or two about Nuxt.js, headless CMS in general or JAMstack as there will be no time to describe the concepts in detail. In the end, you will be furious how insanely good the JAMstack is!

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Samuel Snopko's talk, titled 'Headless with Next', focuses on exploring the headless and JAMstack world, and how they work with Next.js. The talk includes a hands-on experience where he demonstrates building a website or application from scratch using Next.js, integrated with a headless CMS.

A headless CMS is a content management system that provides a way to author content but does not have a front-end system to present the content. Instead, it exposes data via an API, allowing developers to use any front-end tool to render the content. Samuel prefers headless CMSs due to their flexibility and the powerful integration capabilities they offer with modern development frameworks like Next.js.

To start building a project with Next.js, Samuel recommends using the Create Next App tool, which can be used with Yarn or NPM. This tool sets up a project with all the necessary packages and configurations, allowing developers to follow a step-by-step tutorial to get their project ready for deployment.

Samuel suggests using Storyblock, a headless CMS, for managing content in a Next.js project. He explains that Storyblock allows for the creation and setup of projects with various components, and it supports real-time visual editing while adhering to best practices without compromises.

To integrate Storyblock with Next.js, developers need to install the Storyblock Nuxt module using npm or yarn, and configure it within the Nuxt.js project settings. This includes setting up an access token from Storyblock and adding it to the Nuxt configuration.

In Storyblock, there are two key types of components: content types and nestable components. Content types are used to create entries like pages or articles, while nestable components are used within these entries, like blocks on pages. These components can be unlimited in number and customized to fit the project's needs.

Real-time editing in Storyblock with Next.js is facilitated by the Storyblock bridge, which enables live updates in the visual editor. This feature allows developers and content creators to see changes instantly as they edit, enhancing the content management experience without requiring page reloads for updates.

Samuel Snopko
Samuel Snopko
32 min
20 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This talk introduces using Next.js with a headless CMS called Storyblock. It covers setting up Storyblock with Next.js, understanding components and index pages, rendering components and requesting data, enhancing preview with the visual editor, creating article components and schemas, reusing components, and exploring the Storyblock and Next.js connection.

1. Introduction to Headless with Next

Short description:

Hi everybody! This is my talk on Headless with Next. We will build a website or application from scratch using Next. I have years of experience with headless CMSs and Next. Follow me on Twitter for any questions. Let's start by using Create Next app, which provides the latest setup. After running the localhost, we can set up the content using Storyblock.

Hi everybody, how are you doing today? So I hope you are really enjoying the conference so far, or you're enjoying the recording of the conference. So if you're watching this, probably you're watching the recording on maybe I didn't make it to conference. So anyway, this is my talk. It's called Headless with Next and we are going to look on headless world and the JAMstack world and how it works with the next. And basically we will be building it from scratch to the point that you can deploy a website or your application with next. And this, as I said, it's a hands-on experience.

So my name is Samuel Snopko and why I'm talking to you is basically that I am also a headless of develop relations at Storyblock, which is one of the headless CMSs. I love headless CMSs in general. I was working with them for a few years and I was definitely using next for already like five years. So I think it's the best match and it make and give me so much power to create so many websites and also like to do all the projects what I want to. I'm tweeting at Samuel Snopko and it will be cool if you follow me. So just jump there and go to some Snopko and you can follow me, in the case you have any questions during this talk, just write me there.

So what we are going to do is I said we are going to start from scratch and we are going to build the website or a project or application or whatever you're building with. You can check the code on this link and feel free to jump there, but there will be also like other links that I will be sharing and you can get it. So the best way to start is the first question. And as it is a very fast, it's kind of fast and furious. I'm totally recommending to use Create Next app. Whatever you are using, Yarn or NPM, just go for it, name it project and just start. The point is that you will get always the latest information, the latest setup with all the packages you need. You just go through the step by step tutorial and the project is basically like this. This is what you will get and you also saw my notes here. And what does it mean? First of all, just run the localhost. And what the localhost should do is basically start your localhost link. The localhost at my moment looks like this. I think I just recently updated the localhost of the Next so you may see a different screen and you can have a link to go to documentation of GitHub. And this is basically what you need so your project is setup. Just go through the Next Create app and you will get here, ready to deploy. But still you just have the head only. You don't have a content. So for the content I choose the headless CMS and in this case I am going for Storyblock.

2. Setting up Storyblock with Next.js

Short description:

Storyblock provides a digital platform and software as a service for creating and setting up projects. It allows for real video editing while following best practices of Next. You can create projects from scratch or duplicate existing spaces. The visual editor allows for easy component editing and customization. To connect Storyblock to Next.js, install Axios and the Storyblock NUXT module. Set up the module in the NUXT config by accessing the access token.

And Storyblock has a digital platform and software as a service where you can create and set up your project in matter of the components. So you can get also the real video editing, but even you are able to still follow all the good best practices of the Next. And you don't have to do any compromises. So what I am going to do here is just create it from scratch. I am going to do the duplication of existing space or play with demo and it is really creating the stuff.

Now I am looking on my load where I have also some copy-pasting that I will basically don't do a lot of typos but anyway I do typos. So here just create the new project and as soon as I create a new project I can close the guide because I am your guide today. And you after this you also don't need a guide to be honest. So what you see here is basically the project or your space where you keep your content usually. At the moment I have here only one home page or home representing the index page or home page and of course there are some other areas. You can go check the dashboard and what's going on in your project but in this case we just created it.

So if I would open the home I would see directly the visual editor part. So you see this is not set up. I have here some welcome message but I also see on the right hand side that I have my component and I can start editing them. I could also like focus only on the component and get the default headless view that a lot of other headless CMSs have but I'm going to focus on the real visual editor today and we will do and use set up this. So we have at the moment a teaser. I could like change it to like, hello London and I could like of course save it. I could like publish it and then publish. If there will be set up the webhook it will be set up with triggering the webhook and the webhook build and then starting deployment on Netlify or Vercel or any other service you would like to use for hosting or your own servers maybe. Of course there are a bunch of other features that I'm going to go through now and we are going to focus how to connect them first. So at the moment I have my content I even see like what kind of content I will be getting so probably it's if I would be using REST of the V2 I will be getting something like this in this case.

And now I need to get this content to the next.js because I have here still the welcome page. So this is my project and in the project what you need to do next is just install anything. Of course you will be needing Axios, so using the Create NUXT app just install Axios. And then you will need the Storyblock NUXT module. The Storyblock NUXT module, just install it using npm or yarn and then jump to the packages to the NUXT config. The NUXT configuration is quite well explained already in the NUXT website. And you really don't need to set up a lot here. So what we are going to set up today is just basically set up the module for the Storyblock. So in this case, you can see here that there is a Storyblock NUXT module called and we access here the access token.

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

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Fetch, useEffect, React Query, SWR, what else?
React Advanced Conference 2023React Advanced Conference 2023
102 min
Fetch, useEffect, React Query, SWR, what else?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
In this workshop, first, we’ll go over the different ways you can consume APIs in React. Then, we’ll test each one by fetching content from a headless CMS (with both REST and GraphQL) and checking in detail how they work.
While there is no advanced React knowledge required, this is going to be a hands-on session, so you’ll need to clone a preconfigured GitHub repository and utilize your preferred React programming editor, like VS Code.
You will learn:- What diverse data fetching options there are in React- What are advantages and disadvantages of each- What are the typical use cases and when each strategy is more beneficial than others
Building Blazing-Fast Websites with Next.js and Sanity.io
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
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.
Crash course into Astro and Storyblok
React Day Berlin 2023React Day Berlin 2023
119 min
Crash course into Astro and Storyblok
WorkshopFree
Arisa Fukuzaki
Arisa Fukuzaki
Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications. 
In this workshop, we will quickly take a dive into the Headless World and Architecture. 
Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory. 
- Master headless CMS fundamentals- Master an Astro & headless CMS approach- Use Atomic design in your Astro & Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless