Why I Built nextjs-server-action-tester 💡

In a recent project, I was responsible for developing the frontend using Next.js, while a colleague handled the backend logic. As a core Node.js developer, my colleague was accustomed to using Postman for testing API endpoints. However, when it came to server actions in Next.js—functions that are executed directly on the server and aren't exposed as API endpoints—he found it challenging to test them using traditional tools like Postman.

This challenge sparked the idea to create a tool that could scan a Next.js codebase, identify all server actions, and provide a user interface to test these actions 🎯. The goal was to streamline the testing process for server actions, especially for developers who are more familiar with traditional API testing methods. This led to the creation of nextjs-server-action-tester 🚀.

What Is nextjs-server-action-tester? 🤖

nextjs-server-action-tester is an npm package designed to make the testing of server actions in Next.js projects as straightforward as possible. It automates the process of scanning your project, generates metadata, and creates a user-friendly UI for listing, searching, and executing server functions 🎨. The tool supports both JavaScript and TypeScript, and it comes with customizable configurations and a built-in light/dark mode.

Key Features ✨

1. Automatic Scanning: Scans your Next.js project to identify server actions.
2. UI for Testing: Generates a page within your project where you can list and test server actions.
3. Customizable Configurations: Offers flexibility in how the tool is configured and used within your project.
JavaScript and TypeScript Support: Works seamlessly with both languages.
4. Light/Dark Mode: UI that adapts to your preferred theme.

Libraries Used 🛠️

1. babel/parser: For parsing JavaScript/TypeScript code into an Abstract Syntax Tree (AST).
2. babel/traverse: For traversing the AST and identifying server actions.
3. fs-extra: For handling file operations during the setup and scanning process.

How to Use nextjs-server-action-tester 🚀

1. Installation: First, install the package in your Next.js project:

npm install nextjs-server-action-tester

2. Running the Tool: After installation, run the following command to start the scanning and testing process:

npx actions-scan

This command will automatically set up the necessary files, initiate the scanning process, and generate a UI for testing server actions.

3. Testing Server Actions: Open the generated page in your browser (e.g.,http://localhost:3000/list-actions). Here, you can view all detected server actions, search for specific actions, input parameters, and execute them 🔍.

Why It Improves Developer Experience 🚀

nextjs-server-action-tester bridges the gap between traditional API testing tools like Postman and the server actions feature in Next.js. It empowers developers, especially those familiar with Node.js and API testing, to test server actions with ease. The tool integrates directly into your project, giving you full control while keeping the development process smooth and efficient.

Links 🔗

1. npm Package: nextjs-server-action-tester
2. Demo Video: Watch on YouTube

Contributing 🤝

Contributions are welcome! If you have ideas for improvements or find any issues, feel free to submit a pull request or open an issue on the GitHub repository.

By sharing this tool, I hope to make the development and testing of server actions in Next.js projects more accessible and efficient. Whether you're working on a solo project or collaborating with a team, nextjs-server-action-tester can be a valuable addition to your development toolkit 💼.