https://github.com/gluestack/next-wordpress-plugins
⚠️ Experimental ⚠️ : Bring WordPress-like plugin system to Next.js
https://github.com/gluestack/next-wordpress-plugins
nextjs plugin-system wordpress
Last synced: 7 months ago
JSON representation
⚠️ Experimental ⚠️ : Bring WordPress-like plugin system to Next.js
- Host: GitHub
- URL: https://github.com/gluestack/next-wordpress-plugins
- Owner: gluestack
- Created: 2023-01-16T13:21:19.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-03T10:11:08.000Z (about 2 years ago)
- Last Synced: 2025-03-29T20:51:11.173Z (7 months ago)
- Topics: nextjs, plugin-system, wordpress
- Language: TypeScript
- Homepage:
- Size: 1.85 MB
- Stars: 35
- Watchers: 7
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
[](https://www.loom.com/share/5354c3e306cb41ec92daa4b00130c5bd "Next.js WordPress-like Plugin System")
## The checklist (from WordPress)
- [x] File-system based
- [ ] Persistant Store per plugin
- [x] Register Components
- [x] 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:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.