NextVis

NextVis is a VS Code extension for visualizing Next.js middleware.

🚀 Features

Flow Diagram: Visualize middleware execution across different routes.

Performance Metrics Panel: Display resources used by the VS Code extension.

VS Code Integration: View middleware behavior directly in the editor.

📦 Installation

1. Open VS Code.
2. Go to the Extensions view (Ctrl+Shift+X).
3. Search for "NextVis".
4. Click Install.

🛠 Usage

1. Run the NextVis command in the Command Palette (NextVis: Start Visualization).
2. Click on Load Middleware File and navigate to your Next.js project's main middleware file.
3. Inspect middleware execution flow in the visual panel.
4. Check the performance panel for CPU & RAM usage.

🤝 Contributing

How to contribute

We welcome contributions! Feel free to submit issues and pull requests.

-Go to https://github.com/oslabs-beta/NextVis/
-Fork the project
-Create your feature branch (git checkout -b feature/AmazingFeature)
-Commit your changes (git commit -m 'Add some AmazingFeature')
-Push to the branch (git push origin feature/AmazingFeature)
-Open a pull request (from feature/AmazingFeature to dev)
-Create a new issue on GitHub

Contributors

Jun Inton - Github

Anthony Noyola - Github

Sung Jung - Github

Carolina Robson - Github

Brendan Hoskins - Github

📬 Contact

For questions or suggestions, open an issue or reach out on GitHub.

📄 License

MIT License. See LICENSE for details.

Enjoy!