NEXT.NAV
Navigate and Create routes
easily
in your Next.js application
User friendly VSCode extension
Features Demo
Opening Extension
- 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
- 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
- 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
- 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
- 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
- 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
- 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)
