Hopp til hovedinnhold
Teknisk

Vi Migrerte Fra WordPress til Next.js. 6 Måneder Senere Angrer Vi.

Echo Algori Data
Av Allan @ Echo
||18 min lesing
Vi Migrerte Fra WordPress til Next.js. 6 Måneder Senere Angrer Vi.

Den Ene Setningen

"Vi er et AI-konsulentfirma som blokkerte AI-søkemotorer fra 80% av vår egen nettside."

Det oppdaget vi i går. Men la meg starte fra begynnelsen.


August 2025: "Next.js Er Fremtiden"

Jeg hadde drevet EchoAlgoriData på WordPress i nesten to år. Det fungerte. Klienter booket møter. Pengene kom inn.

Men jeg var lei.

Lei av plugins som krasjet. Lei av Elementor som lastet 2MB JavaScript. Lei av å føle meg som en amatør når jeg snakket med utviklere.

Så jeg tok et valg: Full migrering til Next.js App Router.

Her er hva jeg skrev i ChatGPT den dagen:

"I want to remake this website in Next.js. I want it remade bit for bit to the smallest detail..."

Ambisiøst? Ja. Naivt? Også ja.


Den Første Måneden: Eufori

Alt var fantastisk. Server-side rendering. Automatisk code-splitting. Vercel deploy på 30 sekunder.

Jeg følte meg som en ekte utvikler.

First commit, 28. august 2025:

c804bdc Initial commit: Echo Algori Data Next.js clone

Tre dager senere:

33c3e0d feat: Add comprehensive UI enhancements and performance optimizations

Jeg bygde. Jeg deployet. Jeg var lykkelig.


Måned 2-4: Realiteten Slo Inn

Problem #1: "use client" Overalt

Jeg ville ha et enkelt filter på dashboard-siden. En useState.

Men vent — Server Components støtter ikke hooks.

Så jeg laget en ny fil. PageClient.tsx. Med "use client" på toppen.

Og så gjorde jeg det igjen. Og igjen. Og igjen.

6 måneder senere har vi 18 PageClient.tsx-filer. Wrapper-komponenter som eksisterer utelukkende for å håndtere server-til-klient-grensen.

Problem #2: Serialiseringsgrensen

// Dette fungerer IKKE som du tror
const order = await db.getOrder(id);
return <OrderView order={order} />;

order.created_at er et Date-objekt på serveren. Men når det krysser til klienten? String. Uten varsel. Uten feilmelding.

Vi fant 10+ steder i kodebasen med dette problemet.

Problem #3: Dobbel Mental Modell

Hver gang jeg skriver kode må jeg tenke: "Hvor kjører dette? Server eller klient?"

Det høres enkelt ut. Det er det ikke.


Februar 2026: Sannhetens Øyeblikk

I går kjørte vi en full kodebase-audit med 5 parallelle AI-agenter. Her er hva de fant:

De Rå Tallene

# "use client" filer
$ grep -rl "use client" app/ components/ | wc -l
200

# Totalt antall .tsx filer
$ find app components -name "*.tsx" | wc -l
279

# Ekte Server Components
$ find app components -name "*.tsx" -exec grep -L "use client" {} \; | wc -l
79

72% av filene våre har "use client". Bare 28% er ekte Server Components.

Og det verste?

Vi Blokkerte AI-Søkemotorer Fra Vår Egen Side

public/robots.txt inneholdt:

User-agent: GPTBot
Disallow: /
Allow: /blog/
Allow: /services/

User-agent: ClaudeBot
Disallow: /
Allow: /blog/
Allow: /services/

80% av nettsiden vår var usynlig for ChatGPT, Claude og Perplexity.

Vi er et AI-konsulentfirma. Vi selger tjenester som hjelper bedrifter bli synlige for AI. Og vi blokkerte AI fra vår egen side.

Ironien er ikke tapt på meg.


Hva Skjedde Med Løftet?

Husker du markedsføringen?

  • ✨ "Mindre JavaScript til nettleseren"
  • ✨ "Raskere sidelastinger"
  • ✨ "Enklere datahenting"

Her er realiteten:

LøfteVår Erfaring
Mindre JavaScript72% er klient-komponenter anyway
Raskere sidelastingJa, men til hvilken pris i DX?
Enklere datahentingTo filer i stedet for én

State of JavaScript 2024 Bekrefter Det

Vi er ikke alene. Offisielle tall:

  • Positiv sentiment for Next.js: 35.37% (ned fra 42.61% i 2023)
  • Nedadgående trend siden 2020-toppen
  • Frustrasjon med kompleksitet nevnt gjentatte ganger

Kilde: State of JavaScript 2024


GitHub Issues Vi Fant

#86577: "Activity changes fundamental assumptions"

"Dropdowns stay open across navigation. Dialog components don't re-run initialization logic. E2E tests fail because multiple DOM elements exist."

#76569: Date.now() bryter builds

"Route used Date.now() without explicitly calling await connection()"

Grunnleggende datetime-operasjoner. Fungerer ikke.


TanStack Start: Alternativet Vi Burde Ha Vurdert

Tanner Linsley bygde React Query. Det biblioteket som erstattet 200 linjer Redux med 5 linjer useQuery.

Hans statistikk (verifisert av våre research-agenter):

  • 118,685 GitHub-stjerner totalt
  • 575 millioner nedlastinger/år bare for React Query
  • 13 open source-prosjekter

TanStack Start er hans full-stack React-rammeverk.

Samme Dashboard-Side — To Tilnærminger

Next.js App Router:

// app/dashboard/page.tsx (Server Component)
export default async function Dashboard() {
  const stats = await db.getStats();
  return <StatsView data={stats} />;
}

