# ZanReal - llms-full.txt > AI-first agency building AI agents, automating processes, and developing high-performance web apps. Official Vercel Partner. Software, security, and cloud. Canonical company facts (ranking, partnerships, registration): https://zanreal.com/llms.txt Official website: https://zanreal.com --- ## About ### Chapter I: Enough Compromises. How ZanReal Was Born It started in a stable, yet rigid world. In an office where the rhythm of the day was regulated by a 8:00-16:00 schedule, and our daily work involved keeping the corporate machine running. **The ZanReal team (then still informal) consisted of a programmer-miracle worker and a word wizard.** Relative financial stability gave us the opportunity to explore - **we took on small external projects**. And that's when we saw how full the market was of compromises. We had to create the best possible solutions, and shortly after integrate them with half measures: for example, with unstable hosting that destroyed performance or procedures that forced quality concessions. In other words, our knowledge and work were limited by weak links. We saw how good ideas were lost in a maze of procedures. How great technical solutions lost their shine because someone in the decision chain thought "this will be okay too." And we wanted something more - carefully crafted, sensible projects, done from start to finish **with heart and responsibility**. The idea of ZanReal was born from this need. From the conviction that you can work differently - honestly to yourself and to clients. We started with small projects, executed after hours, which quickly grew into something bigger. Each subsequent project confirmed our belief that **it was worth taking matters into our own hands**. ZanReal had to be created to provide clients with the quality that was missing in the broadly understood [digital services](/services) industry. And so, after solving private problems that blocked this step, came the opening. ### Chapter II: Courage, patience, fighting time, and lots of coffee We won't hide it - **the beginning wasn't easy.** The path to complete freedom is long and requires sacrifice. Our story is still a story of change, in which every day we prove our determination and commitment. For long months we lived in a mode of two jobs: during the day - work in the office, and in the evening - developing ZanReal. To this was added annoying, repetitive bureaucracy related to starting a business, which took away our precious time and energy. There was fatigue, there were doubts, there was also a lot of laughter and hectoliters of coffee. **But with each subsequent project, we gained faith and experience.** The challenges we had to face taught us maximum efficiency and precise time management. **We became masters of planning our time** - we are living proof that you can live, work on several fronts and not go crazy. Today we know that those harder moments were an investment - not only in the company, but also in our dream future. Because ZanReal is not just a business. It's a space where we can create our own way, in harmony with our rhythm and values. We don't compete on quantity, only ensure that cooperation makes sense. **Every [satisfied customer](/case-studies) is our small victory, which assures us of the rightness of our path.** ### Chapter III: When IT meets marketing What is our greatest advantage? It is the unique coherence and completeness of services that we offer. **ZanReal is a combination of two worlds - technology and marketing.** Our clients no longer have to look for several (or dozens) of different contractors. Coming to us, they get comprehensive support for digital development - website, system, analytics, AI-based solutions, security or copywriting. What's more, thanks to close cooperation with trusted specialists (in the field of design and SEO) **we are able to take care of a project from the first line of code to the last word in an advertising campaign.** Together we create solutions that are not only effective, but also **coherent and well thought out from start to finish.** It's worth adding that we don't operate in a vacuum. **We are official partners of technological leaders in the industry, such as [Vercel](/enterprise/vercel) and [Bitdefender](/enterprise/bitdefender).** This allows us to provide solutions that are proven, efficient and scalable. Thanks to this, our clients can be calm about the performance, security and development of their projects. But the most important thing is something else - **relationships.** We don't build relationships for a moment. **We want cooperation with us to give peace of mind, trust and the feeling that on the other side are people who really care.** Because that's what our philosophy is based on: **we grow together.** By providing the client with stable systems, great marketing and reliable IT support, we become a **valuable partner** that allows them to focus on developing their own business. This is our magic elixir: we develop together. And that's exactly how we want to operate - with passion, peace and conviction that **well-executed tasks have their value.** ZanReal is for us a fulfilled dream of working on our own terms, where quality goes hand in hand with a human approach. --- ## Services ### Software Development Off-the-shelf tools don't always meet all your requirements. If you need solutions perfectly tailored to your business, let us know. We design and build software adapted to your needs: stable, fast, scalable, and easy to maintain. With us, you can rely on code that doesn't fall apart after deployment - it genuinely solves problems and improves how your business operates. ## We create among others: - web applications, - business systems, - dedicated panels and modules, - integrations and APIs, - work automation tools, - extensions and features for existing systems. We offer solutions that grow with your company. ### Cloud Migration and Infrastructure We migrate systems to the cloud, design architecture, and ensure everything operates fast and securely. A properly conducted migration and organized infrastructure is an investment that protects your business from downtime, failures, and slow performance. We conduct the entire process to make it as smooth and stress-free as possible. As a company recognized with 9th place in the top 30 Cloud Migration Companies in Poland ranking (Clutch & The Manifest), we guarantee a proven approach, high work standards, and quality confirmed by our clients' reviews. ## We help with: - migrating systems to the cloud (AWS, Azure, GCP), - optimizing environments and configurations, - increasing security and system resilience, - minimizing infrastructure maintenance costs, - monitoring operations and responding to issues before they become crises. With us, your infrastructure runs smoothly - and you don't worry about failures. ### Data and Analytics You have data everywhere - in tools, systems, spreadsheets. When organized, it enables better decision-making that increases revenue and saves time. The problem is that in many companies, data rarely forms a coherent whole. If you see room for improvement here too, reach out to us. We'll help you gather data in one place, understand it, and use it in your daily work. ## In analytics, we offer: - data source integration and automatic data retrieval, - design of reports, dashboards, and summaries, - analysis of sales, processes, and customer behavior, - automatic summaries you can receive by email, - implementation of AI solutions facilitating data organization and analysis. Analytics is a powerful tool - join those who know how to use it to their advantage! ### AI and Automation AI can support your business at many levels - from simple automations to intelligent systems that work almost independently. Artificial intelligence allows enterprises to operate faster and more efficiently - and those that resist its implementation often fall behind. If you want to join this revolution but don't know where to start, let us know. At ZanReal, we go where processes get stuck, where hands are in short supply, and where data remains untapped - and we create solutions that do at least part of the work for you. ## What can we implement for you? - **AI Assistants** - help with content creation, data analysis, and decision-making based on provided materials. - **Process Automations** - from form and report handling, through data organization, to mailing. - **Intelligent Chatbots** - answer frequently asked questions, retrieve information from your systems, and relieve your team from customer support burden. - **Tool Integrations** - data flows automatically and error-free between your CRM, ERP, CMS, or shop systems. - **Agentic Systems** - advanced solutions that can take over entire processes. They can independently plan, adapt, and execute complex multi-step tasks. AI doesn't have to be a revolution. Even simple implementation can save dozens of hours of work monthly and put you several steps ahead of your competition. ### Copywriting Would your customer buy a pig in a poke? Probably not. Without clear information about your product or service, it's hard to expect fantastic sales results. A well-written offer and thoughtful content are the foundation through which customers understand what you offer and why it's worth spending money on. And we'll help you achieve that! ## We create among others: - **Product and Service Descriptions** - clear, persuasive, tailored to your customer and their needs. - **Website Content** - eye-catching, engaging, leading to action. - **Newsletters** - personalized, relationship-building, encouraging clicks. - **Blog Articles and Posts** - demonstrating expertise and building brand image. - **SEO Copywriting** - ranking in search engines while engaging readers. - **Other** - press releases, guides, rankings, and much more. Tell your potential customers exactly what they should hear - show them why they should choose your offer! ### Websites and Branding The right brand image online is absolutely essential today. If your site doesn't look good, loads slowly, isn't mobile-friendly, or is simply poorly designed, customers will quickly leave and look for your product or service from your competitors. With us, you don't have to worry - we'll help you create your own place on the web. ## What can we do for you? - **Websites and Online Stores** - modern, responsive, fast, and intuitive for users. We offer solutions built individually from scratch, as well as websites based on popular platforms like WordPress or Webflow. - **Visual Identity** - logos, color schemes, typography, and consistent design elements that distinguish your brand. - **Sales-Supporting Content** - texts that help customers understand the value of your offer. - **UX/UI** - we create accessible interfaces that let users quickly find the information they need and decide to purchase or contact you. The result? A website that not only looks great but also works effectively - attracting and engaging potential customers. ### SEO and GEO A well-optimized site today is not just classic search engine optimization. It's increasingly important to adapt it to the requirements of generative AI systems, which increasingly influence search results and recommendations for users. ## How can we help you in this area? - **Classic SEO** - keyword analysis, content optimization. - **Technical Audit** - analysis of site structure, load speed, responsiveness, indexing, and other technical factors affecting your site's visibility in search engines. - **AI Optimization** - preparing pages and content so that AI algorithms can easily analyze, interpret, and recommend them to users. - **Monitoring and Reporting** - tracking results, identifying issues, and recommending corrective actions. With this approach, your site won't just rank high in search results - it will also be prepared for the AI-driven future. ### Technology Consulting and Strategy We advise, analyze, and set the direction for your company's technological development. We help you understand what will truly improve your work, what's worth changing, and what not to invest in. We examine how your team works, identify where they lose the most time, and recommend real improvements. ## In consulting, we offer among others: - technological and process audits, - assessment of existing infrastructure and tools, - recommendations for technologies best suited to your business, - strategy and development roadmap creation, - needs analysis and tool recommendations, - systems architecture and integration planning. This is the foundation that makes subsequent implementations thoughtful, not "shot in the dark". ### Support and Maintenance Systems rarely break "suddenly". Usually, small problems appear first: something runs slower, someone loses access, and updates are postponed "for later". Eventually, infrastructure starts slowing down the business instead of supporting it. We offer continuous technical support to keep your websites, applications, and infrastructure running stably, securely, and predictably. We organize what has accumulated over the years, maintain current operations, and respond before small problems grow into crises. You focus on growing your business, we watch over your technical infrastructure. ### Cybersecurity Cybersecurity is now the foundation of business operations. One vulnerability, lack of backup, or misconfigured access is enough to lose data, halt team work, or face real financial losses. We help companies secure systems, data, and infrastructure thoughtfully and tailored to real needs. We focus on what actually protects the business and provides daily peace of mind. ### E-commerce Selling online is rarely held back by the shop itself. It is held back by everything attached to it: the marketplace listing that disagrees with the catalogue, the invoice somebody issues by hand, the margin that exists only in a spreadsheet, the warehouse system that finds out about an order when a person tells it. We build commerce on [Medusa v2](https://medusajs.com), an open-source framework that runs on your own infrastructure. The storefront is a separate application talking to it over an API, and the commerce logic is code rather than a settings screen with a ceiling - so a rule your business actually needs gets written instead of worked around. We know the stack from the inside, and seven of the plugins that came out of that work are published with their documentation. You can read what we build before you commission it. ## We work on: - headless commerce builds on Medusa v2, - marketplace integrations, starting with Allegro, - invoicing and KSeF filing, - pricing across currencies, with cost and margin tracked per product, - subscription and usage-based billing, - automation between the shop and the ERP, accounting and warehouse systems around it. --- ## Featured Offer ### Your Website in 24 Hours Get a polished website online within 24 hours, at a fixed price agreed upfront. We build it from your description - a year of free hosting, domain, mobile speed and Google/AI readiness included. **from $275 net** ### What you get A finished small business website that looks credible, loads quickly and is ready for Google, ChatGPT, Perplexity and Gemini from launch. - **A professional first impression.** Your small business website gets the essentials right: a clear offer, credible proof and a direct path to contact. It's built from your description, not patched together from a generic template. - **Fast on every phone.** The site is mobile-first, responsive and tuned for Core Web Vitals, so customers can reach you quickly from any phone. Fast pages also give Google fewer reasons to bury you. - **A clear route to enquiry.** A working contact form and focused call-to-action turn visits into real enquiries. People who land on the page know what to do next. - **Ready for Google and AI search.** We set up clean metadata, structured data and a sitemap so Google can index the site properly. The same structure helps AI assistants such as ChatGPT, Perplexity and Gemini understand and cite your business. - **Hosting and a free domain.** We set up fast hosting and connect your domain, so the launch is handled end to end. Hosting is free for the first year, then just $25 net/year. No domain yet? We cover a basic one free of charge. - **Your revision round included.** You approve a private preview before launch and get one revision round included. That means the final site goes live with your key changes already handled. ### Website packages Pick the right scope, know the fixed price upfront, and launch without surprises. #### Starter - $275 net A flagship small website for launches, services, and local brands, live in as little as 24 hours. - one-page or compact website - mobile-first speed - Core Web Vitals focus - SEO and AI-search setup - free domain (first year free) - 1 year of free hosting (then $25 net/year) - launch support - 1 round of revisions #### Professional - $550 net A larger website for teams that need more pages and content they can update themselves. - everything in Starter - some small subpages - simple CMS or blog - editable content - fast delivery in a few days - up to 2 rounds of revisions #### Business - $825 net A complete website for brands that need more scale or custom functionality. - everything in Professional - more subpages - more advanced page structure - custom features - custom integrations (CRM and other services) - up to 3 rounds of revisions Prices are net, excluding VAT. A new domain, if needed, is bought at cost 1:1 and billed separately. ### How it works, step by step Here's the full process broken down - from the description you send us to a finished website published online. Four clear steps, no surprises. 1. **Describe your site.** Describe what the site is for, the pages and sections you want, and any examples you like. No logo, copy or brand assets needed - the description is enough to start. 2. **We build the site.** We design and build the site fast with an AI-first workflow, then refine the details by hand. The goal is a sharp professional website, not a rushed placeholder. 3. **Review the private preview.** You receive a private preview link in as little as 24 hours. Review the site and send the changes you want covered in the included revision round. 4. **Approve and publish.** After approval, we connect your domain and publish the site. If you need a domain, we buy it at cost with no markup and bill it separately. ### Why choose ZanReal A website that looks made for your business, helps customers act, and stays low-risk from day one. - **Built for you.** Your site is shaped around your offer, market and customers - not squeezed into a generic template. - **Made to sell.** Clear pages, fast loading and simple paths help more visitors understand, trust and contact you. - **Proof, not promises.** A 5.0 rating on Clutch from real businesses - the kind of work clients are happy to recommend. - **Low risk, no lock-in.** The price is fixed upfront, you review everything before launch, and nothing ties you in. - **Almost no homework.** You send a short description of your business - we handle the design, build and technical setup. ### Straight answers #### Can you really build a website in 24 hours? Yes. After you send a short description of what you need, we can prepare a private preview in as little as 24 hours. One revision round is included, and nothing is published until you approve it. #### What do the packages cost? Prices are fixed and agreed upfront: Starter from $275 net, Professional $550 net, and Business $825 net. Larger websites, online stores or custom functionality are quoted separately as a fixed price before work begins. #### What is included in the website? You get a professional small-business website designed around your business, not a generic template. It is built for mobile performance, accessibility and search visibility, with a private preview, one revision round, domain connection and the first year of hosting included. #### Do I need a logo, text or brand assets ready? No. Send a short description of your business and what you need, and we build the website from that. A domain helps, but if you do not have one we cover a basic domain free of charge. #### Do I see the website before it goes live? Yes. You receive a private preview link first, then we handle the included revision round if needed. We publish to your domain only after you approve the website. #### What happens after the first year of hosting? The first year of hosting is free. After that, hosting is $25 net per year, and your domain stays connected to the website. --- ## Blog Posts ### The hidden side of WordPress websites: what costs companies after a few years? _2026-08-11T09:00:00.000Z_ · [https://zanreal.com/blog/the-hidden-side-of-wordpress-websites](https://zanreal.com/blog/the-hidden-side-of-wordpress-websites) ## The problem shows up later WordPress rarely fails in a dramatic way. More often, it works well enough for years, and the real cost appears only when the business needs to move quickly: change a form, speed up a page, connect analytics, clean up an infection, or restore a backup after a plugin update. This is not an article about WordPress being bad. For many companies it was a reasonable starting point. It made it easy to launch a site, add a blog, and let non-technical people edit content. The problem starts when the site stops being a simple brochure and becomes a sales channel, a lead source, and a place where the team needs to test campaigns without waiting weeks for every change. That is when the hidden side of WordPress becomes visible: updates, dependencies, scanners, plugin conflicts, heavy themes, and no clear technical owner. ## WordPress works until someone has to touch it The common scenario is familiar. A company has a website built a few years ago. Someone publishes a post once in a while, changes an image, or edits a section in the page builder. Most of the time, nothing looks broken. Then a simple request arrives: add a landing page, change the form, track campaign events, improve performance, add an English version. Suddenly the task touches the theme, the builder, five plugins, old styles, and code nobody wants to own. WordPress has one big advantage: you can do almost anything with it. It also has one big downside: it is very easy to solve every problem by adding another layer. ## Plugins solve problems and create new ones Plugins are one of the reasons WordPress became so popular. Need a form? Add a plugin. SEO? Plugin. Cache? Plugin. Cookie banner? Plugin. Slider? Plugin. CRM integration? Another plugin. At first, this feels efficient. Over time, it becomes a dependency graph where every update can change how the site behaves. Common problems include: - one plugin loads scripts on every page, even when it is needed only on the contact page, - two plugins try to optimize images or cache in different ways, - a page builder stores content in a format that is hard to migrate, - a form integration works, but nobody knows where failed submissions go, - a PHP or WordPress update exposes an incompatible part of an old theme. The visitor only sees a slow page or a form that behaves inconsistently. The cause sits deeper. ## Scanners love predictable paths WordPress is so common that bots scan typical WordPress paths even on websites that do not use WordPress at all. Application logs often show requests for: ```text /wp-admin /wp-login.php /wp-config.php /wp-content /xmlrpc.php ``` Some of this traffic is just internet noise. Some of it is automated probing for vulnerable installs, outdated plugins, exposed admin panels, and configuration files. If the website actually runs on WordPress, the team has to manage several things at once: core updates, themes, plugins, user permissions, backups, form protection, login limits, and suspicious request handling. If the website does not run on WordPress, it is still worth blocking obvious scanners at the CDN, WAF, or hosting layer so the application does not spend resources on traffic it should never serve. ## Performance often loses to editing convenience Many WordPress sites are slow not because WordPress cannot be fast. The usual issue is the sum of decisions: a heavy theme, a builder, multiple JavaScript libraries, large images, external fonts, marketing scripts, and caching configured carefully because nobody wants to break the site. A simple landing page can end up loading assets that are not needed for the first view. A contact form can add scripts across the whole website. A slider used on one page can affect every page. You can optimize this, but the work often looks more like application refactoring than toggling one option in the admin panel. ## Editing content is not the same as owning the system WordPress gives teams a sense of independence because marketing can edit content without a developer. That is valuable. The problem begins when access to an editor is mistaken for control over the whole system. If nobody owns updates, monitoring, backups, security, and release quality, the website starts operating under one rule: do not touch anything unless you have to. That is a weak foundation for a business that wants to test offers, campaigns, and services quickly. A basic audit should answer a few direct questions: - who updates WordPress, the theme, and plugins, - where the backups are and whether restore was tested, - which plugins are actually used, - who sees form and integration errors, - whether the site has staging before changes go live, - whether Core Web Vitals are measured on real pages, - whether admin access is limited and protected with MFA, - whether known WordPress paths are protected from scanners. If the answer to most of these is “I do not know”, the problem is not only the CMS. The problem is maintenance. ## When WordPress still makes sense WordPress can still be a good choice for simple websites, blogs, small content sites, and companies with a reliable maintenance process. If the team knows who handles updates, how backups work, which plugins are critical, and how changes are tested, WordPress can be stable. It can make sense to stay with WordPress when: - the website is mostly content driven, - the team works in the admin panel regularly and understands its limits, - custom integrations are minimal, - hosting, backups, and updates are under control, - the maintenance cost is predictable. Migrating only because WordPress feels old is usually a bad reason. First, measure the cost of the actual problems. Then choose the technology. ## When it is time to rethink the approach Changing architecture makes sense when the website starts behaving more like a product or a serious marketing system. This usually means the business needs more control over performance, security, experiments, and integrations. Warning signs include: - every small change requires working around theme limitations, - forms and integrations are hard to debug, - the site stays slow despite more caching plugins, - admin access is too broad, - updates are delayed because something might break, - marketing campaigns need landing pages that cannot be delivered quickly, - SEO and analytics depend on several overlapping plugins. At that point, it is worth considering a setup where the CMS manages content and the front-end is a separate controlled application. For example: Sanity for content, Next.js for the presentation layer, Vercel for hosting and edge delivery, plus a clear preview and release process. ## Headless CMS does not have to mean a big bang migration Migration does not have to mean replacing the whole website in one move. A staged plan is often safer. Start by mapping content and structure: blog posts, service pages, FAQ, case studies, SEO metadata, and forms. Then build the new front-end for the highest-value paths first and leave less critical sections for later. A practical plan can look like this: 1. Audit the current website, plugins, traffic, and technical issues. 1. List the pages with the highest business value. 1. Decide which content should live in the CMS. 1. Build a new front-end for key landing pages and the blog. 1. Add redirects from old URLs and control indexing. 1. Monitor forms, events, and performance after release. This is safer than a one-shot migration because it lets the team measure the result and reduce risk. ## What to check before making a decision Before deciding whether to stay on WordPress or move to another setup, run a short technical audit. It does not need to be huge. It needs to answer practical questions. | Area | What to check | Why it matters | | --- | --- | --- | | Plugins | count, freshness, real usage | fewer dependencies and fewer conflicts | | Security | login, MFA, roles, scanners, backups | fewer vulnerable entry points | | Performance | Core Web Vitals, images, scripts, cache | faster landing pages and better UX | | Content | post structure, SEO, repeatable sections | easier migration and cleaner editorial work | | Integrations | forms, CRM, analytics, consent | fewer lost leads and cleaner data | | Maintenance | staging, update process, technical owner | predictable changes without fear of outages | Only after that review can you tell whether the problem is the technology, the process, or both. ## How ZanReal helps At ZanReal we look at a website as a system that should support sales and operations, not just look good on launch day. With WordPress, we usually start with an audit: risks, dependencies, performance, security, analytics, and the real cost of continued maintenance. Sometimes the best decision is to clean up the current WordPress setup. Sometimes it is better to plan a staged migration to a headless CMS and Next.js. The point is to decide from evidence, not frustration after the next broken update. If your website works but every larger change feels risky, that is a good moment for a calm review. It is better to find weak spots before a campaign than on the day the form stops collecting leads. --- ### Observability in Next.js: OpenTelemetry and ClickStack step by step _2026-08-07T09:00:00.000Z_ · [https://zanreal.com/blog/observability-next-js-opentelemetry-clickstack](https://zanreal.com/blog/observability-next-js-opentelemetry-clickstack) Next.js makes it easy to ship fast interfaces, but once the application grows, console logs are not enough. You need to know which request was slow, which external call failed, how long rendering took, and whether the issue came from your code, the database, or a third-party API. This guide shows a pragmatic setup: OpenTelemetry inside a Next.js app and ClickStack as the local place where traces become searchable. The goal is not to add observability for its own sake. The goal is to debug production-like problems with evidence instead of guessing. ## What you will build We will use a small but realistic stack: - a Next.js app with instrumentation enabled, - OpenTelemetry spans around server-side work, - a local ClickStack instance, - verification commands that prove traces are being exported, - a few practical patterns you can reuse in production. The examples assume an App Router project, but the same tracing ideas apply to route handlers, server actions, scheduled jobs, and background workers. ## Start ClickStack locally For local work, keep the observability stack separate from the app. A minimal Docker Compose file is enough to verify the flow before you wire it into production. ```yaml services: clickstack: image: docker.hyperdx.io/hyperdx/hyperdx-local:latest ports: - "8080:8080" - "4318:4318" environment: HYPERDX_API_KEY: local-dev-key ``` Run it: ```bash docker compose up -d clickstack curl -f http://localhost:8080 || true ``` The important port for the app is `4318`: this is the OTLP HTTP endpoint that receives traces. ## Install OpenTelemetry packages In a Next.js app deployed on Vercel, start with `@vercel/otel`. Add the OpenTelemetry API package when you want custom spans around your own operations. ```bash pnpm add @vercel/otel @opentelemetry/api ``` Then enable instrumentation in `next.config.ts` if your Next.js version requires it: ```ts import type { NextConfig } from "next"; const nextConfig: NextConfig = { experimental: { instrumentationHook: true, }, }; export default nextConfig; ``` ## Register instrumentation Create `src/instrumentation.ts`. This file runs when the server process starts, so keep it small and avoid importing application code with side effects. ```ts import { registerOTel } from "@vercel/otel"; export function register() { registerOTel({ serviceName: "marketing", }); } ``` For local testing, export the endpoint before starting the dev server: ```bash export OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318 export OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf export OTEL_SERVICE_NAME=marketing-local pnpm dev ``` ## Add custom spans around expensive work Automatic instrumentation is useful, but the biggest gains come from naming the business operations you actually care about: fetching a blog post, loading related case studies, generating metadata, or calling an external API. ```ts import { trace } from "@opentelemetry/api"; const tracer = trace.getTracer("marketing.blog"); export async function withSpan(name: string, fn: () => Promise): Promise { return tracer.startActiveSpan(name, async (span) => { try { return await fn(); } catch (error) { span.recordException(error as Error); throw error; } finally { span.end(); } }); } ``` Use it at boundaries, not around every line of code: ```ts export async function getBlogPost(slug: string, locale: "en" | "pl") { return withSpan("blog.get_post", async () => { return sanityClient.fetch(blogPostQuery, { slug, locale }); }); } ``` ## Trace fetch calls with useful attributes When a request is slow, you need enough context to understand what happened without exposing private data. ```ts export async function tracedFetch(input: RequestInfo | URL, init?: RequestInit) { return withSpan("http.fetch", async () => { const response = await fetch(input, init); return response; }); } ``` Add attributes such as route name, upstream service, status code, cache mode, or feature flag state. Avoid raw emails, tokens, request bodies, and anything that could become personal data. ## Verify that traces arrive Open a page that calls the instrumented code, then check ClickStack. If the UI is not enough, inspect the collector endpoint and container logs. ```bash docker compose logs -f clickstack curl -I http://localhost:8080 ``` You should see spans with names like `blog.get_post` or `http.fetch`. If nothing appears, check the endpoint, protocol, environment variables, and whether the code path runs on the server rather than in the browser. ## What to trace first Start with operations that answer practical questions: - Which page or route was slow? - Which external dependency caused the delay? - Did the cache work or did the app fetch fresh data? - Did the failure happen before rendering, during metadata generation, or inside a route handler? A small number of well-named spans beats hundreds of noisy spans that nobody can interpret. ## Production checklist Before using this in production, make the setup explicit: - use a stable `serviceName`, - set environment variables per deployment target, - sample traces if traffic is high, - never attach secrets or personal data as span attributes, - document the naming convention for spans, - add alerts only after you understand the normal baseline. Observability is useful when it shortens debugging. Keep the setup boring, name spans after real business operations, and verify the pipeline before you need it during an incident. --- ### How to speed up a Next.js application without guessing _2026-08-03T09:00:00.000Z_ · [https://zanreal.com/blog/how-to-speed-up-a-next-js-application-without-guessing](https://zanreal.com/blog/how-to-speed-up-a-next-js-application-without-guessing) Performance work in Next.js often starts with the wrong question: “what can we optimize?”. That is too broad. Soon the team is compressing images, moving components, removing libraries, changing cache settings and hoping the graphs improve. Sometimes they do. More often, nobody knows which change helped or whether the original bottleneck was even in that area. A better question is: which route is slow, for whom, at which moment, and why? Only then does optimization become useful. This guide walks through a practical process: measurement, diagnosis and concrete Next.js techniques — Server Components, caching, Cache Components, Partial Prerendering, bundle analysis, images and third-party scripts. ## A fast application is not an accident Speed is not one metric. An application can have a fast first byte but ship too much JavaScript. It can have a small bundle but wait for a slow CMS. It can score well on the homepage and still be painful on a logged-in detail view. Do not start with “let’s optimize Next.js”. Start with one route and one symptom: - the server response takes too long, - users see a blank screen, - interaction becomes available too late, - one section loads much later than the rest, - production is slow while local development looks fine. Each symptom points to a different cause. A slow `fetch` is diagnosed differently from a large client component or a heavy marketing script. ## Establish a baseline Before changing code, record the baseline. At minimum, build the app and capture repeatable measurements for the selected route. ```bash pnpm build pnpm check ``` The build output shows first-load JavaScript per route. If one page ships much more JavaScript than similar views, inspect client components and imports before touching server code. If the project has a bundle analyzer, run it separately: ```bash ANALYZE=true pnpm build ``` Do not compare from memory. Write down concrete numbers: first-load JS, response time, LCP, TBT, request count and the largest assets. ## Separate server problems from browser problems The first split is simple: is the user waiting for HTML, or for JavaScript and browser resources? If `TTFB` is high, inspect the server: CMS, database, third-party APIs, cache, metadata generation and dynamic Next.js features. If `TTFB` is reasonable but interaction is late, inspect bundle size, hydration, third-party scripts and heavy client components. A small helper can reveal expensive server operations quickly: ```ts export async function measure(label: string, fn: () => Promise): Promise { const start = performance.now(); try { return await fn(); } finally { const duration = Math.round(performance.now() - start); console.info(`[perf] ${label}: ${duration}ms`); } } ``` In production, send this data to your observability tool. Locally, even a simple measurement can show whether the bottleneck is the CMS, rendering, or duplicated queries. ## Server Components should be the default In the App Router, a component should stay on the server until it truly needs the browser. `use client` is for state, effects, click handlers and browser APIs. It is not needed to render text, links, cards, article lists or data fetched on the server. ```tsx export default async function BlogPage() { const posts = await getBlogPosts(); return ; } ``` If `BlogList` only renders data, it should not be a client component. Move interactivity into the smallest possible child: ```tsx // Server component export function BlogCard({ post }: { post: BlogPost }) { return (

