EZ Content

Introduction

This package is to retrieve data from ezcontent.io and display React components in a Next.js v14 application.

Install

> npm install ez-content

> yarn add ez-content

.env File

``
EZ_TOKEN="your_token_goes_here"
EZ_CACHE="force-cache | no-store"
EZ_FRESH=3600
EZ_API="https://api.ezcontent.io"
`

EZHTML

Added convenience utility component to render HTML content with React's dangerouslySetInnerHTML

> import EZHTML from 'ez-content/EZHTML'

`
el="p"
text={content.body}
className="cool-class__name-1"
default="Lorem ipsum dolor
sit amet exerciphaedrum."
/>
`

Example 1 - Standard Use

> app/page.js
`
"use server";
import { ViewPage, getContent } from "ez-content";
import { notFound } from "next/navigation";

export async function generateMetadata({ params }) {
const { title } = await getContent(params.slug);

return {
title: title,
};
}
export default async function Page({ params }) {
const { content, globals } = await getContent(params.slug);

if (content) return ;
else notFound();
}
`

Example 2 - Static Headers/Footers

Use composeContent and ViewContent to add Static Headers that are disabled in the EZ Content editor.

$3

> app/view-page.js

`
"use client";

import { composeContent, ViewContent } from "ez-content";

import Header from "@/components/layouts/Header";
import Footer from "@/components/layouts/Footer";

export default function SlugPage({ content, globals, isPreview }) {
const { compListAll, contentListAll } = composeContent(
content,
globals,
isPreview
);

return (

{!isPreview &&

}

components={compListAll}
content={contentListAll}
globals={globals}
/>

{!isPreview &&

);
}
`

$3

> @/components/ViewContent.js

`
"use client";

const ViewContent = ({ components, content, globals }) => {
const list = components.filter((_, idx) => content[idx].comp_content);
return (

);
};

export { ViewContent as default };
``

Notes

- component directory must be in the root


More coming soon