NEXT.NAV

Welcome to Next.Nav, a Visual Studio Code extension for viewing and manipulating projects using the Next.js App Router.

Features

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.

Getting Started

Launching the Extension and Opening a Tree

1. Install VSCode
2. 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 in MacOS), paste the following command ext install NextNav.NextNav and press enter.
3. Open a Next.js project that is using the App Router in VSCode
4. Launch Next.Nav from status bar or by opening the command palette using (Ctrl+Shift+P in Windows/Linux) or (Command+Shift+P in MacOS) and typing Next.Nav highlight and press Enter
5. Select the Import Path icon and input the relative or absolute path of your root App route (Note: Next.Nav will automatically grab your file structure if it is under the 'src/app' route)

Route Traversal

• You can traverse into sub trees/folders by pressing the sub-directory icon (to the right of the client/server) of the node you want to become the root node
• From the sub-directory, you can exit to the original tree by press the exit button on the root node. If this button is not there, you are already in the original tree.
• The original tree is determined by the initial folder path the extension opens on or the path you enter into the path field.

Opening Files

1. When you hover over a file type in the tree it will tell you the name
2. 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
3. Click on a file to open it

Adding Files

1. Click on any blank space on a folder node to open a modal to view its contents.
2. Add a file name and extension in the input field.
3. Add file with the green add file icon.

Deleting Files

warning: this will permanently delete the file.

1. Click on any blank space on a folder node to open a modal to view a folders contents.
2. Click the red trash icon next to the file you want to delete.
3. Click confirm in the pop-over to permanently delete the file. (warning: this can not be undone)

Adding Folders

1. Click on the plus icon on the right edge of the folder node you want your new folder to be nested in.
2. Give your new folder a name and submit.

Deleting Folders

warning: this will permanently delete all contained files and sub folders

1. Click on the minus icon on the left edge of the folder node you want to delete
2. 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.

Known Issues

• 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/server-side render text on nodes
• Recently used route (time stamp)

Possible Iterations

• Implement debugging and optimization insights for routes
• Provide a pages router to app router converter
• Expand to prototyping tool for Next.js projects

Release Notes

1.1.0 - Feature Update

1.0.0 - Initial release of Next.Nav

Contributors

Anatoliy Sokolov Linkedin | GitHub

Brian Henkel Linkedin | GitHub

Jordan Querubin Linkedin | GitHub

Nathan Peel Linkedin | GitHub

Darren Pavel Linkedin | GitHub