Next.js - Enrutamiento imperativo
En Next.js, hasta ahora estamos usando el componente Link react para navegar de una página a otra. También hay una forma programática de lograr lo mismo utilizando el componente Router. Generalmente, el componente Router se usa con etiquetas html.
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('/posts/one')}>First Post</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 HomePageInicie 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 successfullyVerificar salida
Abra localhost: 3000 en un navegador y verá el siguiente resultado.
Haga clic en Primera publicación, que no es un enlace, pero se puede hacer clic.
