Next.js - Enrutamiento superficial

En Next.js, el enrutamiento superficial se refiere a navegar a la misma página pero sin llamadas a los métodos getServerSideProps, getStaticProps y getInitialProps.

Para hacer un enrutamiento superficial, usamos el enrutador con el indicador superficial como verdadero. Vea el siguiente ejemplo.

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

import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <span onClick={() => Router.push('/?counter=1', undefined, { shallow: true })}>Reload</span>
         <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 luego haga clic en el enlace Recargar y verá el siguiente resultado.