Next.js-명령형 라우팅
Next.js에서 지금까지 Link react 컴포넌트를 사용하여 한 페이지에서 다른 페이지로 이동했습니다. 라우터 구성 요소를 사용하여 동일한 결과를 얻을 수있는 프로그래밍 방식도 있습니다. 일반적으로 라우터 구성 요소는 html 태그와 함께 사용됩니다.
다음과 같이 pages 디렉토리의 index.js 파일을 업데이트합니다.
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
Next.js 서버 시작
서버를 시작하려면 다음 명령을 실행하십시오-.
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
출력 확인
브라우저에서 localhost : 3000을 열면 다음과 같은 출력이 표시됩니다.
링크는 아니지만 클릭 가능한 첫 번째 게시물을 클릭합니다.