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

Steps to use App Router in Next.js 13

Step 1: Create Next.js App

Step 2: Move to Project Folder

Project Structure

Example:

Step 1: layout.js file

Javascript

Step 2: Root level Page.js

Javascript

Step 3: Create not-found.js File

Javascript

Step 4: Create Login route

Javascript

Step 5: Create Nested Route : /gfg/dashboard

Javascript

Running the Application

Output:

Next JS 13 App Router

Similar Reads

Contact Us