Next.js - Perutean Imperatif
Di Next.js, sejauh ini kami menggunakan komponen Link react untuk menavigasi dari satu halaman ke halaman lain. Ada cara terprogram juga untuk mencapai hal yang sama menggunakan komponen Router. Umumnya komponen Router digunakan dengan tag html.
Perbarui file index.js di direktori halaman sebagai berikut.
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 HomePage
Mulai Server Next.js
Jalankan perintah berikut untuk memulai server -.
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
Verifikasi Output
Buka localhost: 3000 di browser dan Anda akan melihat output berikut.
Klik pada Posting pertama yang bukan merupakan tautan tetapi dapat diklik.