Case studyServices websiteWordPress → Next.jsGerman & EnglishGermany
Visit cheggl.onlineCheggl.online case study: a bilingual web-services website, rebuilt from WordPress to Next.js
About the Project
Cheggl.online is the website of Cheggl GmbH's digital agency: web design and development, Shopify and WordPress, apps, SEO and marketing, under the line “We do everything”, with a retro TV on the moon as its hero film.
The site ran on WordPress with a ready-made agency theme, the Elementor page builder and a stack of plugins, in German only. We rebuilt it in Next.js: the same lime-on-black look and the same moon film, now as React components, in German at / and English at /en, with 14 service pages generated from data in both languages, contact and newsletter forms that save straight to a database, and SEO tags written in code.
- Project
- Cheggl.online
- Industry
- Digital agency / Web services
- Platform
- Website (Desktop + Mobile)
- Stack
- WordPress → Next.js
02Before the rebuild
The problem
A web agency on a page builder
Cheggl sells web development, yet its own site was a ready-made WordPress theme assembled in Elementor, with plugins for the shop, the forms and SEO. A new section or service page meant working around the builder instead of writing it.
Same look, new foundation
We kept the brand's look and rebuilt it in Next.js: React components instead of a page builder, German and English from one codebase, 14 service pages from data files, forms as server actions, and titles, hreflang and the sitemap generated in code.
One language, little context
The site spoke German only: no English version and no hreflang, and the home page went out without a meta description. Visitors from abroad and search engines got one language and very little to go on.
03Challenges
Business challenges
Keep the look, drop the page builder
The old cheggl.online ran on WordPress with the Onovo theme, Elementor and WooCommerce: 50 scripts and 34 stylesheets on the home page alone. The brand had to survive the move, so we rebuilt the same sections, the 360 badge and the outlined ticker in React and Tailwind.
Motion without the weight
Cheggl's site lives on movement: drifting lime circles, bubbles that chase the cursor, a badge that never stops turning. We rewrote each effect as a few lines of CSS animation instead of plugin scripts. Lighthouse now rates the live home page 98 for performance on desktop and 94 on mobile.
Fourteen services, two languages
Every circle on the services grid opens its own page, in German and in English: 14 services, 28 pages, all generated from 14 data files. hreflang tags and a sitemap with 42 URLs point Google to the right language for every page.
04Landing page
The website
One long home page, in two languages: German at cheggl.online, English at cheggl.online/en. Scroll through the live page below and flip the switch to see the other language.
On this page
“Wir machen alles”
The moon-TV film loops behind the headline, muted, with a sound toggle in the corner.
Fourteen service cards. In each row a lime circle follows the cursor with bubbles trailing it, and every card opens its own service page.
Mission and goal next to the turning 360 badge, then an outlined ticker running across the page.
“Kundenmeinungen”
Client quotes in a carousel with arrow controls.
A YouTube film that only loads after the play click, then three counters that count up as they scroll into view.
“Schicke uns deine Wünsche und Träume”
The e-mail address and four social links on a lime circle, with smaller circles drifting around it.
Logos of the companies Cheggl has worked for, in a two-row grid.
“CHEGGL-Newsletter abonnieren”
A newsletter form that saves each address to MongoDB through a server action, then contact details and legal links.
Swipe through the page, chapter by chapter
Captured from www.cheggl.online at 1440 px, in German and English, October 2026.
Behind the build
From WordPress to Next.js
The old cheggl.online was a WordPress site on the Onovo agency theme, built with Elementor and a stack of plugins, in German only. We rebuilt it in Next.js in three weeks: the same look the brand already had, now in German and English, with SEO and forms written into the code.
What replaced what
- Before: Onovo theme + Elementor builderreplaced by React 19 components + Tailwind CSS v4
- Before: German onlyreplaced by German at /, English at /en (next-intl)
- Before: Yoast SEO pluginreplaced by Metadata API: canonical + hreflang per page
- Before: Yoast XML sitemapreplaced by Sitemap generated on every build, 42 URLs
- Before: Contact Form 7replaced by Server actions saving to MongoDB
- Before: /services/item/… theme templatesreplaced by One /services/[id] route, 14 data files
One site, two languages
German at the root, English under /en
Germany is the home market, so German keeps the clean URLs and English sits one folder down. Every page knows its twin: the language switch keeps you on the same page, and each page tells Google about the other version.
localePrefix: "as-needed"Wir machen
alles
Komplette Webservices vom Design bis zur Programmierung
- Webdesign
- Shopify
- WordPress
- SEO
<html lang="de"><link rel="alternate" hreflang="de" href="https://cheggl.online"><link rel="alternate" hreflang="en" href="https://cheggl.online/en"><link rel="alternate" hreflang="x-default" href="https://cheggl.online">
- first commit to launch, April 2026
- 3 weeks
- commits
- 25
- URLs in the sitemap, DE + EN
- 42
From the git history of the cheggl.online repository (8 to 29 April 2026) and the live sitemap.xml.
- Lighthouse Performance
- 98
- Lighthouse Best Practices
- 100
- Cumulative Layout Shift
- 0
- Largest Contentful Paint (desktop)
- 0.6 s
Measured by Webguru with Lighthouse 12.8 on the live home page (www.cheggl.online), desktop preset, 2 October 2026. On the mobile preset: Performance 94, Best Practices 100, CLS 0.
What the migration delivered
The look the brand already had
Cheggl liked how the old site looked, so we kept it: the same sections, lime-and-black palette, menu overlay and CTA animation, rebuilt as React components. The home page went from 34 stylesheets to 2.
34 stylesheets → 2German and English from one codebase
All interface text lives in two translation files, and every service page carries a German and an English version. One component tree renders both, so a new section ships in both languages at once.
localization/de.json · en.json14 service pages from data
Web design, Shopify, WordPress, SEO, Laravel, MERN and more: each service is one data file with German and English content, rendered by a single template with steps, FAQ and a contact form.
/services/[id] · 28 URLsForms that land in a database
The contact form and the newsletter sign-up are Next.js server actions. They check every field on the server, reply in the visitor's language and save the entry to MongoDB; the newsletter turns away addresses that are already subscribed.
"use server" · mongooseSEO in the code, not in a plugin
Each page sets its own title, description, Open Graph tags, canonical and hreflang links. The sitemap is rebuilt on every deploy with both language versions of every URL, and robots.txt comes from code.
generate-sitemap.mjs · robots.jsPreview builds kept out of Google
Every preview deployment on Vercel answers with a noindex header, so test versions of the site never compete with the real one in search results.
X-Robots-Tag: noindex
05Research
The Process
Discover
- WordPress Site Audit
- Theme & Plugin Review
- Content Inventory
- Business Goals
Strategy
- Bilingual URL Plan
- Service Page Model
- Metadata & Sitemap
- Next.js Architecture
Design
- Existing Look, Kept
- Lime & Black Palette
- Service Page Layout
- Responsive Layouts
Develop
- React Components
- German & English
- Forms to MongoDB
- 14 Service Pages
Deliver
- Alt Text Pass
- Sitemap & robots.txt
- Vercel Deployment
- Review Rounds
Three weeks in the commit log
25 commits · 9 working days
06Design System
Typography
The brand pairs Cera Pro's geometric clarity for headings and body with Fugaz One, the slanted face of the Cheggl wordmark.
Cera Pro
- 12px
- 16px
- 20px
- 24px
- 30px
- 32px
Heading - Body
CHEGGL
CHEGGL
Fugaz One
- 64px
Logo
On the live site
One type token, carried over from WordPress
The WordPress site ran the Onovo theme, set in Epilogue. The Next.js rebuild keeps that face as a single CSS token for headings, body copy and UI, while the slanted Cheggl wordmark ships as the logo image. The rows below are set at the live site's real sizes, with its own copy.
- Body & UI
- Epilogue
- Logo
- Cheggl wordmark
- Token
--onovo-font- Weight
- 400 – 700
- We do everything
- We are a Full-Service Agency
- Website Development
- Development of professional and responsive websites that meet your needs and goals.
- What do we do?
Color Scheme
Minimal and eye-catching, never eye-straining: one electric lime on black, and quiet greys around it.
Every value below renders on cheggl.online: CSS tokens, the logo file or hex values in the components. Click a swatch to copy its hex.
--primaryText contrast: Black text 18.3:1AAA
On white 1.15:1Fail
logo.pngText contrast: Black text 11.4:1AAA
On white 1.84:1Fail
service pagesText contrast: Black text 17.9:1AAA
On white 1.18:1Fail
--secondaryText contrast: Lime text 18.3:1AAA
--surface-darkText contrast: Lime text 13.2:1AAA
--border-mutedText contrast: White text 10.7:1AAA
section groundText contrast: Black text 18.8:1AAA
--service-item-text-colorText contrast: White text 15.6:1AAA
--service-eyebrow-colorText contrast: On white 7.5:1AAA
--text-mutedText contrast: On white 5.7:1AA
The lime rule
Lime is a fill, a highlight or text on dark, never text on white.
- Lime on black18.28:1AAA
- Black on lime18.28:1AAA
- Lime on white1.15:1Fail
WordPress to Next.js
WordPress to Next.js and multilingual website FAQ
What companies ask us before they launch a website in German and English, or in more languages.
Ask us anythingYes. We build multilingual sites with next-intl in Next.js: one codebase, a translation file per language, and clean URLs such as / for German and /en for English. The language switch keeps visitors on the same page, and every page links to its other language versions with hreflang so Google shows the right one in each country.
Give each language its own URL, never switch languages on the same address. On Cheggl.online German keeps the root and English sits under /en. Every page sets a canonical, hreflang links to its twin and an x-default, and the sitemap lists both language versions of every URL. Write titles and descriptions for each language too, so the English pages don't go out with German snippets.
Either works. Interface text sits in one translation file per language and every service page carries both versions, so your team or your translator can change copy without touching components. We advise against publishing machine translation unchecked: a native speaker should read every page, and titles, descriptions and examples should fit each market, not just the words.
Yes. If your brand already works, we keep it: we rebuild your theme's layout, colours and animations as React components, so visitors see the site they know, minus the page builder and plugin overhead. Cheggl.online kept its look and moved from WordPress, Elementor and the Onovo theme to Next.js in three weeks. If SEO during the move is your main worry, our cheggl.info case study covers that side.
We rebuild them as part of the site. Submissions are checked on the server and saved to a database, and we can send each one to your inbox, to your CRM such as HubSpot or Pipedrive, or to your newsletter tool. Replies come back in the visitor's language. We also add spam protection and, for newsletters in the EU, double opt-in.
Yes, if the site is built for it from the start. With a next-intl setup like Cheggl.online's, a new language means a new translation file, translated page data and one more locale in the routing; hreflang tags and the sitemap pick it up on the next build. Adding languages to a site that was built for one usually takes longer.
Yes. Much of our work is for companies in Germany, including several projects for Cheggl GmbH in Hamburg. We build German-first sites with English versions where they help, and we plan for German requirements such as an Impressum, a Datenschutz page and consent for tracking.
The number of page templates, how much content moves or needs translating, how many languages you need and which integrations are involved. We quote after a short call and a look at your current site. For scale: Cheggl.online, with 14 service pages in two languages, took three weeks from first commit to launch.
For Cheggl GmbH we also built the Cheggl video business directory with hybrid AI and voice search, and moved cheggl.info from WordPress to Next.js. For other clients we design and build websites, Shopify stores and web apps, and look after them after launch.
Your services site, rebuilt?
Let’s do a project together!
We moved cheggl.online from a WordPress theme to Next.js, in German and English. Tell us what your site has to do, and we’ll plan the rebuild with you: pages, URLs, forms and SEO.