diff --git a/NEXTJS_APP_ROUTER_INTEGRATION.md b/NEXTJS_APP_ROUTER_INTEGRATION.md
new file mode 100644
index 00000000..32be7bc9
--- /dev/null
+++ b/NEXTJS_APP_ROUTER_INTEGRATION.md
@@ -0,0 +1,344 @@
+# Contribution Summary
+
+### Contributor: Meet Bhimani
+
+#### Date: 30-10-2024
+
+---
+
+## Overview
+
+I have integrated support for the Next.js app router (Next.js 14) into the project, improving compatibility and functionality.
+
+## Issues Addressed
+
+### 1. Compatibility Issue
+
+- **Description:** The previous implementation relied on `NextApiRequest` and `NextApiResponse`, which are incompatible with the new app router.
+- **Solution:** Updated the handler functions to utilize `NextRequest` and `NextResponse` in the route handlers, ensuring compatibility with the app router.
+
+### 2. Error Related to the `fs` Module
+
+- **Description:** There were intermittent issues with the `fs` module not being found, stemming from the way the `ContentProvider` was wrapped.
+- **Solution:** Instead of directly exporting the `ContentProvider` from `page.tsx`, I modified the export structure as follows:
+
+#### Updated `app/page.tsx`
+
+```javascript
+import ContentProviderApp from './components/editor'
+import { getStaticProps } from 'destack/build/server'
+
+export default async function Page() {
+ const props = await getStaticProps().then((d) => d.props)
+
+ return (
+
+
+
+ )
+}
+```
+
+#### Updated app/components/editor.ts
+
+```javascript
+'use client'
+
+import { ContentProvider } from 'destack'
+export default ContentProvider
+```
+
+## Changes required in server to support app router
+
+1. file: `lib/server/api/handle.ts`
+
+- Made exports for the following functions: `getPackagePath`, `fs`, and `path`.
+
+- Update the `getPackagePath` function to include an RSC check for requests from the route handler.
+
+```javascript
+const getPackagePath = () => {
+ const pathCurrent = path.dirname(require.resolve('destack/package.json'))
+ if (pathCurrent?.startsWith('(api)') || pathCurrent.startsWith('(rsc)')) {
+ return path.join(process.cwd() as string, '..', pathCurrent as string)
+ } else {
+ return pathCurrent as string
+ }
+}
+```
+
+2. file: `lib/server/index.ts`
+
+- Added the following exports
+
+```javascript
+export { loadAllData } from './api/handle'
+export { getPackagePath } from './api/handle'
+export { fs } from './api/handle'
+export { path } from './api/handle'
+```
+
+3. file: `package.json`
+
+- added following in `workspaces`
+
+```javascript
+"./dev/nextjs-app-router",
+```
+
+- added following in `scripts`
+
+```javascript
+"start:next-app-router": "npm start -w dev/nextjs-app-router",
+"dev:next-app-router": "concurrently -k \"npm run dev -w lib\" \"npm run wait:browser && npm run dev -w dev/nextjs-app-router\"",
+"build:next-app-router": "npm run build -w lib && npm run build -w dev/nextjs-app-router",
+```
+
+## Steps to Integrate in Next.js App Router Project (for Development in this repo)
+
+- Create a New Next.js Project named `nextjs-app-router`
+
+1. add `destack` dependency in `package.json`:
+
+```javascript
+"dependencies": {
+ "react": "^18",
+ "react-dom": "^18",
+ "next": "14.2.7",
+ "destack": "file:../../lib/"
+}
+```
+
+2. Add the following code in `app/page.tsx`:
+
+```javascript
+import ContentProviderApp from './components/editor'
+import { getStaticProps } from 'destack/build/server'
+
+export default async function Page() {
+ const props = await getStaticProps().then((d) => d.props)
+
+ return (
+
+
+
+ )
+}
+```
+
+3. Create `app/components/editor.ts` and add the following code:
+
+```javascript
+'use client'
+
+import { ContentProvider } from 'destack'
+export default ContentProvider
+```
+
+4. Create `app/api/builder/handle/route.ts` and add following code:
+
+```javascript
+import { getPackagePath, fs, path, loadData, updateData, uploadFiles } from 'destack/build/server'
+import { NextRequest, NextResponse } from 'next/server'
+
+// Helper function to extract query parameters from the request URL
+function getQueryParams(req: NextRequest) {
+ const url = new URL(req.url)
+ const queryParams = Object.fromEntries(url.searchParams.entries())
+ return queryParams
+}
+
+// Handle GET request with appropriate content types for 'theme', 'asset', and default cases
+export async function GET(req: NextRequest) {
+ try {
+ const queryParams = getQueryParams(req)
+ const result = await handleEditorNew(req, { query: queryParams })
+
+ // Handle 'theme' type requests, returning JSON
+ if (queryParams.type == 'theme') {
+ const responseBody = await result.clone().json()
+ return NextResponse.json(responseBody)
+ }
+
+ // Handle 'asset' type requests, returning binary data (for preview images)
+ if (queryParams.type === 'asset') {
+ const arrayBuffer = await result.arrayBuffer()
+ return new NextResponse(arrayBuffer, {
+ status: 200,
+ headers: { 'Content-Type': 'image/png' },
+ })
+ }
+
+ // Default response, returning JSON
+ const response = await result.json()
+ return new NextResponse(response, {
+ status: 200,
+ headers: { 'Content-Type': 'application/json' },
+ })
+ } catch (error) {
+ console.error('Error handling GET request:', error)
+ return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
+ status: 500,
+ headers: { 'Content-Type': 'application/json' },
+ })
+ }
+}
+
+// Handle POST requests with JSON or file uploads based on content type
+export async function POST(req: NextRequest) {
+ try {
+ const queryParams = getQueryParams(req)
+
+ const result = await handleEditorNew(req, { query: queryParams })
+
+ // Handle 'theme' type requests, returning JSON
+ if (queryParams.type == 'theme') {
+ const responseBody = await result.clone().json()
+ return NextResponse.json(responseBody)
+ }
+
+ return NextResponse.json(result)
+ } catch (error) {
+ console.error('Error handling POST request:', error)
+ return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
+ status: 500,
+ headers: { 'Content-Type': 'application/json' },
+ })
+ }
+}
+
+// Handle data-related operations: Load or update data based on request method
+async function handleDataNew(req: NextRequest) {
+ try {
+ const queryParams = getQueryParams(req)
+
+ if (req.method === 'GET') {
+ // Load data based on path and extension, defaulting to 'html'
+ const data = await loadData(queryParams.path, queryParams.ext || 'html')
+ return NextResponse.json(data)
+ } else if (req.method === 'POST') {
+ const contentType = req.headers.get('content-type')
+ const isMultiPart = contentType?.startsWith('multipart/form-data')
+
+ // Handle regular JSON data updates
+ if (!isMultiPart) {
+ const body = req.body
+ await updateData(queryParams.path, queryParams.ext || 'html', body)
+ return NextResponse.json({})
+ }
+
+ // Handle file uploads for multipart/form-data
+ const urls = await uploadFiles(req)
+ return NextResponse.json(urls)
+ }
+
+ return NextResponse.json({ error: 'Method Not Allowed' }, { status: 405 })
+ } catch (error) {
+ console.error('Error handling data in handleDataNew:', error)
+ return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+ }
+}
+
+// Handle asset requests (i.e. image files)
+async function handleAssetNew(req: NextRequest) {
+ try {
+ if (req.method === 'GET') {
+ const queryParams = getQueryParams(req)
+ const assetPath = path.join(getPackagePath(), queryParams.path)
+ const data = await fs.promises.readFile(assetPath)
+
+ return new NextResponse(data, {
+ headers: {
+ 'Content-Type': 'image/png',
+ 'Content-Length': data.length.toString(),
+ },
+ })
+ }
+ return NextResponse.json({ error: 'Method Not Allowed' }, { status: 405 })
+ } catch (error) {
+ console.error('Error handling asset in handleAssetNew:', error)
+ return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+ }
+}
+
+// Handle theme requests, loading components for a specific theme
+async function handleThemeNew(req: NextRequest) {
+ try {
+ if (req.method === 'GET') {
+ const queryParams = getQueryParams(req)
+ const themeName = queryParams.name
+ const folderPath = path.join(getPackagePath(), 'themes', themeName)
+
+ // Load components from the theme folder (excluding index.ts and hidden files)
+ const componentNames = await fs.promises
+ .readdir(folderPath)
+ .then((f: any[]) => f.filter((c) => c !== 'index.ts' && !c.startsWith('.')))
+
+ // Read each component's source code
+ const componentsP = componentNames.map(async (c: any) => {
+ const assetPath = path.join(folderPath, c, 'index.html')
+ const source = await fs.promises.readFile(assetPath, 'utf-8')
+ return { source, folder: c }
+ })
+ const components = await Promise.all(componentsP)
+ return NextResponse.json(components)
+ }
+ return NextResponse.json({ error: 'Not allowed' }, { status: 405 })
+ } catch (error) {
+ console.error('Error handling theme in handleThemeNew:', error)
+ return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+ }
+}
+
+// Main handler that delegates requests to specific handlers based on type
+async function handleEditorNew(req: NextRequest, { query }: { query: any }) {
+ try {
+ // Delegate based on query type: 'data', 'asset', or 'theme'
+ if (query.type === 'data') {
+ return handleDataNew(req)
+ } else if (query.type === 'asset') {
+ return handleAssetNew(req)
+ } else if (query.type === 'theme') {
+ return handleThemeNew(req)
+ }
+ return NextResponse.json({ error: 'Invalid Type' }, { status: 400 })
+ } catch (error) {
+ console.error('Error handling editor request:', error)
+ return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+ }
+}
+```
+
+5. Create one directory and file `nextjs-app-router/data/default.html`
+
+## Other Code Improvements:
+
+#### have made several improvements in code as follows
+
+- Added catch blocks inside `lib/client/vanilla/editor.tsx` where necessary.
+- Improved conditions inside `useEffect` in `lib/client/vanilla/index.tsx`.
+
+## Additional Benefits
+
+- **Flexible Routing:** You can create/add a builder on any path other than `/`.
+ - **Step 1:** Create a folder inside `app` and name it according to the desired path.
+ - **Step 2:** Paste the same content you added in `app/page.tsx` into this new folder.
+
+## Conclusion
+
+These contributions significantly enhance the project by:
+
+- Ensuring compatibility with the Next.js app router(v14).
+- Improving error handling.
+- Allowing greater flexibility in routing.
+
+## Acknowledgements
+
+- Special thanks to [@mihir-kanzariya](https://github.com/mihir-kanzariya) for raising the issue that led me to implement this solution.
+
+## Contact Information
+
+Feel free to reach out if you need any assistance:
+
+- **Email:** [meet.bhimani@bacancy.com](mailto:meet.bhimani@bacancy.com)
+- **GitHub:** [meet-bhimani](https://github.com/meet-bhimani)
diff --git a/dev/nextjs-app-router/.eslintrc.json b/dev/nextjs-app-router/.eslintrc.json
new file mode 100644
index 00000000..bffb357a
--- /dev/null
+++ b/dev/nextjs-app-router/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+ "extends": "next/core-web-vitals"
+}
diff --git a/dev/nextjs-app-router/.gitignore b/dev/nextjs-app-router/.gitignore
new file mode 100644
index 00000000..fd3dbb57
--- /dev/null
+++ b/dev/nextjs-app-router/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/dev/nextjs-app-router/README.md b/dev/nextjs-app-router/README.md
new file mode 100644
index 00000000..c4033664
--- /dev/null
+++ b/dev/nextjs-app-router/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/dev/nextjs-app-router/app/api/builder/handle/route.ts b/dev/nextjs-app-router/app/api/builder/handle/route.ts
new file mode 100644
index 00000000..35b2f95f
--- /dev/null
+++ b/dev/nextjs-app-router/app/api/builder/handle/route.ts
@@ -0,0 +1,169 @@
+import { getPackagePath, fs, path, loadData, updateData, uploadFiles } from 'destack/build/server'
+import { NextRequest, NextResponse } from 'next/server'
+
+// Helper function to extract query parameters from the request URL
+function getQueryParams(req: NextRequest) {
+ const url = new URL(req.url)
+ const queryParams = Object.fromEntries(url.searchParams.entries())
+ return queryParams
+}
+
+// Handle GET request with appropriate content types for 'theme', 'asset', and default cases
+export async function GET(req: NextRequest) {
+ try {
+ const queryParams = getQueryParams(req)
+ const result = await handleEditorNew(req, { query: queryParams })
+
+ // Handle 'theme' type requests, returning JSON
+ if (queryParams.type == 'theme') {
+ const responseBody = await result.clone().json()
+ return NextResponse.json(responseBody)
+ }
+
+ // Handle 'asset' type requests, returning binary data (for preview images)
+ if (queryParams.type === 'asset') {
+ const arrayBuffer = await result.arrayBuffer()
+ return new NextResponse(arrayBuffer, {
+ status: 200,
+ headers: { 'Content-Type': 'image/png' },
+ })
+ }
+
+ // Default response, returning JSON
+ const response = await result.json()
+ return new NextResponse(response, {
+ status: 200,
+ headers: { 'Content-Type': 'application/json' },
+ })
+ } catch (error) {
+ console.error('Error handling GET request:', error)
+ return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
+ status: 500,
+ headers: { 'Content-Type': 'application/json' },
+ })
+ }
+}
+
+// Handle POST requests with JSON or file uploads based on content type
+export async function POST(req: NextRequest) {
+ try {
+ const queryParams = getQueryParams(req)
+
+ const result = await handleEditorNew(req, { query: queryParams })
+
+ // Handle 'theme' type requests, returning JSON
+ if (queryParams.type == 'theme') {
+ const responseBody = await result.clone().json()
+ return NextResponse.json(responseBody)
+ }
+
+ return NextResponse.json(result)
+ } catch (error) {
+ console.error('Error handling POST request:', error)
+ return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
+ status: 500,
+ headers: { 'Content-Type': 'application/json' },
+ })
+ }
+}
+
+// Handle data-related operations: Load or update data based on request method
+async function handleDataNew(req: NextRequest) {
+ try {
+ const queryParams = getQueryParams(req)
+
+ if (req.method === 'GET') {
+ // Load data based on path and extension, defaulting to 'html'
+ const data = await loadData(queryParams.path, queryParams.ext || 'html')
+ return NextResponse.json(data)
+ } else if (req.method === 'POST') {
+ const contentType = req.headers.get('content-type')
+ const isMultiPart = contentType?.startsWith('multipart/form-data')
+
+ // Handle regular JSON data updates
+ if (!isMultiPart) {
+ const body = req.body
+ await updateData(queryParams.path, queryParams.ext || 'html', body)
+ return NextResponse.json({})
+ }
+
+ // Handle file uploads for multipart/form-data
+ const urls = await uploadFiles(req)
+ return NextResponse.json(urls)
+ }
+
+ return NextResponse.json({ error: 'Method Not Allowed' }, { status: 405 })
+ } catch (error) {
+ console.error('Error handling data in handleDataNew:', error)
+ return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+ }
+}
+
+// Handle asset requests (i.e. image files)
+async function handleAssetNew(req: NextRequest) {
+ try {
+ if (req.method === 'GET') {
+ const queryParams = getQueryParams(req)
+ const assetPath = path.join(getPackagePath(), queryParams.path)
+ const data = await fs.promises.readFile(assetPath)
+
+ return new NextResponse(data, {
+ headers: {
+ 'Content-Type': 'image/png',
+ 'Content-Length': data.length.toString(),
+ },
+ })
+ }
+ return NextResponse.json({ error: 'Method Not Allowed' }, { status: 405 })
+ } catch (error) {
+ console.error('Error handling asset in handleAssetNew:', error)
+ return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+ }
+}
+
+// Handle theme requests, loading components for a specific theme
+async function handleThemeNew(req: NextRequest) {
+ try {
+ if (req.method === 'GET') {
+ const queryParams = getQueryParams(req)
+ const themeName = queryParams.name
+ const folderPath = path.join(getPackagePath(), 'themes', themeName)
+
+ // Load components from the theme folder (excluding index.ts and hidden files)
+ const componentNames = await fs.promises
+ .readdir(folderPath)
+ .then((f: any[]) => f.filter((c) => c !== 'index.ts' && !c.startsWith('.')))
+
+ // Read each component's source code
+ const componentsP = componentNames.map(async (c: any) => {
+ const assetPath = path.join(folderPath, c, 'index.html')
+ const source = await fs.promises.readFile(assetPath, 'utf-8')
+ return { source, folder: c }
+ })
+ const components = await Promise.all(componentsP)
+ return NextResponse.json(components)
+ }
+ return NextResponse.json({ error: 'Not allowed' }, { status: 405 })
+ } catch (error) {
+ console.error('Error handling theme in handleThemeNew:', error)
+ return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+ }
+}
+
+// Main handler that delegates requests to specific handlers based on type
+async function handleEditorNew(req: NextRequest, { query }: { query: any }) {
+ try {
+ // Delegate based on query type: 'data', 'asset', or 'theme'
+ if (query.type === 'data') {
+ return handleDataNew(req)
+ } else if (query.type === 'asset') {
+ return handleAssetNew(req)
+ } else if (query.type === 'theme') {
+ return handleThemeNew(req)
+ }
+ return NextResponse.json({ error: 'Invalid Type' }, { status: 400 })
+ } catch (error) {
+ console.error('Error handling editor request:', error)
+ return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
+ }
+}
diff --git a/dev/nextjs-app-router/app/components/editor.ts b/dev/nextjs-app-router/app/components/editor.ts
new file mode 100644
index 00000000..2e231388
--- /dev/null
+++ b/dev/nextjs-app-router/app/components/editor.ts
@@ -0,0 +1,4 @@
+'use client'
+
+import { ContentProvider } from 'destack'
+export default ContentProvider
diff --git a/dev/nextjs-app-router/app/favicon.ico b/dev/nextjs-app-router/app/favicon.ico
new file mode 100644
index 00000000..718d6fea
Binary files /dev/null and b/dev/nextjs-app-router/app/favicon.ico differ
diff --git a/dev/nextjs-app-router/app/globals.css b/dev/nextjs-app-router/app/globals.css
new file mode 100644
index 00000000..875c01e8
--- /dev/null
+++ b/dev/nextjs-app-router/app/globals.css
@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ --foreground-rgb: 0, 0, 0;
+ --background-start-rgb: 214, 219, 220;
+ --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
+ }
+}
+
+body {
+ color: rgb(var(--foreground-rgb));
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ rgb(var(--background-end-rgb))
+ )
+ rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+ .text-balance {
+ text-wrap: balance;
+ }
+}
diff --git a/dev/nextjs-app-router/app/layout.tsx b/dev/nextjs-app-router/app/layout.tsx
new file mode 100644
index 00000000..3314e478
--- /dev/null
+++ b/dev/nextjs-app-router/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+ title: "Create Next App",
+ description: "Generated by create next app",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/dev/nextjs-app-router/app/page.tsx b/dev/nextjs-app-router/app/page.tsx
new file mode 100644
index 00000000..dbdb4281
--- /dev/null
+++ b/dev/nextjs-app-router/app/page.tsx
@@ -0,0 +1,12 @@
+import ContentProviderApp from './components/editor'
+import { getStaticProps } from 'destack/build/server'
+
+export default async function Page() {
+ const props = await getStaticProps().then((d) => d.props)
+
+ return (
+
+ At the same time, the fact that we are wholly owned and totally independent from manufacturer and other group
+ control gives you confidence that we will only recommend what is right for you.
+
+
+
+ 0151 475 4450
+
+ 282 Kevin Brook, Imogeneborough, CA 58517
+