In Bucket CMS's admin interface, users have the ability to create and define Collections, establish data structures through Fields, and manage individual Items and their associated static assets. All data and file assets are stored securely on Amazon S3.

Managing Collections, Items and Assets

Within the Admin Interface, users can effortlessly design and structure their content through Collections. By navigating to the Collections tab and selecting Create Collection, administrators have the capability to introduce various Fields that define the Collection's schema. Once satisfied, saving the Collection ensures that its schema is securely stored within the S3 bucket as a JSON file.

After defining Collections, the Admin Interface provides a streamlined process to manage individual Items and associated static assets. By selecting a specific Collection, users can easily Add Item, ensuring that the data aligns with the Collection's schema. For richer content experiences, assets like images or documents can be associated with Items by selecting Upload Asset and confirming the desired file for upload. This asset is then stored in the S3 bucket and linked appropriately. Additionally, the interface offers options to edit or delete existing Items and their related assets, granting administrators complete control over their content.

A Collection is a set of related Items. Think of it as a table in a database. Each Collection has a defined schema that is determined by the Fields added by the admin user.

Examples of collections would be Case Studies, Team Members, FAQs, Product Listings, Job Postings, Customer Testimonials or Portfolio Work Samples.

Collections in Bucket CMS are structured based on the following interface format:

export interface Collection<T = any> {
  name: string;
  fields: Field<T>[];
}

This format denotes that each Collection possesses a name and an array of fields. By navigating to the Collections tab and selecting Create Collection, administrators can introduce various Fields that define the Collection's schema. Once satisfied, saving the Collection ensures that its schema is securely stored within the S3 bucket as a JSON file.

Fields are the foundational elements that define the structure and data type within a Collection. They are analogous to columns in a database table, dictating what kind of data an Item within a Collection can hold.

Common examples of fields might include Text, RichText, Number, Date, Image, Selection and more. For instance, within a "Team Members" Collection, fields might be defined as "Name", "Role", "Profile Image", and "Bio".

Fields in Bucket CMS are structured based on the following interface format:

export interface Field<T = any> {
  name: string
  typeName: keyof FieldType<T>
}

This format indicates that each Field has a type (like Text or Image), a descriptive label, and optional attributes to further specify its properties. When creating or editing a Collection in the Admin Interface, users can add or modify Fields to shape the Collection's schema according to their content needs.

In Bucket CMS, Field Types shape the content structure within a Collection. They determine the kind of content that can be added to a Field, ensuring consistency and predictability in data entry. More than just defining user interaction, Field Types ensure that content adheres to predefined specifications with the incorporation of type safety using the zod library. Each Field Type is associated with a precise schema:

export interface FieldType<T> {
  schema: z.ZodType<T, any, any>;
  renderAdmin: ({ data, setData, Component }: FieldTypeProps<T>) => ReactElement;
  validate: (data: T) => { isValid: boolean; errorMessage?: string };
}

This ensures that the data for each Field Type, whether it's Text, RichText, or other types, conforms to a specific structure. When admins input data, zod’s validation mechanisms validate the data against its associated schema. This allows Bucket CMS to maintain data integrity as it stores items data as flat JSON files on S3.

Text

The Text Field Type allows users to input plain text content.

RichText

The RichText Field Type provides a richer content editing experience, enabling users to format their text with options like bold, italics, links, and lists. It's ideal for longer content sections, such as articles, product descriptions, or detailed instructions.

On Bucket CMS, Items represent the individual content entries within a Collection. If you think of a Collection as a table, then Items are the rows within that table, each adhering to the structure defined by the Collection's Fields.

Every Item is crafted based on the Field Types specified in its parent Collection. This ensures that the data entered for an Item is both consistent and predictable. For instance, within a "Team Members" Collection, an Item might represent a single team member, with data fields like "Name", "Role", "Profile Image", and "Bio" populated based on the Collection's schema and its FieldTypes.

A significant feature of Items in Bucket CMS is the assurance of data integrity and type safety. Each Item undergoes validation against its Collection's schema before being saved. This process ensures that the data entered matches the expected type and structure, minimizing the risk of errors or data inconsistencies.

Whether you're building dynamic pages, rendering content on demand, or setting up static sites, Bucket CMS provides versatile methods to retrieve your data. Depending on your application’s architecture and use cases, you can choose from, or even mix and match, amongst three primary approaches: Server-Side Node Functions, Client-Side API Routes & Load from S3 URL

Server-Side Data Fetching

Bucket CMS provides a suite of utilities for server-side operations, that integrate with the AWS SDK for pulling data from S3. This works well with server-side rendered pages with the Next.js App Router.

Client-Side Data Fetching

Bucket CMS provides a set of Next.js API Routes for fetching Item data from Collections utilizing the same utility functions that are used for server-side data fetching.

For more specifics, keep reading to check out the auto-generated documentation for your Bucket CMS integration.

Loading Data from S3

Unlike many CMS platforms that store your content in proprietary databases or inaccessible cloud silos, Bucket CMS saves all your data directly to your Amazon S3 bucket. This means the data is ultimately yours, residing in a location you control and trust. Whether you want to manipulate it directly, back it up, or migrate it to another system, you have full freedom to access, modify, and manage your content as you see fit.

/api/bucket/items/read?collectionName=FAQ&token=123

Returns: CollectionItemData[]

This API endpoint returns data for multiple Items in a Collection.

interface CollectionItemData {
  itemId: string
  itemName: string
  data: [key: string]: any
}