support (opens in a new tab)
status (opens in a new tab)
prepr.io (opens in a new tab)
  • Quick start guide
  • Changelog
  • Roadmap
  • GUIDES
  • Project setup
    • Step-by-step guide
    • Prepr overview
    • Architecture scenarios
      • Shared schema
      • Shared content
    • Setting up environments
    • Migrating content
    • Managing users
    • Managing roles & permissions
    • Setting up SSO
    • Managing your subscription
  • Content modeling
    • Fundamentals
    • Examples
      • Blog
      • Page
      • Live stream
      • Navigation
      • App config
    • Managing models
    • Field types
    • Defining the Asset model
    • Managing components
    • Managing enumerations
    • Setting up a built-in remote source
    • Creating a custom remote source
  • Development
    • Fundamentals
    • Connecting a front-end framework
      • Next.js
        • Quick start guide
        • Complete guide
          • Introduction
          • Set up a project
          • Make it dynamic
          • Set up data collection
          • Add A/B testing
          • Add personalization
          • Install preview bar
        • Prepr Next.js package
      • Nuxt
        • Quick start guide
        • Complete guide
      • Laravel
        • Quick start guide
        • Complete guide
        • GraphQL SDK
        • Rest SDK
      • React
        • Quick start guide
      • Vue.js
        • Quick start guide
      • Angular
      • Gatsby
        • Quick start guide
      • Node.js
      • PHP
        • Quick start guide
        • Graphql SDK
        • Rest SDK
      • Astro
        • Quick start guide
      • Svelte
        • Quick start guide
    • Best practices
      • Assets
        • Images
        • Video & audio
        • Live video stream
        • Files
      • CSR/SSR/SSG
      • Previews
      • Redirects
      • SEO
      • TypeScript
      • Webhooks
    • Working with CI/CD
      • Syncing content
      • Syncing a schema
    • Integrations
      • Algolia
      • Bynder
      • Cloudinary
      • Commerce Layer
      • Commercetools
      • Customer.io
      • Exif
      • Frontify
      • FTP Server
      • Hubspot
      • Microsoft Entra ID (Azure)
      • Prepr for Radio
        • Publications
        • Introduction
        • Query by Id
        • Query a collection
        • Commercial
        • Imaging
        • Talk
        • TrackPlay
        • WeatherTalk
        • Assets
        • About Assets
        • Artists & Tracks
        • Query by Id
        • Query a collection
        • Guides
        • Query by Id
        • Query a Collection
        • Tags
        • Introduction
        • Query by Id
        • Query a collection
        • Tag Groups
        • Channels
        • Fetching channels
        • Messages
        • Filtering collections
        • Filtering for a Customer
        • Fetching a single message
        • Create a new Message
        • Timeline
        • Introduction
        • Query by Id
        • Query a collection
        • Create Tracks
        • Now Playing
        • Weather forecast
        • Fetching the weather forecast
        • Update the weather forecast
      • Salesforce
      • Segment
      • Shopify
      • Typeform
      • Typesense
  • Content management
    • Managing content
      • Managing content items
      • SEO & Readability
      • Creating rich content
    • Managing assets
      • Introduction
      • Managing assets
      • Editing and configuring assets
    • Localizing content
    • Collaboration
  • Data collection
    • Fundamentals
    • Step-by-step guide
    • Setting up the tracking code
    • Recording events
    • Storing customer properties
    • Managing customer data
    • Tracking data using the API
    • Privacy & Security
    • Upgrade Guide
  • Personalization
    • Setting up personalization
    • Managing segments
    • Managing adaptive content
  • A/B testing
    • Setting up A/B testing
    • Running A/B tests
  • Recommendations
  • REFERENCE
  • GraphQL API
    • Getting started
    • Get started
    • Test your queries
    • Fundamentals
    • API Basics
    • Authorization
    • Caching
    • Statuses and errors
    • Upgrade guide
    • Schema
    • API schema
    • Strict Mode
    • Models and Components
    • System fields
    • Field types
    • Fetching items
    • Fetching single items
    • Fetching multiple items
    • Fetching multi-model collections
    • Filtering collections
    • Sorting collections
    • Paginating collections
    • Localizing content
    • Previewing content
    • A/B testing
    • Fetching an A/B test
    • Personalization
    • Fetching personalized content
    • Recommendations
    • Fetching similar content
    • Fetching People Also Viewed content
    • Fetching popular content
  • Mutation API
    • Fundamentals
    • API basics
    • Authorization
    • Statuses and errors
    • Upgrade guide
    • Items
    • Fetching single items
    • Filtering collections
    • Working with fields
    • Paginating collections
    • Sorting collections
    • Create & update content items
    • Unpublish a single item
    • Delete a single item
    • Assets
    • Fetching assets
    • Managing assets
    • Collections
    • Resizing
    • Integrating
    • Segments
    • Fetching segments
    • Tags
    • Fetching tags
    • Customers
    • Fetching customers
    • Filtering customers
    • Create, update & destroy customers
    • Identity management
    • Sign-up
    • Sign-in with a magic link
    • Sign-in with email + password
    • Fetching a customer profile
    • Sign out
    • Bulk Operations
    • Resend webhook events

Connecting a front-end framework

The flexibility of a data-driven headless CMS allows you to connect your favorite front-end framework, deliver content and optimize and personalize the customer experience.

Next.jsNuxtLaravelReactVue.jsAngularGatsbyNode.jsPHPSvelteAstro
FundamentalsNext.js

Was this article helpful?

We’d love to learn from your feedback

© 2025 Prepr. All rights reserved.