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
    • Setting up previews
    • Setting up visual editing
    • Migrating content
    • Managing users
    • Managing roles & permissions
    • Setting up SSO
    • Managing your subscription
  • Content modeling
    • Fundamentals
    • Examples
      • Blog
      • Page
      • App config
    • Best practices
    • Managing models
    • Field types
    • Defining the Asset model
    • Managing components
    • Managing enumerations
    • Setting up a built-in remote source
    • Creating a custom remote source
  • 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
        • Introduction
        • Set up a project
        • Make it dynamic
        • Set up data collection
        • Add A/B testing
        • Add personalization
    • Laravel
      • Quick start guide
      • Complete guide
        • Introduction
        • Set up a project
        • Make it dynamic
        • Set up data collection
        • Add A/B testing
        • Add personalization
      • GraphQL SDK
      • Rest SDK
    • React
    • Vue.js
      • Quick start guide
    • Angular
      • Quick start guide
    • Gatsby
      • Quick start guide
    • Node.js
    • PHP
      • Quick start guide
      • Graphql SDK
      • Rest SDK
    • Astro
      • Quick start guide
    • Svelte
      • Quick start guide
    • Using an SDK
  • Development
    • Fundamentals
    • 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
      • Exporting and importing a schema
    • Integrations
      • Algolia
      • Bynder
      • Cloudinary
      • Commerce Layer
      • Commercetools
      • Customer.io
      • Dealfront
      • 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
      • Vercel
      • Zapier
  • 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
    • Tracking data using REST
    • Managing customers manually
    • 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
    • Diagnostic tools
    • Upgrade guide
    • Schema
    • API schema
    • Strict Mode
    • Models and Components
    • System fields
    • Field types
    • Fetching items
    • Fetching a single item
    • Fetching multiple items
    • Fetching multi-model items
    • Filtering
    • Sorting
    • Paginating
    • Localizing
    • Previewing
    • 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
    • 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.jsPHPSvelteAstroUsing an SDK
Creating a custom remote sourceNext.js

Was this article helpful?

We’d love to learn from your feedback

© 2025 Prepr. All rights reserved.