zesty.io

Product

Use Cases

Integrations

Learn

Custom Integrations

How to load dynamic zesty.io content into your next.js project

To dynamically load your Zesty.io instance's content into your Next.js project, you will need three files and zesty env values in your next.config.js file. You can see a working example of this in our nextjs starter https://github.com/zesty-io/nextjs-starter. The starter is a great place to launch your nextjs app with everything for Zesty.io already configured.

If you plan to integrate Zesty.io into your project, this document will break down how the integration works in the https://github.com/zesty-io/nextjs-starter starter project.

Files Needed

  1. [...slug].js in the root of your pages/ directory.
  2. fetchPage.js a function that resolves dynamic content into [...slug].js
  3. ZestyView a dynamic component that resolves views/zesty/ content model components

ENV Setup - next.config.js

Example: https://github.com/zesty-io/nextjs-starter/blob/main/next.config.js

Working with Zesty View Components

The Zesty.io configuration for next.js will look for a component name after the content model in views/zesty directory in your next.js project. A content model named articles will look for a component views/zesty/Article.js Note the slight name change, as the naming convention is a PascalCase without pluralization, therefore articles becomes Article. We call this the alternate name, you can find the automated alternate name by look at the ?toJSON response of any content item through WebEngine.

Content models that start with a number will need N prepended to the name, e.g. 3slides will be named N3slides.js. The sync script will automatically do this..

Instead of manually creating component, Zesty.io provide a script from downloading and creating components for each content model in your zesty.io instance.

Zesty.io Next.js Sync

The zesty sync is already built into the nextjs-starter, but if you would like to implement a custom sync file, you may download or reference this file https://github.com/zesty-io/nextjs-starter/blob/main/lib/zesty/sync.js

Once sync is in your project, add this line to your package.json file "sync": "node lib/zesty/sync.js", under "scripts" once that is in place you can run npm run sync from your terminal to automatically pull down files.

After a npm run sync a view component is created for each Zesty Content Model in the views/zesty directory. Zesty Content Items that have URL will automatically resolve to the component in that views directory that is associated with the content models name.

Each Component loads with a {content} object, this object is a direct feed of that URLs ?toJSON response. Read about toJSON

Start Here

We will listen to your needs and walk you through how Zesty can help your team.

Connect with Content Experts

Book a free 15-minute consultation with a content expert. Discuss your application, pain points and requirements. Understand how Zesty's lower total cost of ownership, features, functionality can elevate your business by creating extraordinary digital experiences.

Trusted By

zesty customer logo Sonyzesty customer logo Rocket Leaguezesty customer logo Singlifezesty customer logo Acornszesty customer logo Phoenix Sunszesty customer logo Wattpadzesty customer logo Corner Shopzesty customer logo Bjs

G2 MOMENTUM LEADER

zesty customer logo zesty customer logo zesty customer logo zesty customer logo

Enter your details to connect with a Content Expert

First Name

Last Name

Email

Phone (optional)

Company

Please tell us about your project (optional)