Next.js: páginas

En Next.js, podemos crear páginas y navegar entre ellas usando la función de enrutamiento del sistema de archivos. UsaremosLink componente para tener una navegación del lado del cliente entre páginas.

En Next.js, una página es un componente de React y se exporta desde el directorio de páginas. Cada página está asociada con una ruta en función de su nombre de archivo. Por ejemplo

  • pages/index.js está vinculado con la ruta '/'.

  • pages/posts/first.js está vinculado con la ruta '/ posts / first' y así sucesivamente.

Actualicemos el proyecto nextjs creado en el capítulo Configuración del entorno .

Cree el directorio de publicaciones y first.js dentro de él con los siguientes contenidos.

export default function FirstPost() {
   return <h1>My First Post</h1>
}

Agregue soporte de enlace para volver a la página de inicio. Actualice first.js de la siguiente manera:

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
      </>	  
   )
}

Agregue Link Support a la página de inicio para navegar a la primera página. Actualice index.js de la siguiente manera:

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>	    
   )
}

export default HomePage

Inicie el servidor Next.js

Ejecute el siguiente comando para iniciar el servidor:

npm run dev
> [email protected] dev \Node\nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 en un navegador y verá el siguiente resultado.

Haga clic en First Link y verá el siguiente resultado.