Co-authored by: Brian Henkel, Anatoliy Sokolov, and Jordan Querubin
Next.Nav: The Solution to Confusing File-Based Routing in Next.js
Next.js is a React framework for creating web applications with advanced page routing and SEO optimization. With Next.js, React applications are more accessible and user-friendly. Next.js comes with a plethora of features, such as prefetching, lazy loading, file-based routing, server-side rendering, and more. It’s the perfect framework for anyone developing a React web application. The React team themselves recommends using Next.js over React Native.
React is a library. It lets you put components together, but it doesn’t prescribe how to do routing and data fetching. To build an entire app with React, we recommend a full-stack React framework like Next.js or Remix.
— React Website
My team and I are passionate about Next.js, and we genuinely believe it is the best React framework. However, we understand there are frustrations when using it, some of which we hope to solve with our VS Code extension.
Frustrations with file-based routing
Next.js provides crucial features for developing web applications, though file-based routing can make development frustrating even on small applications. With the new App Router, developers must create routes using their application’s folder structure. Each page is called “page.jsx”. Many folders also include a “layout.jsx”, “loading.jsx”, a CSS file, and other repeated file names. When the file names are all the same between folders, it is confusing to navigate the file structure. Creating new folders and routes with the VSCode file explorer is also annoying.
Precious time is lost searching for the correct file and adding files and folders in the right place. Navigating the file structure of a small Next.js application is frustrating, but navigating an extensive application is even more so.
File-based routing has many benefits and streamlines the creation of websites. We firmly believe in the improvements Next.js brings to React development. For this reason, we developed Next.Nav to address the frustrations with navigating file-based routing while embracing the central features of Next.js.
Introducing Next.Nav
Introducing Next.Nav, a VS Code extension for viewing and modifying the folder structure of your Next.js application via a tree structure. You can quickly find and open files from the visually pleasing tree. Within the modal that pops up after clicking a node, you can create new files in the folder or delete existing ones. You can create or delete folders by using the node’s buttons. The tree will automatically update with changes you make to the application.
Server-side rendering (SSR) is a vital part of Next.js, as it improves SEO by making the site easily accessible to web crawlers. It also improves accessibility by making the site available even if JavaScript isn’t loading on the browser. However, client-side rendering (CSR) is needed to make aspects of a site interactive. Fortunately, Next.js allows you to make a page client-side rendered. Next.Nav encourages this feature by indicating whether a folder is SSR or CSR, further decreasing navigation time and improving the developer experience.
You can view Next.Nav on the VSCode extension store here.
Using Next.Nav
Creating an intuitive extension was our focus. Next.Nav is easy to use, requiring little effort to understand. You can use it immediately after downloading. Regardless, here are some tips to get you started.
Next.Nav is a VS Code extension available on the extension store. Go to the store and, search for “Next’Nav” and install the extension. From the root file of your application, press Command + Shift + P (CTRL + SHIFT + P for Windows) to open the Command Pallete and enter “Next.Nav”. The extension will load with a tutorial tree. You can explore the tutorial tree without affecting your application. Note that you won’t be able to add any files or folders to this tree.
Press the upload icon in the top right to view your application’s tree structure. Please copy and paste the path (relative or direct) to your app folder and paste it into the input field. Press submit, and you will see your tree. You can choose how the tree is oriented by pressing the orientation button in the top right. Press the refresh button in the top right if you accidentally put the tree out of view or move the nodes too much. You should also press this button if you update the folders or create new files from the VS code file explorer. If you update the folders and files from the Next.Nav extension, the changes will reflect instantly.
To add new files, click on the node (which represents a folder) to which you want to add the file. A modal will pop up with all the files in the folder and an input field at the bottom. Enter the name of the new file and press enter. To view files, click on the node icons or the folder names from within the node modal. You can also hover over the icons to see what files they represent. To delete a file, click on a node to view the modal. You will see a trash can icon next to each file. Click the trash can and press confirm. You cannot undo this action, so we have an extra confirmation step.
To create a folder, press the button on the right of the parent node. A modal will pop up with an input field to name the folder. Press enter to create the folder. To delete a folder, press the left button on the node you want to delete. The application will ask you to type the folder name to confirm that you want to delete it. Again, you cannot undo this.
The magic behind the awesomeness
For those curious about how Next.Nav was developed, here is some information on the technologies we used.
Next.Nav is a React application built inside of a VS Code extension. We used ReactFlow to display the nodes in the React app. To position the nodes correctly, we used ELK.js. Of course, we also used the VS Code API to interact with files and directories.
If you are interested in contributing to Next.Nav, please visit our GitHub and review the contribution guidelines. We would love for you to contribute.
The Next.Nav team is incredibly excited about our extension’s launch. We know you’ll find it helpful in creating awesome Next applications. If you have any questions for our team, please do not hesitate to ask! We would love to connect!
