Refactoring the Storyblok demo: personalization in one command

We love a good engineering challenge. Recently, we came across a technical guide on the Netlify blog that walked through personalizing a Next.js website with Storyblok.

It is an excellent article written by Facundo from the Storyblok team. It accurately demonstrates the hard way to build personalization: writing custom middleware, manually handling cookies, and hard-coding logic to swap components based on user segments.

It works, but it highlights a significant friction point: to achieve personalization, developers have to build and maintain the engine themselves.

We decided to run an experiment. We took that exact demo application and refactored it using our new Storyblok integration.

The heavy lifting

In the original demo, the developer had to build the personalization infrastructure from scratch. This involved:

• Custom middleware

  Writing a Next.js middleware to intercept requests and check for cookies.

• Manual logic

  Coding if/else statements to determine which version of a page to serve.

• Hard-coded segments

  Defining user personas directly in the code.

If the marketing team wanted to add a new segment or change a rule, they had to ask the developer to rewrite the logic and redeploy the application.

The refactor

To switch to Croct, we didn't add more code. We deleted it.

We removed the custom middleware, the cookie parsing logic, and the manual component swapping.

Instead, we just added our SDK and changed one single line of code in the original project.

By initializing Storyblok with Croct, the application automatically gained server-side personalization capabilities. The logic didn't move to another file, it moved to the cloud.

The autonomy for marketers

If you think about it, the most significant change wasn't even in the lines of code saved, but in the workflow it enabled.

In the original demo, the personalization strategy was static. In our refactored version, the marketing team can now log into Storyblok, open Croct's plugin, and:

• Define audiences

  Create segments such as "Returning visitors" or "Mobile users" without writing any code.

• Create variations

  Click on a component and create a personalized version for that audience.

• Test a personalization strategy

  Launch an AB test to see which content performs better.

We turned a static implementation into a dynamic, marketer-led engine.

See the difference

We believe that developers should focus on building great products, not maintaining personalization logic. This refactor proves that you can have a high-performance, server-side personalized site without the technical debt.

If you are using Storyblok and Next.js, you don't need to build it from scratch. You just need to plug it in using our CLI:

croct init

Check out our documentation to see how to add Croct to your project today.