NEXT.NAV



Navigate and Create routes 

easily 


in your Next.js application


User friendly VSCode extension

Features Demo

Opening Extension

instructions
  • Install the extension from VS Code Store
  • 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

Getting File Structure

instructions
  • Initially you will see a file structure with some dummy data
  • To get the file structure for your project first right click your app folder and click copy path or copy relative path
  • Then click on the import path icon and paste the path
  • The app will technically work on any file structure but it is best used for the App Router to display server/client rendering correctly
  • We will also only display javascript, typescript, or css files and ignore all other files in the display as this is designed to visualize pages easier

Opening a File

instructions
  • 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

Adding Files

instructions
  • 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

Deleting Files

instructions
  • 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)

Adding Folders

instructions
  • 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

Deleting Folders

instructions
  • 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)

Tutorial Video

Meet Our Fantastic Team of Software Engineers

Anatoliy Sokolov

anatoliy

Brian Henkel

brian

Jordan Querubin

jordan

Nathan Peel

nathan