WordPress to Next.js Migration

We rebuild WordPress websites in Next.js when the site needs more than a template can give: logged-in areas, filtered listings, previews or pages that update on their own schedule. This is a new build, not a theme conversion, because a WordPress theme cannot be carried into Next.js. We scope the routes, the dynamic features and the content source together.

A stack of three layered page cards with a lightning bolt and a small rocket

01Choose

Choose what you want to change

Should WordPress keep supplying content, or should another system take over? Tick one part, several, or the whole project to see what each involves.

Where this startsOur WordPress theme cannot do what we now need, and someone has suggested Next.js without explaining what changes for editors.

Choose one part, several parts or the whole project

Plan the complete WordPress to Next.js projectScope the build from content source to launch, as a new build rather than a theme conversion.

Audit of plugins, routes and dynamic features
Decision to retain or replace WordPress
Next.js templates and content connection
Preview and cache update set-up
Redirects, tests and launch support

Check first: Which features need a server rather than ready-made pages.

Next: Share your site address and describe the features that forced the question.

Keep WordPress as the content sourceEditors stay in WordPress while Next.js builds the pages.
- Connect through the REST API or WPGraphQL
- Switch on custom post types for the API
- Check plugin data one plugin at a time
- Plan hosting for the WordPress side
Check first: Which content types and plugins feed your current pages.
Related: Headless CMS Development, Headless CMS Migration
Next: List your custom post types and the plugins that add content.
Move content to another CMSReplace WordPress with a content system chosen for the new build.
- Compare headless CMS options against your needs
- Map posts, pages and fields to the new system
- Move media and tidy old content
- Train editors on the new screens
Check first: Which editing features your team could not give up.
Related: Headless CMS Migration, Headless CMS Development
Next: Tell us who edits, and any approval steps they follow.
Scope routes and dynamic featuresRebuild pages, listings, filters and sign-in areas as Next.js routes.
- Turn old address patterns into routes
- Rebuild listings and filters
- Plan sign-in areas where needed
- Decide which pages are built in advance
Check first: Which pages must change often or differ for each visitor.
Related: Headless CMS Development, Website Migration Services
Next: Send links to your listings, search and any member pages.
Set up previews and cache updatesLet editors preview drafts and see published changes arrive.
- Set up draft previews from the CMS
- Choose time-based or on-demand refresh
- Confirm what the chosen host supports
- Rehearse draft to live with your editors
Check first: Whether your content system can send editors to a preview address.
Related: Headless CMS Development
Next: Tell us how soon edits must appear and who approves them.
Plan redirects and launchForward old addresses and agree who does what at launch.
- Build and test a redirect map
- Agree the host and a private test copy
- Confirm who changes the domain settings
- Watch search performance after launch
Check first: How many old addresses need a permanent redirect.
Related: Website Migration Services
Next: Export your list of current addresses if you have one.

In plain terms

Revalidation: Refreshing a pre-built page after a set time or when content changes.
Draft Mode: A Next.js feature that lets editors see unpublished content before it goes live.
Headless CMS: A content system with no public front end, feeding a separate website.
Permanent redirect: An instruction that forwards visitors from an old address to a new one for good.
API: A way for one system to pass its content or data to another.
Custom post type: A named kind of content in WordPress, such as events or properties, with its own list and fields.

02Server needs

Which pages need a server, and which do not?

Next.js is a React framework for building full-stack web applications (software that runs both in the browser and on a server). It is not a CMS. Sort your pages first, because the answer shapes how the site is run and updated.

Kind of page
Service and about pages
Question we ask
Can they be built once and served as they are?
Kind of page
News, events or listings
Question we ask
How soon must an edit show, and can pages refresh in the background?
Kind of page
Member or account areas
Question we ask
Who signs in, and what is shown to each person?
Kind of page
Search and filters
Question we ask
Is the data local to the site or fetched from another system?
Kind of page
Draft previews
Question we ask
Can your editing system send editors to a private preview?

Our Headless CMS Development service covers the content system behind these pages.

03Content

Decide what stays in WordPress and what gets rebuilt

If WordPress stays, Next.js reads it through the REST API or the WPGraphQL plugin (two ways for software to request your content). A custom post type (a content type you added, such as Properties) must be switched on for each: show_in_rest for REST and show_in_graphql for WPGraphQL. Plugin-generated content is not confirmed to appear by default, so each plugin is checked.

Next.js builds routes from folders, with bracketed folder names for pages like individual posts. We turn each old WordPress address pattern into a route, and rebuild the templates as React components. Anything that depended on theme code is rebuilt from the specification, not converted.

04Previews

Test previews and cache updates, not only pages

Next.js can refresh a pre-built page after a set time, or when we tell it a piece of content has changed. This is called revalidation. Draft Mode lets an editor preview unpublished content, while other visitors keep seeing the cached page.

Our tests follow an edit through the whole chain:

An editor saves a draft and opens the preview.
The editor publishes, and we time the live page update.
A second visitor checks that no draft appears.
We repeat the edit on a custom post type and a filtered listing.

05Hosting

Choose the host and the permanent redirects early

Not every host supports every refresh feature, and a fully static export does not support revalidation. So we confirm the host before the build starts, and we say what happens if you change it later.

Old addresses go in a redirect map (a list sending visitors from each old address to its new one). In the Next.js configuration, a permanent redirect is sent as a 308. Very long lists may need another method. We keep redirects in place and monitor search performance after launch, with no promise about rankings. See Headless CMS Migration if the content system will change too.

Questions about moving WordPress to Next.js

Can you convert my WordPress theme to Next.js?

No. The theme is rebuilt. We take the design and behaviour as a brief and write new components.

Must I give up WordPress for editing?

No. WordPress can stay as the content source if its content types are exposed to the API. Replacing it is an option, not a requirement.

Will editors see drafts before publishing?

It can be set up. Draft Mode supports previews, but your editing system must be able to send a preview address.

Does every host handle cache updates?

It depends on the host. We check support for the features you need before choosing where the site runs.

Move to Next.js for a reason you can state

Tell us which features forced the question, and who edits the site. We will assess the routes, the content source and the preview needs, then plan the build.

Book a Free 30-Minute Call