├── README.md ├── .prettierrc ├── pnpm-workspace.yaml ├── packages └── next-sandbox │ ├── src │ ├── index.ts │ ├── icons │ │ ├── play-icon.tsx │ │ ├── loader-icon.tsx │ │ └── log-icon.tsx │ ├── sandbox-server.tsx │ ├── with-sandbox.tsx │ ├── highlighted-json.tsx │ ├── sandbox-context.tsx │ ├── log-drawer.tsx │ ├── style.css │ └── sandbox-ui.tsx │ ├── tsconfig.json │ ├── README.md │ └── package.json ├── apps ├── docs │ ├── .eslintrc.json │ ├── app │ │ ├── favicon.ico │ │ ├── global.css │ │ ├── api │ │ │ └── search │ │ │ │ └── route.ts │ │ ├── (home) │ │ │ ├── sandbox │ │ │ │ ├── layout.tsx │ │ │ │ ├── page.tsx │ │ │ │ └── action.ts │ │ │ ├── page.tsx │ │ │ └── layout.tsx │ │ ├── docs │ │ │ ├── layout.tsx │ │ │ └── [[...slug]] │ │ │ │ └── page.tsx │ │ ├── docs-og │ │ │ └── [...slug] │ │ │ │ └── route.tsx │ │ ├── layout.config.tsx │ │ └── layout.tsx │ ├── public │ │ ├── banner.png │ │ └── avatars │ │ │ ├── theo.png │ │ │ ├── dakdevs.png │ │ │ ├── bedesqui.png │ │ │ └── lermatroid.png │ ├── postcss.config.mjs │ ├── static │ │ ├── demo-screenshot-dark.png │ │ └── demo-screenshot-light.png │ ├── lib │ │ ├── source.ts │ │ └── metadata.ts │ ├── content │ │ └── docs │ │ │ ├── meta.json │ │ │ ├── enable.mdx │ │ │ ├── index.mdx │ │ │ ├── before-render.mdx │ │ │ └── functions.mdx │ ├── source.config.ts │ ├── .gitignore │ ├── next.config.mjs │ ├── README.md │ ├── tsconfig.json │ ├── package.json │ └── components │ │ ├── illustrations │ │ ├── arrow-down.tsx │ │ ├── arrow-right.tsx │ │ └── light.tsx │ │ ├── hero.tsx │ │ ├── feature.tsx │ │ ├── how.tsx │ │ └── tweets.tsx └── test │ ├── app │ ├── favicon.ico │ ├── page.tsx │ ├── globals.css │ ├── sandbox-action.ts │ └── layout.tsx │ ├── public │ ├── vercel.svg │ ├── window.svg │ ├── file.svg │ ├── globe.svg │ └── next.svg │ ├── next.config.ts │ ├── postcss.config.mjs │ ├── eslint.config.mjs │ ├── tailwind.config.ts │ ├── .gitignore │ ├── tsconfig.json │ ├── package.json │ └── README.md ├── .gitignore ├── .github └── dependabot.yml ├── .prettierignore ├── turbo.json ├── package.json └── LICENSE /README.md: -------------------------------------------------------------------------------- 1 | packages/next-sandbox/README.md -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "tabWidth": 2 4 | } 5 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'apps/*' 3 | - 'packages/*' 4 | -------------------------------------------------------------------------------- /packages/next-sandbox/src/index.ts: -------------------------------------------------------------------------------- 1 | export { withSandbox } from './with-sandbox'; 2 | -------------------------------------------------------------------------------- /apps/docs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # build 5 | dist 6 | 7 | # Turbo 8 | .turbo 9 | -------------------------------------------------------------------------------- /apps/docs/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1weiho/next-sandbox/HEAD/apps/docs/app/favicon.ico -------------------------------------------------------------------------------- /apps/test/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1weiho/next-sandbox/HEAD/apps/test/app/favicon.ico -------------------------------------------------------------------------------- /apps/docs/public/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1weiho/next-sandbox/HEAD/apps/docs/public/banner.png -------------------------------------------------------------------------------- /apps/docs/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | '@tailwindcss/postcss': {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /apps/docs/public/avatars/theo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1weiho/next-sandbox/HEAD/apps/docs/public/avatars/theo.png -------------------------------------------------------------------------------- /apps/docs/public/avatars/dakdevs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1weiho/next-sandbox/HEAD/apps/docs/public/avatars/dakdevs.png -------------------------------------------------------------------------------- /apps/docs/public/avatars/bedesqui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1weiho/next-sandbox/HEAD/apps/docs/public/avatars/bedesqui.png -------------------------------------------------------------------------------- /apps/docs/public/avatars/lermatroid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1weiho/next-sandbox/HEAD/apps/docs/public/avatars/lermatroid.png -------------------------------------------------------------------------------- /apps/docs/static/demo-screenshot-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1weiho/next-sandbox/HEAD/apps/docs/static/demo-screenshot-dark.png -------------------------------------------------------------------------------- /apps/docs/static/demo-screenshot-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1weiho/next-sandbox/HEAD/apps/docs/static/demo-screenshot-light.png -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | schedule: 6 | interval: "weekly" 7 | -------------------------------------------------------------------------------- /apps/test/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Build 2 | dist 3 | 4 | # Package 5 | pnpm-lock.yaml 6 | node_modules 7 | 8 | # Next.js 9 | .next 10 | 11 | # Turbo 12 | .turbo 13 | -------------------------------------------------------------------------------- /apps/test/next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from 'next'; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /apps/docs/app/global.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss'; 2 | @import 'fumadocs-ui/css/neutral.css'; 3 | @import 'fumadocs-ui/css/preset.css'; 4 | 5 | @source '../node_modules/fumadocs-ui/dist/**/*.js'; 6 | -------------------------------------------------------------------------------- /apps/test/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /apps/docs/app/api/search/route.ts: -------------------------------------------------------------------------------- 1 | import { source } from '@/lib/source'; 2 | import { createFromSource } from 'fumadocs-core/search/server'; 3 | 4 | export const { GET } = createFromSource(source); 5 | -------------------------------------------------------------------------------- /apps/docs/lib/source.ts: -------------------------------------------------------------------------------- 1 | import { docs } from '@/.source'; 2 | import { loader } from 'fumadocs-core/source'; 3 | 4 | export const source = loader({ 5 | baseUrl: '/docs', 6 | source: docs.toFumadocsSource(), 7 | }); 8 | -------------------------------------------------------------------------------- /packages/next-sandbox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react", 4 | "target": "ES2022", 5 | "module": "ESNext", 6 | "moduleResolution": "bundler" 7 | }, 8 | "include": ["src"] 9 | } 10 | -------------------------------------------------------------------------------- /apps/docs/app/(home)/sandbox/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from 'react'; 2 | 3 | export default function Layout({ children }: { children: ReactNode }) { 4 | return
{children}
; 5 | } 6 | -------------------------------------------------------------------------------- /apps/docs/lib/metadata.ts: -------------------------------------------------------------------------------- 1 | import { createMetadataImage } from 'fumadocs-core/server'; 2 | import { source } from './source'; 3 | 4 | export const metadataImage = createMetadataImage({ 5 | imageRoute: '/docs-og', 6 | source, 7 | }); 8 | -------------------------------------------------------------------------------- /apps/docs/content/docs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Framework", 3 | "description": "The docs framework", 4 | "icon": "Building2", 5 | "root": true, 6 | "pages": [ 7 | "---Introduction---", 8 | "index", 9 | "---Props---", 10 | "functions", 11 | "before-render", 12 | "enable" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turbo.build/schema.json", 3 | "ui": "tui", 4 | "tasks": { 5 | "build": { 6 | "dependsOn": ["^build"], 7 | "outputs": ["dist/**", ".next/**", "!.next/cache/**"] 8 | }, 9 | "dev": { 10 | "persistent": true, 11 | "cache": false 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-sandbox-monorepo", 3 | "private": true, 4 | "scripts": { 5 | "dev": "turbo dev", 6 | "format": "prettier --write .", 7 | "format:check": "prettier --check ." 8 | }, 9 | "devDependencies": { 10 | "prettier": "^3.5.3", 11 | "turbo": "^2.4.0" 12 | }, 13 | "packageManager": "pnpm@10.2.0" 14 | } 15 | -------------------------------------------------------------------------------- /apps/docs/source.config.ts: -------------------------------------------------------------------------------- 1 | import { remarkInstall } from 'fumadocs-docgen'; 2 | import { defineDocs, defineConfig } from 'fumadocs-mdx/config'; 3 | 4 | export const docs = defineDocs({ 5 | dir: 'content/docs', 6 | }); 7 | 8 | export default defineConfig({ 9 | mdxOptions: { 10 | // MDX options 11 | remarkPlugins: [remarkInstall], 12 | }, 13 | }); 14 | -------------------------------------------------------------------------------- /apps/test/app/page.tsx: -------------------------------------------------------------------------------- 1 | import { withSandbox } from 'next-sandbox'; 2 | import { getAllPosts, seedPosts } from './sandbox-action'; 3 | 4 | export default withSandbox({ 5 | functions: [ 6 | { 7 | name: 'Get All Posts', 8 | function: getAllPosts, 9 | }, 10 | { 11 | name: 'Seed Posts', 12 | function: seedPosts, 13 | }, 14 | ], 15 | }); 16 | -------------------------------------------------------------------------------- /apps/test/public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/test/public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/docs/.gitignore: -------------------------------------------------------------------------------- 1 | # deps 2 | /node_modules 3 | 4 | # generated content 5 | .contentlayer 6 | .content-collections 7 | .source 8 | 9 | # test & build 10 | /coverage 11 | /.next/ 12 | /out/ 13 | /build 14 | *.tsbuildinfo 15 | 16 | # misc 17 | .DS_Store 18 | *.pem 19 | /.pnp 20 | .pnp.js 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | # others 26 | .env*.local 27 | .vercel 28 | next-env.d.ts -------------------------------------------------------------------------------- /apps/docs/next.config.mjs: -------------------------------------------------------------------------------- 1 | import { createMDX } from 'fumadocs-mdx/next'; 2 | 3 | const withMDX = createMDX(); 4 | 5 | /** @type {import('next').NextConfig} */ 6 | const config = { 7 | reactStrictMode: true, 8 | images: { 9 | remotePatterns: [ 10 | { 11 | protocol: 'https', 12 | hostname: 'pbs.twimg.com', 13 | }, 14 | ], 15 | }, 16 | }; 17 | 18 | export default withMDX(config); 19 | -------------------------------------------------------------------------------- /apps/docs/app/docs/layout.tsx: -------------------------------------------------------------------------------- 1 | import { DocsLayout } from 'fumadocs-ui/layouts/docs'; 2 | import type { ReactNode } from 'react'; 3 | import { baseOptions } from '@/app/layout.config'; 4 | import { source } from '@/lib/source'; 5 | 6 | export default function Layout({ children }: { children: ReactNode }) { 7 | return ( 8 | 9 | {children} 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /apps/test/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --background: #ffffff; 7 | --foreground: #171717; 8 | } 9 | 10 | @media (prefers-color-scheme: dark) { 11 | :root { 12 | --background: #0a0a0a; 13 | --foreground: #ededed; 14 | } 15 | } 16 | 17 | body { 18 | color: var(--foreground); 19 | background: var(--background); 20 | font-family: Arial, Helvetica, sans-serif; 21 | } 22 | -------------------------------------------------------------------------------- /apps/test/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from 'path'; 2 | import { fileURLToPath } from 'url'; 3 | import { FlatCompat } from '@eslint/eslintrc'; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends('next/core-web-vitals', 'next/typescript'), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /apps/test/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from 'tailwindcss'; 2 | 3 | export default { 4 | content: [ 5 | './pages/**/*.{js,ts,jsx,tsx,mdx}', 6 | './components/**/*.{js,ts,jsx,tsx,mdx}', 7 | './app/**/*.{js,ts,jsx,tsx,mdx}', 8 | ], 9 | theme: { 10 | extend: { 11 | colors: { 12 | background: 'var(--background)', 13 | foreground: 'var(--foreground)', 14 | }, 15 | }, 16 | }, 17 | plugins: [], 18 | } satisfies Config; 19 | -------------------------------------------------------------------------------- /apps/docs/app/(home)/sandbox/page.tsx: -------------------------------------------------------------------------------- 1 | import { withSandbox } from 'next-sandbox'; 2 | import { getAllPosts, seedPosts, throwError } from './action'; 3 | 4 | export default withSandbox({ 5 | functions: [ 6 | { 7 | name: 'Get All Posts', 8 | function: getAllPosts, 9 | }, 10 | { 11 | name: 'Seed Posts', 12 | function: seedPosts, 13 | }, 14 | { 15 | name: 'Test Throw Error', 16 | function: throwError, 17 | }, 18 | ], 19 | }); 20 | -------------------------------------------------------------------------------- /apps/docs/app/docs-og/[...slug]/route.tsx: -------------------------------------------------------------------------------- 1 | import { generateOGImage } from 'fumadocs-ui/og'; 2 | import { metadataImage } from '../../../lib/metadata'; 3 | 4 | export const GET = metadataImage.createAPI((page) => { 5 | return generateOGImage({ 6 | primaryTextColor: 'rgb(127, 187, 224)', 7 | title: page.data.title, 8 | description: page.data.description, 9 | site: 'Next Sandbox', 10 | }); 11 | }); 12 | 13 | export function generateStaticParams() { 14 | return metadataImage.generateParams(); 15 | } 16 | -------------------------------------------------------------------------------- /packages/next-sandbox/src/icons/play-icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | const PlayIcon = (props: React.SVGProps) => ( 4 | 15 | 16 | 17 | ); 18 | 19 | export default PlayIcon; 20 | -------------------------------------------------------------------------------- /apps/docs/app/(home)/page.tsx: -------------------------------------------------------------------------------- 1 | import Feature from '@/components/feature'; 2 | import Hero from '@/components/hero'; 3 | import How from '@/components/how'; 4 | import Light from '@/components/illustrations/light'; 5 | import Tweets from '@/components/tweets'; 6 | 7 | export default function HomePage() { 8 | return ( 9 |
10 | 11 | 12 | 13 | 14 | 15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /packages/next-sandbox/src/sandbox-server.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { SandboxUI } from './sandbox-ui'; 3 | 4 | interface SandboxServerProps { 5 | enable?: boolean; 6 | beforeRender?: () => Promise; 7 | } 8 | 9 | export async function SandboxServer({ 10 | enable, 11 | beforeRender, 12 | }: SandboxServerProps) { 13 | if (!enable) { 14 | const { notFound } = await import('next/navigation'); 15 | notFound(); 16 | } 17 | 18 | if (beforeRender) { 19 | await beforeRender(); 20 | } 21 | 22 | return ; 23 | } 24 | -------------------------------------------------------------------------------- /apps/docs/content/docs/enable.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: enable 3 | description: Enable or disable the sandbox route. 4 | --- 5 | 6 | ## Usage 7 | 8 | `enable` is a boolean prop to enable or disable the sandbox route. If you set it to `false`, it will call `notFound()` from `next/navigation` internally. A common use case is to check if the current environment is production or not. 9 | 10 | ```tsx 11 | import { withSandbox } from 'next-sandbox'; 12 | 13 | export default withSandbox({ 14 | enable: process.env.NODE_ENV !== 'production', // [!code ++] 15 | // ... 16 | }); 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/next-sandbox/src/icons/loader-icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | const LoaderIcon = (props: React.SVGProps) => ( 4 | 15 | 16 | 17 | ); 18 | 19 | export default LoaderIcon; 20 | -------------------------------------------------------------------------------- /apps/test/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /packages/next-sandbox/src/icons/log-icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | const LogIcon = (props: React.SVGProps) => ( 4 | 15 | 16 | 17 | 18 | ); 19 | 20 | export default LogIcon; 21 | -------------------------------------------------------------------------------- /apps/test/app/sandbox-action.ts: -------------------------------------------------------------------------------- 1 | 'use server'; 2 | 3 | interface Post { 4 | id: number; 5 | name: string; 6 | } 7 | 8 | const posts: Post[] = [ 9 | { 10 | id: 1, 11 | name: 'Hello World', 12 | }, 13 | ]; 14 | 15 | const sleep = (time = 3000) => 16 | new Promise((resolve) => setTimeout(resolve, time)); 17 | 18 | export const getAllPosts = async () => { 19 | 'use server'; 20 | 21 | return posts; 22 | }; 23 | 24 | export const seedPosts = async () => { 25 | await sleep(1000); 26 | 27 | // throw new Error('Failed to connect to the database.'); 28 | 29 | return { 30 | success: true, 31 | message: 'Seed 1000 posts to the database.', 32 | }; 33 | }; 34 | -------------------------------------------------------------------------------- /apps/docs/README.md: -------------------------------------------------------------------------------- 1 | # docs 2 | 3 | This is a Next.js application generated with 4 | [Create Fumadocs](https://github.com/fuma-nama/fumadocs). 5 | 6 | Run development server: 7 | 8 | ```bash 9 | npm run dev 10 | # or 11 | pnpm dev 12 | # or 13 | yarn dev 14 | ``` 15 | 16 | Open http://localhost:3000 with your browser to see the result. 17 | 18 | ## Learn More 19 | 20 | To learn more about Next.js and Fumadocs, take a look at the following 21 | resources: 22 | 23 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js 24 | features and API. 25 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 26 | - [Fumadocs](https://fumadocs.vercel.app) - learn about Fumadocs 27 | -------------------------------------------------------------------------------- /apps/test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /apps/test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev --turbopack", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "react": "^19.0.0", 13 | "react-dom": "^19.0.0", 14 | "next": "15.2.4" 15 | }, 16 | "devDependencies": { 17 | "typescript": "^5", 18 | "@types/node": "^20", 19 | "@types/react": "^19", 20 | "@types/react-dom": "^19", 21 | "postcss": "^8", 22 | "tailwindcss": "^3.4.1", 23 | "eslint": "^9", 24 | "eslint-config-next": "15.1.6", 25 | "@eslint/eslintrc": "^3", 26 | "next-sandbox": "workspace:*" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /apps/docs/app/(home)/sandbox/action.ts: -------------------------------------------------------------------------------- 1 | 'use server'; 2 | 3 | interface Post { 4 | id: number; 5 | name: string; 6 | } 7 | 8 | const posts: Post[] = [ 9 | { 10 | id: 1, 11 | name: 'Hello World', 12 | }, 13 | ]; 14 | 15 | const sleep = (time = 3000) => 16 | new Promise((resolve) => setTimeout(resolve, time)); 17 | 18 | export const getAllPosts = async () => { 19 | await sleep(200); 20 | 21 | return posts; 22 | }; 23 | 24 | export const seedPosts = async () => { 25 | await sleep(1000); 26 | 27 | return { 28 | success: true, 29 | message: 'Seed 1000 posts to the database.', 30 | }; 31 | }; 32 | 33 | export const throwError = async () => { 34 | await sleep(1000); 35 | 36 | throw new Error('Failed to connect to the database.'); 37 | }; 38 | -------------------------------------------------------------------------------- /packages/next-sandbox/src/with-sandbox.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { SandboxProvider } from './sandbox-context'; 3 | import { SandboxServer } from './sandbox-server'; 4 | 5 | export interface SandboxFunction { 6 | name: string; 7 | function: () => Promise; 8 | } 9 | 10 | export interface SandboxConfig { 11 | functions: SandboxFunction[]; 12 | enable?: boolean; 13 | beforeRender?: () => Promise; 14 | } 15 | 16 | export function withSandbox({ 17 | functions, 18 | enable = true, 19 | beforeRender, 20 | }: SandboxConfig) { 21 | return function SandboxWrapper() { 22 | return ( 23 | 24 | 25 | 26 | ); 27 | }; 28 | } 29 | -------------------------------------------------------------------------------- /apps/docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "target": "ESNext", 5 | "lib": ["dom", "dom.iterable", "esnext"], 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "strict": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "noEmit": true, 11 | "esModuleInterop": true, 12 | "module": "esnext", 13 | "moduleResolution": "bundler", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "jsx": "preserve", 17 | "incremental": true, 18 | "paths": { 19 | "@/.source": ["./.source/index.ts"], 20 | "@/*": ["./*"] 21 | }, 22 | "plugins": [ 23 | { 24 | "name": "next" 25 | } 26 | ] 27 | }, 28 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 29 | "exclude": ["node_modules"] 30 | } 31 | -------------------------------------------------------------------------------- /apps/test/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next'; 2 | import { Geist, Geist_Mono } from 'next/font/google'; 3 | import './globals.css'; 4 | 5 | const geistSans = Geist({ 6 | variable: '--font-geist-sans', 7 | subsets: ['latin'], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: '--font-geist-mono', 12 | subsets: ['latin'], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: 'Create Next App', 17 | description: 'Generated by create next app', 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /apps/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "build": "next build", 7 | "dev": "next dev", 8 | "start": "next start", 9 | "postinstall": "fumadocs-mdx" 10 | }, 11 | "dependencies": { 12 | "fumadocs-core": "15.0.15", 13 | "fumadocs-docgen": "^2.0.0", 14 | "fumadocs-mdx": "11.5.6", 15 | "fumadocs-ui": "15.0.15", 16 | "lucide-react": "^0.487.0", 17 | "next": "15.2.4", 18 | "react": "^19.0.0", 19 | "react-dom": "^19.0.0", 20 | "next-sandbox": "workspace:*" 21 | }, 22 | "devDependencies": { 23 | "@tailwindcss/postcss": "^4.0.17", 24 | "@types/mdx": "^2.0.13", 25 | "@types/node": "22.13.8", 26 | "@types/react": "^19.0.10", 27 | "@types/react-dom": "^19.0.4", 28 | "eslint": "^9", 29 | "eslint-config-next": "15.2.0", 30 | "postcss": "^8.5.3", 31 | "tailwindcss": "^4.0.9", 32 | "typescript": "^5.8.2" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /apps/docs/app/layout.config.tsx: -------------------------------------------------------------------------------- 1 | import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'; 2 | 3 | /** 4 | * Shared layout configurations 5 | * 6 | * you can customise layouts individually from: 7 | * Home Layout: app/(home)/layout.tsx 8 | * Docs Layout: app/docs/layout.tsx 9 | */ 10 | export const baseOptions: BaseLayoutProps = { 11 | githubUrl: 'https://github.com/1weiho/next-sandbox', 12 | nav: { 13 | title: ( 14 | <> 15 | {/* 21 | 22 | */} 23 | Next Sandbox 24 | 25 | ), 26 | }, 27 | links: [ 28 | { 29 | text: 'Documentation', 30 | url: '/docs', 31 | active: 'nested-url', 32 | }, 33 | { 34 | text: 'Playground', 35 | url: '/sandbox', 36 | }, 37 | ], 38 | }; 39 | -------------------------------------------------------------------------------- /apps/docs/content/docs/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started 3 | description: Getting started with Next Sandbox. 4 | --- 5 | 6 | Next Sandbox is a lightweight package for testing and monitoring server actions in your Next.js application. It provides a simple UI to execute actions, view logs, and measure execution times. 7 | 8 | ## Features 9 | 10 | - **Execute Actions**: Run server actions directly from the UI. 11 | - **View Logs & Metrics**: Monitor execution status, logs, and performance metrics (AVG, P75, P95). 12 | 13 | ## Installation 14 | 15 | ```package-install 16 | next-sandbox 17 | ``` 18 | 19 | ## Usage 20 | 21 | Create a dedicated route for sandbox usage and directly export `withSandbox` in `page.tsx`: 22 | 23 | ```tsx title="app/sandbox/page.tsx" 24 | import { withSandbox } from 'next-sandbox'; 25 | import { seedPosts } from './seed-posts'; 26 | 27 | export default withSandbox({ 28 | functions: [ 29 | { 30 | name: 'Seed Posts', 31 | function: seedPosts, 32 | }, 33 | ], 34 | }); 35 | ``` 36 | -------------------------------------------------------------------------------- /apps/test/public/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/docs/components/illustrations/arrow-down.tsx: -------------------------------------------------------------------------------- 1 | import type { SVGProps } from 'react'; 2 | 3 | const ArrowDown = (props: SVGProps) => ( 4 | 11 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | 28 | export default ArrowDown; 29 | -------------------------------------------------------------------------------- /apps/docs/components/illustrations/arrow-right.tsx: -------------------------------------------------------------------------------- 1 | import type { SVGProps } from 'react'; 2 | 3 | const ArrowRight = (props: SVGProps) => ( 4 | 11 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | 28 | export default ArrowRight; 29 | -------------------------------------------------------------------------------- /packages/next-sandbox/README.md: -------------------------------------------------------------------------------- 1 | # Next Sandbox 2 | 3 | Next Sandbox is a lightweight package for testing and monitoring server actions in your Next.js application. It provides a simple UI to execute actions, view logs, and measure execution times. 4 | 5 | ## Features 6 | 7 | - **Execute Actions**: Run server actions directly from the UI. 8 | - **View Logs & Metrics**: Monitor execution status, logs, and performance metrics (AVG, P75, P95). 9 | 10 | ## Installation 11 | 12 | ```bash 13 | pnpm i next-sandbox 14 | ``` 15 | 16 | ## Usage 17 | 18 | Create a dedicated route for sandbox usage and directly export `withSandbox` in `page.tsx`: 19 | 20 | `app/sandbox/page.tsx` 21 | 22 | ```tsx 23 | import { withSandbox } from 'next-sandbox'; 24 | import { seedPosts } from './seed-posts'; 25 | 26 | export default withSandbox({ 27 | functions: [ 28 | { 29 | name: 'Seed Posts', 30 | function: seedPosts, 31 | }, 32 | ], 33 | }); 34 | ``` 35 | 36 | ## Documentation 37 | 38 | Find the full API reference and examples in the [documentation](https://next-sandbox.1wei.dev/docs). 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Yiwei Ho 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /apps/docs/app/(home)/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from 'react'; 2 | import { HomeLayout } from 'fumadocs-ui/layouts/home'; 3 | import { baseOptions } from '@/app/layout.config'; 4 | 5 | export default function Layout({ children }: { children: ReactNode }) { 6 | return ( 7 | 8 | {children} 9 |