{post.title}

); } ``` The browser receives less JavaScript while the server still renders complete HTML. ## Cache is not one switch Caching in Next.js works well when the freshness rule is explicit. Otherwise it is easy to cache something user-specific or fetch live data that could safely be revalidated every few minutes. ```ts export async function getCaseStudies() { const response = await fetch("https://example.com/api/case-studies", { next: { revalidate: 3600 }, }); return response.json(); } ``` For CMS content, a time-based revalidation window or publish webhook is often enough. For user-specific data, you need a different strategy because shared cache can become a security bug. ## Avoid fetching the same data repeatedly One route can fetch the same document multiple times: once for metadata, once for page content, once for JSON-LD and once for related sections. It is easy to miss because each request hides in a different helper. ```ts import { cache } from "react"; export const getPost = cache(async (slug: string, locale: "en" | "pl") => { return sanityClient.fetch(postQuery, { slug, locale }); }); ``` Cache at the right level. If the result depends on `locale`, `preview`, `userId` or a feature flag, those values must be part of the arguments or cache key. ## Cache Components and `use cache` In newer Next.js versions, look beyond classic `fetch` with `revalidate`. Cache Components let you describe which parts of the tree are cacheable while other parts remain dynamic. ```tsx export async function FeaturedPosts() { 'use cache'; const posts = await getFeaturedPosts(); return ; } ``` This is especially useful for pages with a stable marketing shell and a few dynamic islands. Not everything has to wait for the slowest section. ## Partial Prerendering: static shell, dynamic islands Partial Prerendering lets you treat a page as a combination of a stable shell and dynamic parts. The user sees structure earlier, while slower sections resolve through `Suspense`. ```tsx import { Suspense } from "react"; export default function Page() { return ( <> }> ); } ``` This is not an excuse to hide slow queries behind a skeleton. It is a way to prevent one slower section from blocking the whole page when the business experience allows it to load later. ## Reduce bundle size through `use client` boundaries If one `use client` directive sits high in the tree, a large imported subtree can move to the browser. This is a common reason route bundles grow after a seemingly small UI change. Instead of marking a whole section as client-side, extract only the interactive element: ```tsx // Client component "use client"; export function ExpandButton() { const [open, setOpen] = useState(false); return ; } ``` The rest of the section can stay on the server. This usually helps more than micro-optimizing code inside the component. ## Load heavy UI only when needed Maps, charts, editors, animation libraries and complex forms do not always need to be part of the first load. If they are below the fold or behind an interaction, use a dynamic import. ```tsx import dynamic from "next/dynamic"; const PricingCalculator = dynamic(() => import("./pricing-calculator"), { loading: () =>
Loading calculator...
, }); ``` Verify the build after the change. A dynamic import only helps if it actually reduces the main route bundle or moves cost to the moment when the user needs it. ## Images: inspect LCP, do not guess Images are often the largest payload, but not every image needs the same treatment. First identify the LCP element. If it is the hero, set dimensions, use an appropriate format and mark it as priority. If the image is lower on the page, priority can hurt. ```tsx import Image from "next/image"; {hero.alt}; ``` Do not set `priority` on many images at once. The browser cannot treat everything as the most important asset. ## Third-party scripts are part of performance Analytics, widgets, chat tools, consent managers and advertising pixels can hurt more than your application code. In Next.js, choose a loading strategy that matches the script's importance. ```tsx import Script from "next/script";