page.js File & Nested Routing
A page.js is a component that contains a UI elements, which are displayed when you move to any route. Next.js 13 App Router automatically consider the page.js file when you move to any route and content of it is rendered on display. This file is not optional.
Nested Route is a route that is contained within another route. This allows you to create a hierarchy of routes, which can be useful for organizing your application’s content.
For example, you have created a cloths folder in a app directory and inside that folder you have created a men and women folder and inside both the folder you have created a page.js component. So if you want to open men cloths section you can access it by using http://localhost:3000/cloths/men and if you want to open women cloths section you can access it by using http://localhost:3000/cloths/women and the content written inside page.js will be displayed.
Next JS 13 App Router
Routing refers to the process of determining how an application responds to a client request to a particular endpoint or URL. When a user clicks a link, enters a URL in the browser, or performs some action that changes the current URL, the routing mechanism decides which content or component to display on the page.
In this article, we will learn about Next.js 13 App router. Routing is an important concept in building single-page applications (SPAs) and dynamic web applications where navigating between pages updates the content on the page without a full reload, providing a smoother and more seamless user experience.
Table of Content
- Next.js 13 App Router Usage
- page.js File & Nested Routing
- layout.js File
- error.js File
- not-found.js
- loading.js
- Steps to use App Router in Next.js 13
Contact Us