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.