---
title: "Refactoring the Storyblok demo: personalization in one command"
slug: "refactoring-storyblok-demo"
locale: "en-us"
description: "See how we replaced complex middleware with a single-line code adjustment to enable native Storyblok personalization."
published_at: "2026-03-04"
updated_at: "2026-07-28"
image: "https://storage.googleapis.com/croct-assets-b931d070/blog/Refactoring_the_Storyblok_demo_d717d95f66/Refactoring_the_Storyblok_demo_d717d95f66.png"
authors: ["Marcos Passos"]
category: "News"
tags: ["Dynamic Content","How To","Headless CMS"]
canonical: "https://blog.croct.com/post/refactoring-storyblok-demo"
---

# Refactoring the Storyblok demo: personalization in one command

We love a good engineering challenge. Recently, we came across a [technical guide](https://www.netlify.com/blog/website-personalization-with-storyblok-and-nextjs) on the Netlify blog that walked through personalizing a Next.js website with [Storyblok](https://www.storyblok.com).

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](https://www.storyblok.com/apps/external/optimize).

## 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](https://github.com/croct-tech/croct-storyblok-project/commit/ed9cb61c4915aa9f1a11e513a8dc1d125642f57c#diff-c7774a70826affb7055e179b201f78caa9627ebe7583abf80ad8a56ce6c540d0R9-R11) 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.

> ✨ Side-by-side comparison
>
> You can check the website repository [here](https://github.com/croct-tech/croct-storyblok-project).

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:

```shellcmd noLineNumber
croct init
```

Check out [our documentation](http://docs.croct.com/immersion/integrations/storyblok/integration) to see how to add Croct to your project today.