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.
Launching the Extension and Opening a Tree
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)
Want to Contribute?
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
File deletion popover does not disappear after confirm click
Features to Add
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.0 - Initial release of Next.Nav
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
Fix to stop long folder names from clipping node edge (c/o miso-devel!)