Next Sandbox

A lightweight tool for testing and monitoring
server actions in Next.js.

Simple Adoption

Create a dedicated route for sandbox usage and directly export withSandbox in page.tsx.

Monitoring

Monitor execution status, logs, and performance metrics (AVG, P75, P95).

Access Control

Provide a beforeRender method that allows users to perform server-side logic such as authentication and authorization before the Sandbox UI is rendered.

How to use

import { withSandbox } from 'next-sandbox';
import { getAllPosts, seedPosts } from './sandbox-function';
 
export default withSandbox({
  functions: [
    {
      name: 'Get All Posts',
      function: getAllPosts,
    },
    {
        name: 'Seed Posts',
        function: seedPosts,
      },
  ],
});
Demo Screenshot