Try the demo live here: https://builder-edge-personalized.netlify.app/

This is a demo of building personalized landing pages with Builder and Next.js middleware running on Netlify Edge Functions. All pages are generated with SSG/ISR with a middleware function that rewrites the generic URL to a personalized one.

Before using this example, make sure you have the following:

• A Builder.io account. Check out the plans, which range from our free tier to custom.
• Save private key / public key from your space settings page and create copy both keys to .env.development and .env.production for the next step.

git clone [email protected]:BuilderIO/netlify-next-edge-middleware.git
cd netlify-next-edge-middleware

Then update env files with the keys from last step

yarn
yarn dev

Integrate with any site or app. Drag and drop with the components already in your codebase. High speed, full control, no compromises

Hardcoding layouts for frequently changing content bottlenecks your team and makes releases messy

Using an API-driven UI allows you to:

• Decouple page updates from deploys
• Schedule, a/b test, and personalize via APIs
• Reduce code + increase composability

Edge middlewares allow us to factor in many details about the request than just the URLs which is usually a limitation of statically generating pages, you'll see in this example we're using cookies, and geolocation information to fetch the correct content and render it statically.

Additional framework support:

• Gatsby
• Next.js
• Angular
• HTML API (for any framework)

As well as some handy power features like:

• Symbols
• Dynamic data fetching and binding
• State handling
• Content API
• GraphQL API
• Webhooks
• Targeting and scheduling content
• Extending Builder.io with plugins

Questions? Requests? Feedback? Chat with us in our official forum!