Steps to use App Router in Next.js 13
Step 1: Create Next.js App
Open the terminal and create a new Next.js application using the following command:
npx create-next-app@latest gfg
Step 2: Move to Project Folder
After creating your project folder (i.e. gfg ), move to it by using the following command:
cd gfg
Project Structure
The project structure will look like this.
Example:
Step 1: layout.js file
Replace the below code with layout.js file code, It contains a Navigation bar that will be displayed to all the components and it also wrap all the child component.
Javascript
//File path: src/app/layout.js import { Inter } from 'next/font/google' import './globals.css' import Link from 'next/link' const inter = Inter({ subsets: [ 'latin' ] }) export const metadata = { title: 'Create Next App' , description: 'Generated by create next app' , } export default function RootLayout({ children }) { return ( <html lang= "en" > <body className={inter.className}> <ul> <li><Link href={ '/' }>Home Page</Link></li> <li><Link href={ '/login' }>Login Page</Link></li> <li><Link href={ '/gfg/dashboard' }>Dashboard Page</Link></li> <li><Link href={ '/this-page-not-exist' }>This page Does not exist</Link></li> </ul> {children} </body> </html> ) } |
Step 2: Root level Page.js
This file will be displayed when you are at a root. Replace the below code with the code inside page.js file.
Javascript
//File path: src/app/page.js export default function Page() { return ( <> <h1>w3wiki Home Page</h1> </> ) } |
Step 3: Create not-found.js File
Create not-found.js File inside a app root directory. This file will be displayed if you try to open a route that doesn’t exist in web application.
Javascript
//File path: src/app/not-found.js export default function Page() { return ( <> <hr /><h1>404 Page not found</h1><hr /> </> ) } |
Step 4: Create Login route
Inside app root directory, create a folder named login and inside that folder create a page.js file that will served when you open a login route.
Javascript
//File path: src/app/login/page.js export default function Page() { return ( <> <h1>Login Page</h1> </> ) } |
Step 5: Create Nested Route : /gfg/dashboard
Inside app directory, create a folder named gfg and inside that folder create another folder dashboard and in dashboard folder create page.js file that will be served when you open a route /gfg/dashboard route.
Javascript
//File path: src/app/gfg/dashboard/page.js export default function Page(){ return ( <> <h1>Dashboard Page</h1> </> ) } |
Running the Application
To run the application: Enter the following command in your terminal.
npm run dev
Output:
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