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.developmentand.env.productionfor the next step.
git clone git@github.com:BuilderIO/netlify-next-edge-middleware.git
cd netlify-next-edge-middlewareThen 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:
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!