In this article, we are going to learn about the Link component of Next.Js. Follow the below steps to add the Link component in the Next.js application.
Link Component: Link is one of the components in Next.js. It is used to create links between pages in a Next.js app. To create a link, insert the <Link> component into your page, and specify the path to the page you want to link to.
The <Link> component also has the following properties:
- href: The path to the page you want to link to.
- rel: The type of link. Possible values are “external”, “internal”, or “none”.
- title: The title of the link.
- active: Whether the link is active or not.
Creating NextJs application:
Step 1: To create a new NextJs App run the below command in your terminal:
npx create-next-app GFG
Step 2: After creating your project folder (i.e. GFG ), move to it by using the following command:
cd GFG
Project Structure: It will look like this.
Example: Adding Link in Next.Js. To use the link component first we are going to create one new file name ‘first.js’ with the below content.
first.js
// Importing the Link component import Link from 'next/link' export default function first() { return ( <div> This is the first page. <br/> {/* Adding the Link Component */} <Link href="/"> <a><button>Go to Homepage</button></a> </Link> </div> ) } |
index.js
// Importing the Link component import Link from 'next/link' export default function Homepage() { return ( <div> This is the Homepage page - neveropen <br/> {/* Adding the Link Component */} <Link href="/first"> <a><button>Go to first page</button></a> </Link> </div> ) } |
Here we are first importing our Link component from ‘next/link’. Then we are using this component to navigate between pages.
Step to Run Application: Run the application using the following command from the root directory of the project.
npm run dev
Output: This will start the development server for your Next.Js application.
