¿Qué es el componente de enlace en Next.js?

En este artículo, aprenderemos sobre el componente Link de Next.Js. Siga los pasos a continuación para agregar el componente Link en la aplicación Next.js.

Componente de enlace: el enlace es uno de los componentes de Next.js. Se utiliza para crear enlaces entre páginas en una aplicación Next.js. Para crear un enlace, inserte el componente <Link> en su página y especifique la ruta a la página a la que desea enlazar.  

El componente <Link> también tiene las siguientes propiedades:

• href: la ruta a la página a la que desea vincular.
• rel: El tipo de enlace. Los valores posibles son «externo», «interno» o «ninguno».
• title: El título del enlace.
• activo: si el enlace está activo o no.

Creando la aplicación NextJs:

Paso 1: para crear una nueva aplicación NextJs, ejecute el siguiente comando en su terminal:

npx create-next-app GFG

Paso 2: después de crear la carpeta de su proyecto (es decir, GFG), muévase a ella usando el siguiente comando:

cd GFG

Estructura del proyecto: Se verá así.

Ejemplo: Agregar enlace en Next.Js. Para usar el componente de enlace primero, vamos a crear un nuevo nombre de archivo ‘first.js’ con el contenido a continuación.

// 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>
    )
}

// Importing the Link component
import Link from 'next/link'
  
export default function Homepage() {
    return (
        <div>
            This is the Homepage page - GeeksforGeeks
            <br/>
            {/* Adding the Link Component */}
            <Link href="/first">
            <a><button>Go to first page</button></a>
            </Link>
        </div>
    )
}

Aquí primero estamos importando nuestro componente Enlace desde ‘siguiente/enlace’. Entonces estamos usando este componente para navegar entre páginas.

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm run dev

Salida: Esto iniciará el servidor de desarrollo para su aplicación Next.Js.