The document discusses building a plugin system for Next.js applications inspired by WordPress plugins. It outlines the key aspects of a WordPress plugin like file-based structure, component and route registration, and stores. It then demonstrates building a simple HelloWorld plugin and describes how plugins can register components, routes, and other aspects. Various example use cases for plugins like authentication, analytics, newsletters, and chatbots are provided. The goal is to create an ecosystem where features can be easily added to Next.js applications through plugins rather than separate packages.

1. Hey

2. Sanket Sahu

3. Sanket Sahu

4. Sanket Sahu

5. Sanket Sahu

7. WordPress-like plugins,
but for Next.js

8. Building a Caravan
from scratch in India
🚌

9. WordPress-like plugins,
but for Next.js

13. Story 📖

14. Kabir
🧍

15. Kabir wants to build a login system
in his Next.js website
🧍

16. Let’s build one from scratch!
🧍

17. Create login page
Form Validation
Form Submission
Login API Endpoint
Authentication Middleware
Create a home page
Logout API Endpoint
Logout functionality
Routing
Middleware Configuration
Cookie Management

18. Create login page
Form Validation
Form Submission
Login API Endpoint
Authentication Middleware
Create a home page
Logout API Endpoint
Logout functionality
Routing
Middleware Configuration
Cookie Management

19. Create login page
Form Validation
Form Submission
Login API Endpoint
Authentication Middleware
Create a home page
Logout API Endpoint
Logout functionality
Routing
Middleware Configuration
Cookie Management

20. Create login page
Form Validation
Form Submission
Login API Endpoint
Authentication Middleware
Create a home page
Logout API Endpoint
Logout functionality
Routing
Middleware Configuration
Cookie Management

21. Create login page
Form Validation
Form Submission
Login API Endpoint
Authentication
Middleware
Create a home page
Logout API Endpoint
Logout functionality
Routing
Middleware Configuration
Cookie Management

22. Create login page
Form Validation
Form Submission
Login API Endpoint
Create a home page
Authentication Middleware
Logout API Endpoint
Logout functionality
Routing
Middleware Configuration
Cookie Management

23. Create login page
Form Validation
Form Submission
Login API Endpoint
Create a home page
Authentication Middleware
Logout API Endpoint
Logout functionality
Routing
Middleware Configuration
Cookie Management

24. Create login page
Form Validation
Form Submission
Login API Endpoint
Create a home page
Authentication Middleware
Logout API Endpoint
Logout functionality
Routing
Middleware Configuration
Cookie Management

25. Create login page
Form Validation
Form Submission
Login API Endpoint
Create a home page
Authentication Middleware
Logout API Endpoint
Logout functionality
Routing
Middleware Configuration
Cookie Management

26. Create login page
Form Validation
Form Submission
Login API Endpoint
Create a home page
Authentication Middleware
Logout API Endpoint
Logout functionality
Routing
Middleware
Configuration
Cookie Management

27. Create login page
Form Validation
Form Submission
Login API Endpoint
Create a home page
Authentication Middleware
Logout API Endpoint
Logout functionality
Routing
Middleware Configuration
Cookie Management

28. Create login page
Form Validation
Form Submission
Login API Endpoint
Create a home page
Authentication Middleware
Logout API Endpoint
Logout functionality
Routing
Middleware Configuration
Cookie Management

29. How about using a library instead?
🧍

34. • Next, Kabir wants to see how many users are visiting his website.
🧍 Analytics
• He looks at another package.
• Goes back again to integrate this in his website

35. 🧍
• Next, Kabir wants to connect with his users and wants to setup a
Newsletter.
Newsletter
• He again goes through the same process.
• All he finds is packages that has to be integrated some how.

36. Tired kabir
• Kabir thinks while he can use packages, he still has to do a lot of
integration work beyond the core business logic.

37. Feel like Kabir?
🧍

38. Tell me you are a Kabir!
🧍

39. Wouldn’t it be amazing if we could install these features
in our React or Next.js apps and then make changes?

40. Flashback 💥

41. 2003

42. Magic!

44. 😎

45. WordPress

46. What are WordPress Plugins?

49. Power of the WordPress Ecosystem
• Over 55,000
+
plugins available in the official repository.
• Provides solutions ranging from simple tweaks to comprehensive
transformations.

50. Famous Plugins and Their Features
• Yoast SEO
• WooCommerce
• Akismet Anti-Spam

51. Kabir thinks…
Why don’t we have it with modern framework?

52. Packages vs Plugins
• Packages are bundles of code, while plugins allow you to
add features.
• While packages are meant for developers, plugins can give
us end-user functionalities.

53. my-nextjs-app/
|-- pages/
| |-- login.js
| |-- dashboard.js
| |-- about.js
| |-- index.js
|
|-- components/
| |-- LoginForm.js
| |-- DashboardContent.js
| |-- Header.js
| |-- Footer.js
|
|-- api/
| |-- login.js
| |-- logout.js
| |-- userInfo.js
|
|-- middleware/
| |-- auth.ts
| |-- commonMiddleware.ts
|
|-- store/
| |-- authSlice.js
| |-- userSlice.js
|
|-- utils/
|-- helpers.js

