Next.js - Enrutamiento

Next.js usa un enrutador basado en el sistema de archivos. Siempre que agreguemos una página apagesdirectorio, está automáticamente disponible a través de url. Las siguientes son las reglas de este enrutador.

Index Routes- Un archivo index.js presente en una carpeta se asigna a la raíz del directorio. Por ejemplo
- pages / index.js se asigna a '/'.
- pages / posts / index.js se asigna a '/ posts'.
Nested Routes- Cualquier estructura de carpetas anidadas en el directorio de páginas porque la URL del enrutador automáticamente. Por ejemplo
- pages / settings / dashboard / about.js se asigna a '/ settings / dashboard / about'.
- pages / posts / first.js se asigna a '/ posts / first'.
Dynamic Routes- Podemos usar el parámetro con nombre también para hacer coincidir la URL. Use corchetes para lo mismo. Por ejemplo
- pages / posts / [id] .js se asigna a '/ posts /: id' donde podemos usar URL como '/ posts / 1'.
- pages / [usuario] /settings.js se asigna a '/ posts /: user / settings' donde podemos usar URL como '/ abc / settings'.
- pages / posts / [... all] .js se asigna a '/ posts / *' donde podemos usar cualquier URL como '/ posts / 2020 / jun /'.

Vinculación de página

Next.JS permite vincular páginas en el lado del cliente utilizando el componente Link react. Tiene las siguientes propiedades:

href- nombre de la página en el directorio de páginas. Por ejemplo/posts/first que se refiere a first.js presente en el directorio pages / posts.

Creemos un ejemplo para demostrar lo mismo.

En este ejemplo, actualizaremos index.js y la página first.js para que un servidor acceda a obtener datos.

Actualicemos el proyecto nextjs utilizado en el capítulo Soporte global de CSS .

Actualice el archivo index.js en el directorio de páginas de la siguiente manera.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first">> <a>First Post</a></Link>
         <br/>
         <div>Next stars: {props.stars}</div>
         <img src="/logo.png" alt="TutorialsPoint Logo" />
      </>	    
   )
}

export async function getServerSideProps(context) {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const json = await res.json()
   return {
      props: { stars: json.stargazers_count }
   }
}

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 el enlace Primera publicación.

↰ Previous page Next page ↱