gluestack / next-wordpress-plugins

⚠️ Experimental ⚠️ : Bring WordPress-like plugin system to Next.js

Next.js WordPress-like Plugin System 🚨 (Experimental)

⚠️⚠ This is an experimental project, a proof-of-concept to bring WordPress like, file-based plugins to Next.js. ⚠⚠️

Why?

Taking inspirations from the WordPress Plugin system. Wouldn't it be easy if we could install plugins for Google Analytics, Social Login, E-commerce (maybe) and customize as you need!

Demo

The checklist (from WordPress)

• File-system based
• Persistant Store per plugin
• Register Components
• Register Routes
• Register Functions
• Event System across plugins
• Dependency management

The state of this experiment

This is a very early experiment that has two plugins

• ShareButtonPlugin: Registers a ShareButton component that can be used anywhere in the app.

• ComingSoonPlugin: Registers a route /coming-soon using the Dynamic Routes of Next.js.

Folder structure

bootstrap.ts
src/
plugins/
    share-button/
    coming-soon-page/
pages/
    [...all].tsx

Note:
- bootstrap.ts is used to initialize the plugin-system
- src folder contains the source code of the plugin-system
- plugins folder contains the individual plugin folders
- pages folder contains the dynamically rendered routes registered by the plugins

Running the dev environment

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.