How to use Freestyle App with Zesty's NextJS starter

Learn how to develop a landing page on Zesty CMS using Zesty's Freestyle App and Next.js.

What is Zesty's Freestyle App?

Zesty's Freestyle app allows users to create custom page layouts for their website or application. It is a unique visual tool that allows non-technical users to create professional pages even when their site or application is built on a headless framework such as Next.js.

This tutorial will walk you through how to leverage Zesty's Freestyle app with Next.js to create a marketing landing page.

We'll start by using the starter template, and then we'll put our new skills to the test by building a snazzy marketing landing page.

Step 1: Create a new instance in your Zesty account

Our first step is to create a new instance in your Zesty account. To do so, navigate to the navigation bar at the top of your screen and click the Create Instance button.

You will be taken to an setup flow where you’ll be asked to choose a starter template. In this tutorial, we will be using the blank template.

Next, add your project name and description in the fields.

Lastly, choose Next.js as your tech stack. Your instance is now configured and we can begin to set up and install the Freestyle app from the Marketplace.

Open the marketplace by going to https://zesty.io/marketplace/, then install the page layout designer or simply click this link https://www.zesty.io/marketplace/apps/page-layout-designer/ and select the instance we just created earlier.

Now return to the Zesty CMS manager and you should be able to see the Freestyle app, added as an extension on the right-hand navigation bar.

Now we will move on to creating our brand new Next.js app.

Step 2: Create a new Next.js project using the starter template

Now, let’s create a new Next.js project using the Zesty starter template. Open your terminal and paste this command.

Add a name to your project. In this tutorial, I’m going to name mine “layouts-demo” but feel free to choose any name that fits into your own project. Now we wait for the packages to get installed. It might take around a minute or two to complete, depending on your internet speed.

After the package installation is complete, you have to answer a few questions in the prompt and then log in using your Zesty account.

Lastly, choose the working instance that we created in the first step.

Change “directory” into your project folder and it should be ready.

One final step in our setup is to install the react-auto-layout NPM package.

Once that is complete, you are now ready to start your development server by running:

Step 3: Create new components and template setup

Now, that the starter template is complete, we can start working on your marketing landing page. Let’s start by creating our navigation.

From our project folder head over to components > header.js and paste our navigation code from below to overwrite the current one.

Now let’s do the same with our footer.js

Preview your site in your web browser and make sure everything looks good by navigating to localhost:3000.

Component Creation

Now, let’s create a couple of components that will complete our marketing landing page.

From your components folder, create a new folder and name it “blocks”. (You can choose any name you want as the name, but for this tutorial, we will be naming it blocks, since it will contain components that we will connect to our CMS Freestyle app.)

Inside the blocks folder create a new file and name it Hero.js

Now that we have the hero component, let’s create two more components. Create a new file again and name it Marketing.js

And then our final component in this tutorial will be Contact.js

Export components

Our components are now ready! Let’s make sure to export those components in one file so we can use them.

Inside the components folder, create a new file and name it index.js and let’s import and export all components we created inside the blocks

Create a new file again inside the components folder and name it ComponentSelector.js

First, we import all components from index.js as zestyBlocks. The return value of zestyBlocks will be all of the modules we export from index.js as objects.

Next, we declared the ComponentSelector component which accepts props from react-auto-layout. Props will have all the data from layouts that we will set up in the next section.

For now, let’s initialize our AutoLayout component. Open the Homepage.js from views > zesty folder. Copy the code below and overwrite the existing code in the Homepage.js.

Here we’ve imported the AutoLayout component from the NPM package we installed earlier. We also imported the ComponentSelector we created and, finally, we’ve used the AutoLayout component.

AutoLayout is expecting a {content} object from the Zesty integration to be passed to the AutoLayout object. It is also expecting components to be passed as objects. In our example, we will be passing our ComponentSelector as a component.

Step 4: Create components from Instance Freestyle App and map them to Next.js template

Now, it’s time for us to go back into our Zesty instance and open Manager. Inside Manager, you should be able to see the Freestyle app extension we installed earlier from the Marketplace.

On the right-hand panel of Freestyle app, look for the Homepage model and click “load content”.

The Homepage model is connected to the Homepage.js we modified in our Next.js app, so that means all data contents from our Homepage model are automatically passed in as props in the Homepage.js file.

Once the content is loaded, you can start using the design tools by dragging content to the visual layout area. But in this tutorial, we will focus on using our custom components, so let’s start creating one and map it to our Next.js components.

In the navigation, you will see the components at the top. Click that then add a new component

A popup should appear. Now let’s populate those fields.

layout

Fields

Field Name	Description
Name *	The name field is the name of the component. The name of the component should be the same as how you name it in your Next.js components blocks. (Case Sensitive)
Class *	class is the component className, that you use in Next.js
Type *	<Component Design>
Dropppable *	if the component has the ability to accept child components and act as a layout wrapper
Preview *	Component preview in the visual layout written in HTML format
HTML *	HTML content associated with the component.

After adding the Hero component, please do the same with the two remaining components, which are the Contact and Marketing components.

Once that is done, you should now have three new components inside Freestyle app that are ready to use.

Finally, drag those newly created components to our visual layout designer one-by-one in any order. Hit ctrl + s in Windows or command + s in Mac to save.

Once saved, go back to your Next.js app. Make sure that the server is running and head back to localhost:3000 to see the preview.

Awesome! You’ve completed the first part of the tutorial by setting up your Next.js instance in Zesty and leveraging Freestyle app to create three custom components. In the next tutorial, you will learn how to hydrate dynamic data from Zesty to your Next.js app.