Next.JS —Application Setup and File Based Routing
When it comes to frontend application development, usually we look more into optimizations to improve application performance. As a React developer myself, I drown into endless node packages and configurations in improving the performance. From react-router to webpack, lazy loading of images to server-side rendering, there are multiple manual fine-tuning required. And then comes a framework that is built on React.js library which has multiple built-in features that reduce manual intervention for a production-ready application — Next.js
Feature-packed Next.js
Next.js is an open-source development framework built on Node.js enabling React-based web applications functionalities. Vercel (previously named ZEIT), maintains and leads Next.js open-source development.
Next.js is a React framework capable of creating applications that run both on the client and the server, otherwise known as Universal JavaScript applications. This framework helps you build universal apps faster by streamlining basic features like client-side routing and page layout while simplifying advanced features like server-side rendering and code splitting.
React documentation mentions Next.js among “Recommended Toolchains” advising it to developers as a solution when “building a server-rendered website with Node.js”
Builtin features provided by Next.js
- Fast refresh (Hot-reload)
- File-based routing (Static and Dynamic routing)
- Automatic code splitting
- Image component and optimizations(Lazy loading)
- Pre rendering & Server-side rendering
- ESLint integrated
- Typescript support
- Inbuilt components — Image, Head, Script, and many more.
Next.js application set up
By running npm create-next-app on your terminal, a basic boilerplate code will be set up in your system. The folder structure will look like this
You can see folders like pages, public, node_modules, styles. Thepages folder helps in file-based routing in the Next.js application, and it should contain all the main pages. The public folder is meant for all the static assets like images, icons, etc. The styles folder contains your application CSS files.
next.config.js is your Next.js application configuration file, which helps in configuring environment variables, image/file extension configurations, etc.
This config file is a regular Node.js module, not a JSON file. It gets used by the Next.js server and build phases, and it's not included in the browser build.
File Based Routing
In a single-page application, routing is one of the key elements that need to be implemented to navigate from one page to another. Next.js has this covered for you with its built-in routing technique called — File-Based Routing.
pages folder helps in accomplishing the file-based routing in Next.js. This folder contains _app.jsand index.js which is the application root file and the home page or main starting page respectively.
In the above image, you can see the pages folder containing files and folders for Static, Dynamic, and Nested routes. The pages folder should only contain the components and all other files like constants, utils have to be moved out of the pages folder.
We will look into achieving Static, Dynamic, and Nested routes.
Static Routes
In the above image, you can see thepages folder contains a file called about.js. The name of your JS file will itself becomes a route, in this case, a static route. Now when you navigate tomy-domain.com/about, the browser will render about.js component.
Similarly, for nested routes, you can create a folder inside thepagesfolder, say company, inside that, you can include a index.js to have my-domain.com/company. Now, if we require a route something like — my-domain.com/company/contactus, we need to add a file called contact.js inside the company folder. That’s it! You have now implemented static routes!
Dynamic Routes
Let’s say we need a route like — my-domain.com/products/1. When the product ID changes(dynamic) we need to fetch the data of that particular product using the same component.
In the above image, you can see the products folder resides in thepages folder, hence we have my-domain.com/products. To handle the dynamic part of the route, which is my-domain.com/products/1, we need to add a JS file inside the products folder, but since we need a dynamic route, we need to name the file within square brackets []. Here, we add [id].js file inside the products folder. Inside this file, we can have a component to fetch the product data using the Id and render the view.
You can access the route parameters and queries using built-in hooks called useRouter. In the below example you can see how to read the pathname and dynamic Id.
What if we need to have an URL like — my-domain.com/blog/2021/my-only-blog, where we need multiple dynamic parameters in our route. This can be achieved by using this format — [...blogid].js. Add this file inside your blog folder — Check the second image of this article. Now, the[...blogid].js component can have multiple dynamic parameters in the URL.
To read the dynamic query parameters, use — router.query which returns all the dynamic parameters in an array.
404 Page Not Found
Next.js by default provides a clean 404 error page when entered a wrong route/URL. No configurations or code are required.
Default 404 page looks like…
Also, Next.js provides developers to add a custom 404 page. Add a 404 component and name the file as 404.js inside the pages folder (Check the folder structure image). That’s it. Now you have your own custom 404 page. When a route is not found, Next.js checks for the 404.js page in the application and renders it or it will render the default 404 error page.
That will be all for the Next.js application setup and File-based routing implementation.
Check out the second part of this article, where I explain Pre-rendering in Next.js. How to implement Static Site Generation (SSG) and Server Side Rendering (SSR) in Next.js.
Check out the sample Next.js application code here. Where I have implemented all the routing techniques provided by Next.js. Also, check the production URL for the same here.