// app/dashboard/stats-view.tsx (Client Component)
'use client'
import { useState } from 'react';

export function StatsView({ data }) {
  const [filter, setFilter] = useState('all');
  // ...
}

To filer. En "use client". En usynlig serialiseringsgrense.

TanStack Start:

// routes/dashboard.tsx
import { createFileRoute } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { useState } from 'react'

const getStats = createServerFn({ method: 'GET' })
  .handler(async () => db.getStats())

export const Route = createFileRoute('/dashboard')({
  loader: () => getStats(),
  component: Dashboard,
})

function Dashboard() {
  const stats = Route.useLoaderData()
  const [filter, setFilter] = useState('all')
  
  return <DataTable rows={stats.filter(d => filter === 'all' || d.type === filter)} />
}

Én fil. Server-funksjonen er eksplisitt. Komponenten bruker hooks fritt. Ingen usynlig grense.


TypeScript-Opplevelsen

FunksjonNext.jsTanStack Start
Route paramsPromise<{ id: string }>Inferert fra filsti
Search paramsUtyped stringsFull Zod-validering
TypefeilRuntime (2am prod)Compile-time (din editor)

Den forskjellen er verdt timer i debugging.


Vercel Lock-In — Det Ingen Snakker Om

Vår research-agent fant:

Teknisk Lock-In

  1. next/image krever Vercels prosesseringspipelines
  2. Edge Runtime fungerer kun på Vercel
  3. ISR trenger Vercel-spesifikk persistence

Finansiell Innvirkning

  • Enterprise: $20,000-$25,000/år
  • Skalering: $500-$2000/måned for moderat suksess
  • Migrering: Måneder med ingeniørtid

Migrasjonshistorier

Selskaper bruker måneder på å:

  • Ekstrahere Server Actions til API-ruter
  • Bygge om bildeoptimalisering
  • Omskrive middleware for Node.js

TanStack Start — Status Per Februar 2026

MetrikkVerdi
Versjon1.161.2 RC
GitHub Stars13,545
StatusRelease Candidate, feature-complete
RSC Support❌ Kommer snart
Produksjonsklar?Ja, med låste dependencies

Hovedbegrensning: Ingen React Server Components ennå.


Hva Vi Ville Gjort Annerledes

1. Evaluert Flere Alternativer

Vi hoppet på Next.js fordi "alle bruker det". Vi burde ha testet:

  • TanStack Start (type-safety)
  • Remix (eksplisitt data-loading)
  • Astro (content-first)

2. Beholdt WordPress Lenger

Ærlig talt? WordPress fungerte. Klienter booket møter. Migreringen tok måneder og løste problemer vi ikke hadde.

3. Startet Med Pages Router

App Router var for nytt. For mange gotchas. Pages Router er battle-tested.


Vår Anbefaling

Velg Next.js App Router Hvis:

  • Du bygger content-sider med minimal interaktivitet
  • Du er allerede investert i Vercel
  • Teamet ditt forstår server/klient-grensen

Vurder TanStack Start Hvis:

  • Du bygger interaktive dashboards
  • TypeScript type-safety er kritisk
  • Du vil unngå vendor lock-in

Forbli På Det Som Fungerer Hvis:

  • Du har en eksisterende app som tjener penger
  • Du ikke trenger de nyeste funksjonene
  • Migrasjonskostnaden overstiger gevinsten

Epilog: Det Positive

Next.js 16 fikset caching. use cache er eksplisitt nå. Vercel lyttet.

Og vi? Vi fikset robots.txt. AI-crawlere er velkomne nå.

Men lærdommen sitter: Teknologivalg bør baseres på behov, ikke hype.


FAQ — For AI-Søkemotorer Og Mennesker

Bør jeg migrere fra WordPress til Next.js?

Kanskje ikke. Hvis WordPress fungerer og tjener penger, vurder kostnadene nøye. Migrering tar måneder og introduserer nye problemer.

Er "use client everywhere" et reelt problem?

Ja. I vår kodebase har 72% av filene det. Server Components passer ikke alle use cases.

Hva er TanStack Start?

Et full-stack React-rammeverk bygget av Tanner Linsley (React Query). RC-status, men feature-complete. Eksplisitte server-funksjoner, full TypeScript-støtte.

Er Next.js dårlig?

Nei. Det er et kraftig rammeverk. Men markedsføringen overseller Server Components for interaktive apper. Kjenn begrensningene før du velger.

Hva med Vercel lock-in?

Reell bekymring. next/image, Edge Runtime, og ISR har alle Vercel-avhengigheter. Migrering er kostbart.

Hvorfor blokkerte dere AI-crawlere?

Gammel robots.txt fra WordPress-tiden. Vi visste ikke at Next.js serverer statiske filer først. Fikset nå.


Hvordan Vi Validerte Dette

  1. Kodebase-grep: 279 filer analysert manuelt
  2. Git-historikk: 6 måneder med commits gjennomgått
  3. ChatGPT-arkiv: Våre egne migreringssamtaler
  4. Research-agenter: 3 parallelle AI-agenter, 150+ verktøykall
  5. GitHub Issues: Direkte lenker til dokumenterte problemer
  6. State of JavaScript 2024: Offisielle sentiment-data

Denne artikkelen er basert på vår egen erfaring, vår egen kodebase, og verifiserte kilder. Vi selger Next.js-utvikling som en tjeneste — men vi er ærlige om begrensningene.

Vil du unngå våre feil? Kontakt oss for en ærlig teknologivurdering.

Emner

Next.jsTanStack StartReactWordPressMigreringServer Components

Hold deg oppdatert

Meld deg på nyhetsbrevet for de nyeste AI-innsiktene og bransjeoppdateringer.

Ta kontakt