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

Rate this content
Bookmark

- 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

This workshop has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

The purpose of this workshop is to demonstrate how to build a visually readable Next.js website using the React Bricks library.

The workshop is led by Matteo Frana, the COO and lead Frontend developer at React Bricks.

React Bricks is a CMS with visual editing based on React components. It combines the benefits of visual editing and headless CMS.

The main components needed for React Bricks are a headless CMS, a visual editor, a frontend library to create code, and a product called Freedom.

To start a new React Bricks project, you can use the CLI command: `npx create-reactbricks-app@latest`. Follow the prompts to set up your project.

React Bricks offers features like inline editing, the ability to use React and any CSS framework, flexible design systems, and the freedom to host the website on any platform.

Yes, React Bricks allows you to use custom fields and metafields to store additional information and use them within your bricks.

React Bricks supports internationalization by allowing you to add multiple languages and create translations for your content.

In React Bricks, you can reuse content using stories (cookie cutter method), page embeds (single source of truth), and multiple page viewers for common elements like headers and footers.

The future roadmap for React Bricks includes features like a media library, padding system, multiple content branches, workflow for publishing, and a marketplace for bricks.

Matteo Frana
Matteo Frana
139 min
18 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

React Bricks is a CMS with visual editing based on React components that allows for visually editable content blocks called Brics. It offers flexibility for various media types and supports features like side edit props, validation, and collaboration. React Bricks also provides advanced features like data bindings, custom page types, and the ability to consume external data. It is compatible with any framework, offers enterprise-level features, and has future developments in progress.

1. Introduction to React Bricks Workshop

Short description:

Welcome to this workshop. Today we'll see how we can build a visually readable Next JS website using the React Bricks library. React Bricks is a CMS with visual editing based on React components. We created React Bricks to find a synthesis between visual editing and editing with forms. We need a headless CMS, a visual editor, a frontend library, and the freedom to choose. With React Bricks, you get all of these four products in one.

Welcome to this workshop. Today we'll see how we can build a visually readable Next JS website using the React Bricks library. I am Matteo Frana and I am the COO and lead Frontend developer at React Bricks. This will be a live coding workshop, but I suggest that you follow me and I would like that you are relaxed watching what I'm doing instead of having the stress of copying the code in a rush. I will give you the link to the repository at the end. And anyway, if you will follow me, you will understand the basics of React Bricks so well that you will be able to start from scratch without even the need to reach out for the repository. So please follow me, and we don't know how to copy the code. It's really easy. You will see that you will have a very clear method. And so I would start with just a couple of slides to give you some context on what is React Bricks. And so it's less than 10 minutes. And then we'll start coding.

So let's start with what is React Bricks? React Bricks is a CMS with visual editing based on React components. But the most important question is why? Why we created another CMS? And well, without spoiling too much of the talk that will be on June 6th, during the history of content management, we saw many times the alternating of visual editing and editing with forms. So something which is great for the developers and something which is great for content editors without finding a satisfying synthesis between the two. So when I started with the web development, it was 1996 and it was just writing HTML code, that you would send to a server BFTP. Then we had the visual tools like a front page where you could create the code visually, really the code that was created was a mess. And if you gave a front page to your customer, they could destroy the design. So we had CGI with Pearl where you could create the forms to edit content on a database and then get the content from the database to create the HTML and ESP and PHP. Which are the same things with the templating language. And then CMSs came, Joomla, WordPress, where you could edit in a visual way on a white canvas again. But we had the problem that we still could have our customers creating the red text over green background or something like that. And so we added advanced custom fields to WordPress and we were back to Ray Forms. So, and we come to today where we have these two words, we have the tools like Wix or Webflow, which are great for the editors, but they are a no-go for a corporate website because they are not flexible enough. For example, with Wix, you cannot have your pixel perfect design system. With Webflow, when your editor understand how to change things, adding margin, et cetera, they can get creative and change the design. And on the other end, we have the headless CMSs that we love, but where we are back to gray forms. Well, you saw, if you saw the next Conf, you see that also Vercel is thinking that this visual editing now is the time to find these a synthesis of a visual way of editing website, which is great also for the developers. And we'll talk about it later. But essentially this is why we created React Bricks. So essentially we need four products, a Headless CMS, a Visual Editor, a Frontend library to create our code and a product called Freedom. And now we see why.

And let's think we have a Content Editor also a CMO, a Developer, a Designer and a CTO. It seems like the start and the beginning of a joke. An Editor, Developer, Designer, and the CTO walking to a bar. But let's see what are the needs for these personas. The Editor wants to have a tool which is easy to use. It doesn't want to cope with abstract entities and relationships. We as Developer, we need something which is flexible that allows us to use the tool that we love, React frameworks and any CSS framework where we and we need the editor to be autonomous because we don't want to explain editors how to use the CMS. They need to be autonomous in using it. We want to be productive, of course, while designers want to be able to express the perfect corporate image with the design system and be sure that the editor have no way to break it. The CTO wants the team to be productive and wants to choose a solution which is flexible and future-proof. So what we need is a visual editor for the editor and a true visual editor where we have the inline editing like Word or Pages. For the flexibility, we want the coupled headless CMS and ability to use React as it happens with a headless. For readers to be autonomous, we just need a new visual editor, so it solves also the problem for us. To be productive, we need a method. So an opinionated method that helps us creating the front-end. For design system, we need blocks. We need good constraints so that the design system cannot be broken. And if we have all these things, we have a high-productive team because the editor is happy, the developer is happy, and the designer is happy too. So, a great team, great design, good code. Good code, and in the end, great content. So, to have flexibility and to have a system which is future-proof, we need the freedom. The freedom to choose today and the freedom to change ideas tomorrow about the framework for example. So we want a system which is framework-agnostic that works with SDS, with Gatsby, with Remix, that will work with Astro very soon. And we want the freedom to be able to host the website wherever we want, that is Recel, Netlify, or anything else. So, let me reorganize these things. We need a headless CMS, a visual editor. React and Blocks are just the React components. And we need a method with constraints and freedom. The headless CMS is provided by the React Brics APIs. So you have now an enterprise grade headless CMS. With the React Brics library, you have a method to create visually editable content blocks that are React components, and to set good constraints for the editors. And you get for free the freedom to choose and to change idea. So with one product with React Brics, you get all of these four products. With other solution that we are seeing today, like for example, what we saw at the VersaConf, you need a headless CMS, which is something like sanity or contentful. Then you have the visual editor, which is really not in line with visual editing like the one that you will see in a moment, and it will work on the collaboration that you have on VerCel. So you are bound to that platform. You don't have a good method to create the front end blocks, and you are bound to use next JS as a framework. So in the end, you lose some part of the freedom.

2. Creating React Brics

Short description:

React Brics is based on visually editable content blocks called Brics. It allows you to directly edit text, images, and more using visual components. The React Brics schema enables you to define side edit props that map to your component props.

So how React Brics is created? Well, everything is based on this concept of visually editable content blocks that are just react components augmented with the React Brics Library. And we call these content blocks Brics. So it's very easy. It's like using Word or Pages for some of the content you directly edit. For example, for the text, you directly click on it, edit. For images, you click and edit them. And this is enabled by the visual components of React Brics like text, rich text, image, repeater, file, et cetera. And for the props that are not directly editable like a background color, it's just like what you would do in Word. You reach out for a cyber control. And so the React Brics have a schema where you can define side edit props that are just controls that map to your component props so that you will receive these values as props of your component.