Scribd
Upload
24 views

Next Js Routing

This document contains code to create routes in Next Js Application

Uploaded by

soultune.999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

Next Js Routing

This document contains code to create routes in Next Js Application

Uploaded by

soultune.999
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Rendering

Rendering converts the code you write into user interfaces. React and Next.js allow you to create
hybrid web applications where parts of your code can be rendered on the server or the client.

Rendering Environments
There are two environments where web applications can be rendered: the client and the server.

The client refers to the browser on a user's device that sends a request to a server for your
application code. It then turns the response from the server into a user interface.

The server refers to the computer in a data center that stores your application code, receives
requests from a client, and sends back an appropriate response.

Basic Routing
The Pages Router has a file-system based router built on concepts of pages. When a file is added
to the pages directory it's automatically available as a route.

Profile Page:

 Click on src\app -> New Folder


 Name the folder as profile
 Now click on profile folder -> New File
 Name the file as page.js
 Write the code of profile page in this page.js file
Src\app\Profile\Page.js

export default function Profile(){


return(
<h1> Profile Page</h1>
);
}

Localhost:3000/profile

Similarly create contact page.

Linking and Navigation

Linking:
Create link in home page to move from home page to profile page and contact page.

Open main page.js file and import Link


i.e.

import Link from "next/link";


Page.js

import Link from "next/link";


export default function Home() {

return (
<main>
<h1>Basic Routing</h1>

<Link href="/profile"> Go to Profile Page</Link>


</main>
);
}

Click on Go to Profile Page link


import Link from "next/link";
export default function Home() {

return (
<main>
<h1>Basic Routing</h1>

<Link href="/profile"> Go to Profile Page</Link>

<Link style={{display:'block'}} href="/contact"> Go


to Contact Page</Link>

</main>
);
}

Now to move from profile page to home page follow same steps

Profile/Page.js

import Link from "next/link";


export default function Profile()
{
return(
<main>
<h1> Profile Page</h1>
<Link href="/"> Go to Home Page</Link>
</main>
);
}

Navigation:
Now create button in contact page to move from contact page to profile page.

Contact/Page.js

"use client"
import { useRouter } from "next/navigation";
export default function Contact()
{
const router = useRouter();
const move=(name)=>{
router.push(name)
}

return(
<main>
<h1> Contact Page</h1>

<button onClick={()=>move("/profile")}> Go to Profile


Page </button>
</main>
);
}

Click on button
Contact/Page.js

Nested Routes
To create a nested route, you can nest folders inside each other.

Normal Routing Nested Routing


 Home  Home
 Profile  Profile
 Login - Profile Overview
 Contact - Profile Setting
 Contact
- Email
- Phone

Src/app/profile/overview/page.js
Src/app/profile/page.js
Localhost:3000/profile/overview
Localhost:3000/profile

You might also like