Next.js - Định tuyến bắt buộc
Trong Next.js, cho đến nay chúng tôi đang sử dụng thành phần Phản ứng liên kết để điều hướng từ trang này sang trang khác. Có một cách lập trình cũng như sử dụng thành phần Bộ định tuyến. Nói chung, thành phần Router được sử dụng với các thẻ html.
Cập nhật tệp index.js trong thư mục trang như sau.
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 HomePageKhởi động Máy chủ Next.js
Chạy lệnh sau để khởi động máy chủ -.
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 successfullyXác minh đầu ra
Mở localhost: 3000 trong trình duyệt và bạn sẽ thấy kết quả sau.
Nhấp vào Bài đăng đầu tiên không phải là một liên kết nhưng có thể nhấp được.
