What a WordPress developer should know before starting with Next.js

If you build WordPress themes, a lot of Next.js will feel familiar: templates, routes, data from an API. Some ideas are new, though. These are the parts of Next.js for WordPress developers that are worth understanding early.

Routing comes from folders

In the App Router, folders inside app/ become URLs. A page.tsx file inside a folder is the page for that route. It is similar to the WordPress template hierarchy, but explicit instead of rule-based.

app/
	page.tsx          → /
	blog/page.tsx     → /blog
	blog/[slug]/page.tsx → /blog/my-post

Server Components are the default

Components render on the server unless you mark them otherwise. That feels close to PHP templates: fetch data, return markup, no JavaScript sent to the browser for that component. Only components that need interactivity, like a menu toggle, need the 'use client' directive.

Data fetching happens in components

A server component can be async and fetch data directly:

export default async function BlogPage() {
	const res = await fetch('https://example.com/wp-json/wp/v2/posts');
	const posts = await res.json();
	return <PostList posts={posts} />;
}

WordPress can still be the CMS

In a headless setup, editors keep using WordPress and Next.js reads content through the REST API or WPGraphQL. You trade WordPress's built-in theming and plugins on the front end for more control over performance and rendering.

Images and performance

The next/image component handles responsive sizes and lazy loading, much like wp_get_attachment_image() does for themes.

Start small

A good first project is a small site that reads posts from an existing WordPress install. It covers routing, data fetching and rendering without needing everything at once.