Cheggl.info case study: from WordPress to a Next.js marketing website
Case studyMarketing websiteWordPress → Next.jsBranchen & Standorte pagesGermany2026
Visit cheggl.info
About the Project
Cheggl.info is the German marketing website of Cheggl, a Hamburg video-marketing company that brings video production, its own platform and distribution together in one system: “Videomarketing neu gedacht”. The platform lives at cheggl.com; cheggl.info explains what Cheggl does and for whom.
We rebuilt it from WordPress and Elementor in Next.js: one long, scroll-driven home page that tells the whole story, story pages for Was, Wie, Wo and Wer, jobs and contact, and statically generated landing pages for 10 industries (Branchen) and 5 cities (Standorte).
- Project
- Cheggl.info
- Industry
- Video marketing
- Platform
- Website (Desktop + Mobile)
- Stack
- WordPress → Next.js
02The starting point
The problem
A page builder in the way
The old cheggl.info ran on WordPress with the Elementor page builder, plus plugins for caching, SEO and forms. Every new section, layout or animation went through the builder, which made the scroll-driven story Cheggl wanted hard to build and to change.
One codebase, built to grow
We rebuilt cheggl.info in Next.js: one long home page that walks from Was to Wie, Wo and Wer, plus statically generated pages for 10 Branchen and 5 Standorte, each with its own title and description, all built from the same components and brand tokens.
Many searches, one home page
Cheggl sells video production, its Videobranchenbuch (a video business directory), social media and websites to very different businesses across Germany. One home page can't answer an estate agent in Munich and a gym in Hamburg equally well.
03Challenges
Business challenges
Many offers, one clear story
Cheggl sells video production, profiles in its video business directory, social media and websites. The site had to show how these fit together, so the home page groups them into three pillars around one Cheggl System before it goes into detail.
A page for every industry and city
An estate agent in Munich and a gym in Hamburg search for different things. Instead of one home page for everyone, ten Branchen pages and five Standorte pages answer those searches, each generated from data with its own title and description.
Films without a slow page
Cheggl sells video, so the site is full of films: a showreel, client references and a directory player. On WordPress they sat in the uploads folder. Now they stream from S3 and DigitalOcean Spaces with light poster frames, so the page paints before any film loads.
04Landing page
The website
cheggl.info tells the whole Cheggl story on one long page, from the 120-second film at the top to the contact form at the bottom. Below, the live page, chapter by chapter.
On this page
“Videomarketing neu gedacht.” The promise in one line, with the CHEGGL in 120 SEC showreel playing beside it.
What Cheggl does and what companies use it for: enquiries, applicants, Google visibility, faster trust.
Production, presence and reach as three outlined cards around one Cheggl System badge.
The Videobranchenbuch profile: a company page built around its films, previewed in a browser mock-up.
A format switcher (intro, social, event, recruiting…) and video ideas for six industries.
The video shop in three steps: pick a video, fill in the briefing, get it produced and delivered.
Cheggl PRO, the membership for companies that produce video regularly, with a Standard vs. PRO comparison.
“Video ist der Start. Reichweite entscheidet.” Social media support, content planning, campaigns and video ads.
Websites built around a company’s video presence, with the industries they suit and a reference link.
The wider Cheggl world in four cards: the app, the web service, Cheggl Sports and the explainer series.
Six of Cheggl's own client films by industry, each playing in its card and opening full screen on click. These are Cheggl's results for its customers, not figures from our build.
Five reasons in quiet white cards, closed by one violet card that asks for the next step.
A player with a playlist of industry films, from pharmacy to hair salon, and a profile call to action.
“Das läuft bei Cheggl.” Reviews from Cheggl's customers in a slider above four of Cheggl's key figures.
Careers, a short enquiry form with direct email and phone, a final call to action and the footer.
Swipe through the page, chapter by chapter
Captured from www.cheggl.info at 1440 px, October 2026.
Behind the build
From WordPress to Next.js
Until 2026, cheggl.info ran on WordPress with the Elementor page builder and a stack of plugins on top. We rebuilt it from scratch in Next.js: the same German content and brand, a new component system, and SEO written into the code instead of bolted on.
What replaced what
- Before: Elementor page builderreplaced by React 19 components + Tailwind CSS v4
- Before: Yoast SEO pluginreplaced by Next.js Metadata API, per page
- Before: W3 Total Cachereplaced by Pages prerendered as static HTML
- Before: Jetpack Boostreplaced by next/image: resized, modern formats
- Before: Videos in the uploads folderreplaced by Films streamed from S3 and DigitalOcean CDNs
- Before: Permalinks and theme templatesreplaced by App Router: one folder per route
- first commit to last, Mar–May 2026
- 2 months
- commits
- 146
- merged pull requests
- 16
From the git history of the cheggl.info repository, 12 March to 12 May 2026.
- Lighthouse SEO
- 100
- Lighthouse Best Practices
- 100
- Cumulative Layout Shift
- 0
- Largest Contentful Paint (desktop)
- 1.5 s
Measured by Webguru with Lighthouse 12.8 on the live home page (www.cheggl.info), desktop preset, 1 October 2026. SEO and Best Practices also scored 100 on the mobile preset.
What the migration delivered
15 landing pages from two data files
Ten Branchen (industry) pages and five Standorte (city) pages come from one template each. Every page is generated at build time with its own title and description.
generateStaticParams · generateMetadataStatic HTML, served from cache
The home page and every Branchen and Standorte page are prerendered and answered from Vercel's cache, so a visitor never waits for a database or PHP.
x-nextjs-prerender: 1 · x-vercel-cache: HITSEO in the code, not in a plugin
Titles, descriptions, icons, the web manifest and Search Console verification live in the Next.js Metadata API, reviewed and versioned like the rest of the code.
export const metadataA component system instead of a page builder
The long home page is fifteen React sections on a shared layout container. Changing a section means editing one component, not hunting through builder widgets.
15 sections · one containerFilms off the web server
The old site served its videos from the WordPress uploads folder. Now the showreel and client films stream from S3 and DigitalOcean Spaces, with poster frames and accessible labels.
<video muted playsInline poster>Optimised images
Images go through next/image, which serves each one resized for the screen in a modern format and loads below-the-fold images lazily, instead of a caching plugin rewriting them after the fact.
next/image
05Research
The Process
Discover
- WordPress Site Audit
- Content Inventory
- Plugin & SEO Review
- Business Goals
Strategy
- Single-Page Story
- Branchen & Standorte
- Metadata Plan
- Next.js Architecture
Design
- Wireframes
- Design System
- Section by Section UI
- Video Placements
Develop
- App Router Pages
- React Components
- Responsive Layouts
- Films via CDN
Deliver
- Cross-Device QA
- Metadata & Icons
- Vercel Deployment
- Review Rounds
06Design System
Typography
In the design, Cera Pro sets headings and body copy and Fugaz One is kept for the logo. On the live site the same roles ship in one self-hosted font, as the scale below shows.
Cera Pro
- 12px
- 16px
- 20px
- 24px
- 30px
- 32px
Heading - Body
Fugaz One
- 64px
Logo
In production
One self-hosted family, one token scale
In the cheggl.info code the Cera Pro roles are set in Geist, loaded through next/font so the font files are self-hosted with the site rather than fetched from a font service. The type scale lives as tokens in the Tailwind v4 theme: every heading has a desktop and a mobile size, and the wordmark ships as the logo image.
- Font
- Geist
- Weight
- 400 – 900
- Videomarketing neu gedacht.
- Mehr Sichtbarkeit. Weniger Kosten.
- Video bestellen. Fertig.
- Cheggl verbindet Videoproduktion, Plattform und Distribution in einem System.
- Was Cheggl macht
Color Scheme
Cheggl's violets and lime as they ship in the cheggl.info theme, each with the text contrast it was checked against.
Every value below is a token shipped in the live site's Tailwind v4 theme. Click a swatch to copy its hex.
--color-brand-deepText contrast: White text 9.8:1AAA--color-primary-hoverText contrast: White text 11.3:1AAA--color-brand-purpleText contrast: White text 5.2:1AA--color-accent-limeText contrast: Ink text 10.2:1AAA
--color-brand-lightText contrast: Ink text 12.8:1AAA--color-text-darkText contrast: White text 18.7:1AAA--color-surface-videoText contrast: White text 19.8:1AAA
--color-green-600Text contrast: Ink text 5.8:1AA--color-yellow-600Text contrast: Ink text 6.4:1AA--color-red-600Text contrast: White text 4.8:1AA
Website migrations
Webguru website migration FAQ
What companies ask us before they move a website off WordPress, or build a new one in React and Next.js.
Ask us anythingYes. We start with an audit of your WordPress site: every page, template, plugin, form and tracking script. Then we rebuild the front end in Next.js and React, move the content across, and decide what each plugin becomes, whether that is code, a small service or nothing at all because it is no longer needed. Cheggl.info went from WordPress and Elementor to Next.js this way.
Not if the migration is planned around search. We crawl the old site before launch, keep or redirect every URL with 301s, carry over titles, descriptions and structured data, publish a sitemap, and watch Google Search Console in the weeks after go-live so any drop is caught and fixed early.
Yes. If you publish often, we connect Next.js to a headless CMS, for example Sanity, Storyblok, Contentful or WordPress itself used only as the editing back end, so your team keeps a familiar editor. If pages rarely change, plain content files keep the site simpler and faster. We recommend one after looking at how you work.
A page builder adds its own markup, scripts and plugins to every page. With Next.js we ship only the components a page needs, prerender pages as static HTML, and handle metadata in code. There are also fewer plugins to update and fewer places for security problems to hide.
Videos never live on the web server. We stream them from a CDN, show a light poster image first, encode short muted loops for backgrounds, and only load a film when it comes into view. Images go through next/image and fonts are self-hosted, so the first screen paints quickly even on a phone.
Yes. We keep each industry or city in a data file and render it through one template, so a new page is a new entry rather than a new build. Next.js generates every page at build time with its own title and description. Cheggl.info has ten Branchen and five Standorte pages made this way. We write each page around what that audience searches for, so the pages don't read as copies with a city name swapped in.
Often both. A long single page is great for telling a brand story in one scroll, but one URL can only rank for a handful of topics. Cheggl.info pairs its story page with dedicated pages for each industry and city, so every search intent has its own page with its own title and description.
Yes. Our maintenance plans cover framework and dependency updates, uptime and error monitoring, backups, small content changes and new sections as your business grows.
It depends on the number of pages and templates, how much content moves, and which integrations are involved. We quote after a short call and a look at your current site. For scale: the Cheggl.info rebuild ran from first commit to last in about two months.
Cheggl.info is one of several Cheggl GmbH projects. We also built the Cheggl video business directory with hybrid AI and voice search, the Cheggl app for iOS and Android, the Cheggl video shop, and a bilingual German and English rebuild of cheggl.online.
We design and build websites, online shops and web apps: UI/UX design, React and Next.js development, WordPress, SEO and ongoing support, for companies in Germany, the UK, the US and beyond. Browse our services or see more of our work.
Moving off WordPress?WordPressNext.js
Let’s do a project together!
We rebuilt cheggl.info from WordPress in Next.js. Tell us about your site and we’ll map the move with you: content, URLs, SEO and speed.