Vinculación entre páginas en Next.js

En este artículo vamos a ver cómo podemos enlazar una página con otra en Next.js. Siga los pasos a continuación para configurar la vinculación entre páginas en la aplicación Next.js:

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

npx create-next-app GFG

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í.

Creación de páginas: primero, vamos a crear dos páginas diferentes en nuestro proyecto Next.js. Para esto, cree dos nuevos archivos JavaScript llamados ‘primero’ y ‘segundo’ dentro de la carpeta de páginas.

Nombre de archivo: first.js

import React from 'react'
  
export default function first() {
    return (
        <div>
            This is the first page.
        </div>
    )
}

Nombre de archivo: segundo.js

import React from 'react'
  
export default function second() {
    return (
        <div>
            This is the second page.
        </div>
    )
}

Vinculación de las páginas: Ahora, para vincular las páginas, vamos a utilizar el componente ‘Enlace’ de ‘siguiente/enlace’. Podemos agregar la etiqueta <a> dentro de nuestro componente Enlace. Podemos agregar la siguiente línea en nuestro script para importar este componente.

import Link from 'next/link'

Para vincular la ‘primera’ y la ‘segunda’ página con la página de inicio, agregaremos las siguientes líneas en nuestro archivo index.js en la carpeta de páginas.

Nombre de archivo: index.js

// Importing the Link component
import Link from 'next/link'
  
export default function Home() {
    return (
        <div>
            {/* Adding Heading */}
            <h1>
                This is Homepage
            </h1>
  
            {/* Adding the Link Component */}
            <Link href="/first">
                <a><button>Go to First Page</button></a>
            </Link>
            <br />
            <Link href="/second">
                <a><button>Go to Second Page</button></a>
            </Link>
        </div>
    )
}

Nombre de archivo: first.js Ahora también vamos a agregar el componente ‘Enlace’ en nuestras páginas ‘primera’ y ‘segunda’.

// 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="/first">
                <a><button>Go to First Page</button></a>
            </Link>
            <br />
            <Link href="/second">
                <a><button>Go to Second Page</button></a>
            </Link>
        </div>
    )
}

Nombre de archivo: segundo.js

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

Paso para ejecutar la aplicación: Ahora ejecute la aplicación con el siguiente comando:

npm start

Producción: