Aven Cloud provides an easy-to-use dashboard for the content and settings of your website and mobile app.

• create site
• add schema
• in your CRA/NextJS app:
  • yarn add @aven/client
  • yarn add -D aven-shell
  • yarn aven pull SITE_NAME

Sample code:

import { GetStaticProps } from "next";
import Cloud, { CloudLoad } from "../Cloud-rocketship-Generated";

import { ReactElement } from "react";

export const getStaticProps: GetStaticProps = async (context) => {
  const preload = await Cloud.load({
    "pricing-plans": true,
  });
  return {
    props: {
      preload,
    },
    revalidate: preload.freshFor > 1 ? preload.freshFor : 1,
  };
};

export default function Home({ preload }: { preload: CloudLoad }): ReactElement {
  const pricingPlans = Cloud.useNode("pricing-plans", preload);

  return (
    <main>
      <h1>My Rocket Ship Plans:</h1>
      {pricingPlans.map((pricingPlan) => (
        <p key={pricingPlan.key}>
          {pricingPlan.title} : {pricingPlan["price-per-month"]}
        </p>
      ))}
    </main>
  );
}