SiguienteJS Pages

NextJS es un marco basado en React. Tiene el poder de desarrollar hermosas aplicaciones web para diferentes plataformas como Windows, Linux y Mac. La vinculación de la ruta dinámica ayuda a representar sus componentes NextJS de forma condicional.

En Next.js, una página es un componente de React exportado desde un archivo .js, .jsx, .ts o .tsx en el directorio de páginas. Podemos crear fácilmente diferentes páginas en next.js y acceder a ellas en los navegadores sin usar el enrutador para redirigir al usuario. En Next.js, también puede crear páginas dinámicas. Para ello, solo tienes que añadir corchetes en el nombre del archivo.

Crear aplicación NextJS: puede crear un nuevo proyecto NextJS usando el siguiente comando:

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

Creando una nueva página estática: Aquí vamos a crear una nueva página con el nombre gfg. Para ello, crearemos un nuevo archivo JavaScript en nuestro directorio de páginas con el nombre ‘ gfg.js ‘. Después de crear el archivo, agregue el siguiente contenido en el archivo.

import React from 'react'
  
export default function Gfg() {
  return (
    <h1>
      This is new file
    </h1>
  )
}

De forma predeterminada, el archivo index.js se tratará como la página de inicio de su aplicación. Agregue el siguiente contenido en el archivo index.js.

import React from 'react'
  
export default function Homepage() {
  return (
    <h1>
      This is Homepage
    </h1>
  )
}

Ahora podemos acceder fácilmente a ambas páginas en nuestra aplicación ejecutando la aplicación en el navegador.

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

npm run dev

Producción:

Creando páginas Dinámicas: Para esto, vamos a crear una nueva carpeta con el nombre ruta y dentro de esta carpeta, vamos a crear nuestro archivo dinámico con el nombre [gfg].js.

Agregue el siguiente contenido en el archivo [gfg].js :

import React from 'react'
import {useRouter} from 'next/router';
  
export default function getRoute() {
    // Calling useRouter() hook
    const router = useRouter()
    return (
        <div>
            <h1>GeeksforGeeks</h1>
            <h2>pathname:- {router.asPath}</h2>
        </div>
    )
}

Aquí estamos leyendo el valor de la ruta actual con la ayuda de un enrutador.

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

npm run dev

Producción: