WP-Next: A Headless WordPress Admin Built with Next.js (No PHP Required)

Tired of the classic, PHP-bound WordPress admin? WP-Next reimagines it with a modern stack. Built entirely with Next.js and WP-Node, WP-Next delivers a headless CMS experience for managing posts, pages, media, comments, users, and more—without writing any PHP.

👉 Check out the repo here: https://github.com/rnaga/wp-next — and don’t forget to leave a star if you find it useful! ⭐

Under the hood, WP-Next uses Next.js Server Functions (powered by WP-Node) to interact with your WordPress database. That means a clean, React-first workflow in TypeScript, server-side data handling, and a development process that feels just like building any modern Next.js app.

Why it stands out

• Headless by design: Manage WordPress content with a React-powered admin.
• Next.js + TypeScript: Familiar tools for building, extending, and customizing.
• WP-Node integration: Direct access to WordPress data through Node.js.
• No PHP required: Everything runs in JavaScript/TypeScript, front to back.

With WP-Next, you keep WordPress’s proven content model while gaining the speed and flexibility of a Next.js application.

Quick Demo

The fastest way to try out WP-Next is by running the prebuilt demo image with Docker.

docker run --rm --init -it --name wp-next-example -p 3000:3000 \
  -v wp-next-example_public:/app/admin/public \
  -v wp-next-example_db:/var/lib/mysql \
  -v wp-next-example_html:/app/html \
  rnagat/wp-next-example:latest

Once the container is running, open http://localhost:3000/admin in your browser and log in with:

Username: wp  
Password: wp  

When you’re done, you can stop and remove the running container with:

docker stop wp-next-example

Admin Dashboard

The main feature of WP-Next is the Admin Dashboard—a headless CMS that serves as a modern alternative to the traditional WordPress Admin Dashboard.

Out of the box, it includes:

• Posts & Pages – create, edit, and manage content
• Media – upload and organize images, videos, and files
• Terms – categories, tags, and other taxonomies
• Comments – moderate and manage discussions
• Profile & Settings – manage user profiles and account preferences
• Users and Roles – add, edit, and assign capabilities
• Revisions – track and roll back content changes

WP-Next also supports multi-site / multi-network mode, enabling you to manage multiple WordPress sites from the same admin interface:

• Sites – manage and configure multiple sites in one network
• Blogs – per-site content such as posts, media, and comments

Notes

Since WP-Next is fully written in TypeScript and React, certain WordPress features are not supported, including:

• WordPress Themes and appearance settings
• WordPress Block Editor (Gutenberg)
• WordPress template rendering APIs
• WordPress plugins

Core Libraries

WP-Next is built on top of a modern TypeScript and React ecosystem. Its core dependencies include:

• @rnaga/wp-node — TypeScript-first WordPress database integration.
• next — Next.js framework providing SSR, routing, and server functions.
• @mui/material — Material UI component library for building the admin interface.
• @tiptap/react, mui-tiptap — TipTap rich-text editor with Material UI integration.

Hooks (Filter and Action)

WP-Next uses the WP-Node hook system, which is inspired by WordPress hooks but designed for TypeScript and Node.js. It supports both filters (for transforming data) and actions (for running side effects).

Because WP-Node is TypeScript-first, hooks are:

• Type-safe — strongly typed signatures for safer extension.
• Asynchronous filters — filters can be async and return transformed data.
• Actions as events — actions are built on top of Node.js EventEmitter and are used to trigger side effects.
• Independent of PHP — not directly compatible with WordPress core hooks.

Key points:

• Filters: transform and return data; may be async.
• Actions: perform side effects and do not return data.
• Hooks can be registered either with TypeScript decorators (for static / lifecycle hooks) or with the HookCommand utilities (for runtime / dynamic hooks).

For more details about hooks, how they work, and usage examples, see the WP-Node hooks documentation:

https://rnaga.github.io/wp-node/docs/concepts-features/hooks

Frontend vs Backend Hooks

When initialized, WP-Next generates a _wp/hooks directory where you can add your own hooks:

hooks/
├── client
│   └── index.tsx
└── server
    ├── admin-media.hook.ts
    ├── index.ts
    ├── nextauth-providers.hook.ts
    └── notifications.hook.ts

Frontend Hooks

Frontend hooks (under _wp/hooks/client/) are bundled into the Admin UI and run in the browser.

Use them for UI extensions such as:

• Adding sidebar menus
• Registering custom admin pages
• Applying client-side theming

⚠️ Frontend hooks must only contain client-safe code (no filesystem access, no env secrets, no server-only APIs).

Backend Hooks

Backend hooks (under _wp/hooks/server/) run on the server-side application.

Use them for responsibilities like:

• Media upload handling
• Authentication providers (e.g., NextAuth integration)
• Email sending
• Other Node.js integrations requiring credentials or server APIs

Conclusion

WP-Next brings the familiar power of WordPress into a Next.js + TypeScript world, giving developers a modern, headless CMS dashboard without the need to work in PHP. With support for posts, pages, media, users, revisions, and even multi-site networks, it provides a solid foundation for building custom admin experiences.

If you’d like to explore further:

• ⭐ Star the repo on GitHub: https://github.com/rnaga/wp-next
• 📖 View Full Documentation

Give the quick demo a try, experiment with hooks, and see how WP-Next can fit into your workflow. This is just the beginning — the project will continue to evolve, and community feedback will help shape its future.