Welcome to Next.Nav, a Visual Studio Code extension for viewing and manipulating projects using the Next.js App Router.
Next.nav allows Next.js developers to:
- Load a projects src/app route.
- View routes in a legible node based tree view.
- Easily access files in nested routes.
- Add / Remove routes to a clearly defined parent route.
- Add / Remove files to routes.
- Display whether routes render Client side or Server side.
- Install VSCode
- Install the extension by searching "Next Nav" in the extension marketplace or Launch VS Code Quick Open (Ctrl+P in Windows/Linux) or (Command+P MacOS), paste the following command
ext install NextNav.NextNav
and press enter. - Open a Next.js project that is using the App Router in VSCode
- Launch Next.Nav by opening the command palette using (Ctrl+Shift+P in Windows/Linux) or (Command+Shift+P MacOS) and typing
Next.Nav
highlight and press Enter - Select the Import Path icon and input the relative or absolute path of your root App route
- When you hover over a file type in the tree it will tell you the name
- You can click on the icon of the file in the folder to open it. Alternatively, you can click on the folder to open a modal with all of the files
- Click on a file to open it
- Click on any blank space on a folder node to open a modal to view its contents.
- Add a file name and extension in the input field.
- Add file with the green add file icon.
warning: this will permanently delete the file.
- Click on any blank space on a folder node to open a modal to view a folders contents.
- Click the red trash icon next to the file you want to delete.
- Click confirm in the pop-over to permanently delete the file. (warning: this can not be undone)
- Click on the plus icon on the right edge of the folder node you want your new folder to be nested in.
- Give your new folder a name and submit.
warning: this will permanently delete all contained files and sub folders
- Click on the minus icon on the left edge of the folder node you want to delete
- Type the name of the folder to confirm deletion of the directory and all sub directories and files contained. (warning: this can not be undone)
Next.Nav is an Open Source product and we encourage developers to contribute. Please create a fork of the dev branch and create a feature branch on your own repo. Please make all pull request from your feature branch into Next.Nav's dev branch.
- Demo Tree initially loads in upper let corner on first load
- Long file names clip on node edge
- File deletion popover does not disappear after confirm click
- Renaming folders and files: add an edit button for file and folder names
- Moving folders and files: adjust routes through drag and drop
- Filter for file types: add a checklist panel to highlight selected file types
- Add support for more file types
- Add toggle option for client/serverside render text on nodes
- Recently used route (time stamp)
- Implement debugging and optimization insights for routes
- Provide a pages router to app router converter
- Expand to prototyping tool for Next.js projects
1.0.2
- Fix to disallow submit on enter keypress for an empty input field within import popover
- Fix to remove string after new file creation
- Improve various UI elements
- Update README.md to reflect new known issues
Anatoliy Sokolov Linkedin | GitHub |
Brian Henkel Linkedin | GitHub |
Jordan Querubin Linkedin | GitHub |
Nathan Peel Linkedin | GitHub |