54. my-nextjs-app/
|-- pages/
| |-- dashboard.js
| |-- about.js
| |-- index.js
|
|-- components/
| |-- DashboardContent.js
| |-- Header.js
| |-- Footer.js
|
|-- api/
| |-- userInfo.js
|
|-- middleware/
| |-- commonMiddleware.ts
|
|-- store/
| |-- userSlice.js
|
|-- utils/
| |-- helpers.js
|
|-- plugins/
|-- auth/
|-- pages/
| |-- login.js
|
|-- components/
| |-- LoginForm.js
|
|-- api/
| |-- login.js
| |-- logout.js
|
|-- middleware/
| |-- auth.ts
|
|-- store/
|-- authSlice.js

55. The Experiment
• Goal: File-based plugin system inspired by WordPress
• Enable visual and non-visual features per plugin

56. The checklist (from WordPress)
• File-system based
• Persistent Store per plugin
• Register Components
• Register Routes
• Register Functions
• Event System across plugins
• Dependency management

57. • File-system based
• Persistent Store per plugin
• Register Components
• Register Routes
• Register Functions
• Event System across plugins
• Dependency management
The checklist (from WordPress)

58. Unmaintained

60. Plugin
System
Architecture
Plugin
System

61. Plugin
System
Architecture
Plugin A
Plugin
System
Plugin B
Plugin C
Plugin D

62. Plugin
System
Architecture
Stores
Plugin A
Component
Registry
Plugin
System
Plugin B
Plugin C
Plugin D

63. Plugin
System
Architecture
Stores
Plugin A
Component
Registry
Route Registry
Plugin
System
Plugin B
Plugin C
Plugin D

64. Plugin
System
Architecture
Stores
Plugin A
Root Provider
Component
Registry
Route Registry
Plugin
System
Next.js
Plugin B
Plugin C
Plugin D

65. Plugin
System
Architecture
Stores
[..alt.tsx]
Plugin A
Root Provider
Component
Registry
Route Registry
Plugin
System
Next.js
Plugin B
Plugin C
Plugin D

66. Plugin
System
Architecture
Stores
[..alt.tsx]
Plugin A
Root Provider Middleware.ts
Component
Registry
Route Registry
Plugin
System
Next.js
Plugin B
Plugin C
Plugin D

67. plugins/index.ts
const plugins = [
];
export default plugins;

68. plugins/index.ts
import AuthPlugin from "./auth";
const plugins = [
AuthPlugin
];
export default plugins;

69. plugins/index.ts
import AuthPlugin from "./auth";
import AiChatbotPlugin from "./ai-chatbot";
const plugins = [
AuthPlugin,
AiChatbotPlugin,
];
export default plugins;

70. Building the plugin container

75. Integrating it with Next.js

76. bootstrap.ts

77. bootstrap.ts

78. bootstrap.ts

79. bootstrap.ts

80. _app.tsx

81. _app.tsx

82. _app.tsx

83. Organizing the plugins
bootstrap.ts
src/
plugins/
plugin-a/
plugin-b/
pages/

84. Demo: Auth plugin

85. Writing the first plugin

86. HelloWorld plugin

87. HelloWorld plugin
plugins/hello-world/index.ts

88. import { PluginSystem, IPlugin } from "@/src/PluginSystem";
class HelloWorldPlugin implements IPlugin {
}
export default HelloWorldPlugin;
HelloWorld plugin
plugins/hello-world/index.ts

89. import { PluginSystem, IPlugin } from "@/src/PluginSystem";
class HelloWorldPlugin implements IPlugin {
name = "hello-world-plugin";
version = "0.0.1";
}
export default HelloWorldPlugin;
HelloWorld plugin

90. import { PluginSystem, IPlugin } from "@/src/PluginSystem";
class HelloWorldPlugin implements IPlugin {
name = "hello-world-plugin";
version = "0.0.1";
pluginSystem: PluginSystem;
}
export default HelloWorldPlugin;
HelloWorld plugin

91. import { PluginSystem, IPlugin } from "@/src/PluginSystem";
class HelloWorldPlugin implements IPlugin {
name = "hello-world-plugin";
version = "0.0.1";
pluginSystem: PluginSystem;
constructor(pluginSystem: PluginSystem) {
this.pluginSystem = pluginSystem;
}
}
export default HelloWorldPlugin;
HelloWorld plugin

92. import { PluginSystem, IPlugin } from "@/src/PluginSystem";
class HelloWorldPlugin implements IPlugin {
name = "hello-world-plugin";
version = "0.0.1";
pluginSystem: PluginSystem;
constructor(pluginSystem: PluginSystem) {
this.pluginSystem = pluginSystem;
}
async boot() {
if (typeof window !== "undefined") {
alert("Hello world!");
}
}
}
export default HelloWorldPlugin;
HelloWorld plugin

93. HelloWorld plugin

94. Register Routes

95. Register Routes

96. Register Routes

97. Register Routes

99. RouteStore

100. RouteStore

103. Adding the […all].tsx file

104. pages/[…all].tsx

105. Register Components

106. Register Components

107. Register Components

108. Register Components

109. Register Components

110. Register Components

111. Using the Registered Components

112. Using the Registered Components

113. ComponentStore

114. ComponentStore

115. Social Share plugin

116. Confetti plugin

117. Confetti plugin

118. AI chatbot plugin

119. AI chatbot plugin

120. Auth plugin

126. Demo

127. https://github.com/gluestack/next-wordpress-plugins

128. Takeaway #1
Plugins enable “colocation by feature”

129. Takeaway #2
Code abstraction shouldn’t stop at packages.

130. Takeaway (bonus)
Copy paste is the future.

131. Learn from each other ❤

132. Build great things 🔥

133. /sanketsahu