Link component in Next.js

In Next.js, the Link component is used to create navigation between pages in a Next.js application. Instead of causing a full-page reload (like <a> tag), the <Link> component enables client-side navigation, making transitions faster and smoother. This feature improves performance and creates a better Single Page Application (SPA) experience by pre-fetching linked pages in the background.

• Provides faster navigation between pages.
• Avoids full page reloads (unlike <a> tags).
• Pre-fetches linked content to improve performance.
• Ensures SEO-friendly routing in Next.js applications.

Syntax of Next.js Link Component :

import Link from 'next/link';

<Link href="/target">
 Go to Target
</Link>

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.

Steps to Create Next.js App

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 : Using Link in Next.js

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.

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.

Here:

• We imported the Link component from next/link.
• We used <Link> to navigate back to the homepage without a full page reload.