Hygraph Custom Field App

This project provides custom field extensions for Hygraph CMS, including a Translation App and a Storefront Field selector. Built with Next.js 14, React Server Components, and Tailwind CSS.

Features

Translation App

  • Translates content between different locales in Hygraph
  • Supports multiple target locale selection
  • Real-time validation and error handling
  • Progress indicators and success/error notifications
  • Secure API key management

Storefront Field

  • Dynamic storefront selection based on tenant
  • Auto-selection for single storefront scenarios
  • Real-time updates with tenant changes
  • Form-compatible multi-select component

Setup

  1. Clone the repository.
  2. Install dependencies:npm install
  3. Create a .env file with required environment variables:
    HYGRAPH_ENDPOINT=your_hygraph_endpoint
HYGRAPH_TOKEN=your_hygraph_token
  4. Run the development server:npm run dev

Configuration

Translation App

The Translation App requires the following configuration in Hygraph:

  1. Create a new App in Hygraph.
  2. Configure the app with:
    • Endpoint URL
    • Secret key for authentication
  3. Add the Translation sidebar to your content model.

Storefront Field

To use the Storefront Field:

  1. Add the field to your content model.
  2. Configure the tenant relationship.
  3. Set up the available storefronts per tenant.