Next.js Explorer is a browser extension for Google Chrome and Firefox designed to help developers explore and visualize the structure and data of their Next.js applications.
To get started with Next.js Explorer, follow the steps below.
Make sure you have the following installed:
- Node.js (v20 or higher)
- npm or yarn
- Chrome or Firefox for testing the extension
Clone the repository to your local machine:
git clone https://github.com/alcoceba/next.js-explorer.git
cd next.js-explorerInstall the necessary dependencies:
npm install
# o
8000
r
yarn installTo bundle the project and load it as a Google Chrome extension or Firefox addon:
-
For Chrome:
npm run watch:chrome
This command will bundle the project and watch for changes, allowing you to load it as an extension in Chrome.
-
For Firefox:
npm run watch:firefox
This command will bundle the project and watch for changes, allowing you to load it as an addon in Firefox.
After running one of these commands, follow the steps below to load the extension/addon:
- Open Chrome and go to
chrome://extensions/. - Enable "Developer mode" (toggle switch in the top-right corner).
- Click on "Load unpacked" and select the
dist/chromedirectory.
- Open Firefox and go to
about:debugging. - Click on "This Firefox" in the sidebar.
- Click on "Load Temporary Add-on" and select the
dist/firefox/manifest.jsonfile.
Before committing changes, ensure your code meets the project's quality standards:
Prettier is configured to ensure consistent code style:
npm run format # Format all files
npm run format:check # Check if files are formatted (CI)ESLint and StyleLint check code quality:
npm run lint # Check code quality
npm run lint:fix # Fix linting issues automatically
npm run stylelint # Check CSS
npm run stylelint:fix # Fix CSS issues automaticallyA comprehensive test suite using Jest and React Testing Library covers all components:
npm test # Run all tests once
npm test:watch # Run tests in watch mode during development
npm test:coverage # Generate coverage reportsAll tests are located alongside their corresponding components with the .test.js suffix.
Browse and develop UI components in isolation using Storybook:
npm run storybook # Start Storybook dev server on port 6006
npm run build-storybook # Build static documentation siteAll core components have stories located alongside them with the .stories.js suffix.
To build the project for production:
-
For Chrome:
npm run build:chrome
This command will create a production-ready bundle for Chrome in the
dist/chromedirectory. -
For Firefox:
npm run build:firefox
This command will create a production-ready bundle for Firefox in the
dist/firefoxdirectory.
This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.