Builder.io Personalization Starter

• Overview: This template is a fork of Next.js Commerce integrated with Builder.io, utilizing Edge Middleware for page personalization, targeting, and A/B testing.

How It Works:

• Page personalization is achieved by rewriting a basic path to include a hash of personalized attributes.
• For example, pages/page.tsx can be renamed to pages/page/[hash].tsx and included in the middleware for rewriting with personalized hash.
• Personalized content is determined by the hash, which is automatically generated based on personalization.* cookies.
• Setting a cookie like Cookies.set('personalization.returnVisitor', 'true') will rewrite /page to /page/returnVisitor=true.

Get Started:

• Local Setup:
  • Clone the demo repository: git clone https://github.com/BuilderIO/nextjs-edge-personalization-demo.git.
  • Install dependencies and run the development server using yarn and yarn dev.
• Builder.io Connection:
  • Create a free Builder.io account and copy the Public API Key into site/config/builder.ts.
  • Set the Preview URL in Builder.io to http://localhost:3000.

Configure Personalization Attributes:

• In Builder.io, add targeting attributes under account settings to personalize content, such as returnVisitor or audience segments like shirt-shopper.

Create and Publish Pages:

• Use Builder.io’s visual editor to create and target pages with your React components, then publish.

Deployment:

• Deploy the site to platforms like Netlify or Vercel with specific build commands (cd .. && yarn build for Vercel).

Explore the Code:

• Key code locations include site/config/builder.ts for Builder.io configurations and site/middleware.ts for edge middleware setup.

Next Steps:

• Further explore Builder.io development, custom components registration, and Next.js personalization utilities.

Troubleshooting:

• For issues, seek assistance via Builder.io’s Discord channel.