Link
next/link에 있는 Link컴포넌트내에 a태그를 사용하면 Client-Side로 다른 페이지로 이동할 수 있다.
pages/index.js
import Head from 'next/head';
import Link from 'next/link';
export default function Home() {
return (
<div className='container'>
<Head>
<title>Create Next App</title>
<link rel='icon' href='/favicon.ico' />
</Head>
<main>
<h1 className='title'>
Read{' '}
<Link href='/posts/first-post'>
<a>this page!</a>
</Link>
</h1>
...pages/posts/first-post.js
import Link from 'next/link';
export default function FirstPost() {
return (
<>
<h1>First Post</h1>
<h2>
<Link href='/'>
<a>Back To Home</a>
</Link>
</h2>
</>
);
}
Client-side Navigate
공식문서에서 클라이언트 사이드에서 동작하는 Link태그에 대해 구체적으로 설명하고 있다. Link태그로 이동했을 때 다시 페이지를 로드하는 것이 아니라 이미 로드된 페이지들 사이를 이동한다는 것을 보여주기 위해 개발자도구에서 background: yellow로 설정하고 이동해보라고 한다. 새로고침이 되지 않기 때문에 배경 색상은 Link태그 사이를 이동할 때 계속 유지된다.
Code Splitting and Prefetching
Next.js는 자동으로 코드 스플리팅을 수행하며, 각 페이지에서 필요한 것만 로드한다고 한다. 예를 들어 홈에 접속했을 때 다른 페이지의 정보들은 로드하지 않는다. 리액트에서도 구현할 수 있지만 Next.js는 자동으로 처리해준다니 참 편한 것 같다.
Prefetching
Next.js의 프로덕션 빌드에서 링크 구성 요소가 브라우저의 뷰포트에 나타날 때마다 Next.js는 백그라운드에서 링크된 페이지의 코드를 자동으로 프리패치 한다고 한다! 그렇게 함으로서 링크를 클릭할 때쯤이면, 대상 페이지의 코드는 이미 백그라운드에 로드되며, 페이지 전환은 거의 즉시 로드할 수 있게 된다.
Structure
Pages 폴더 내에 파일을 만들면 되고 Link 컴포넌트를 사용하면 된다. 별도의 Routing 라이브러리는 필요하지 않다고 한다.
Link 컴포넌트에 대해 더 자세히 알고 싶을 때는 아래를 참고하자.
Link - 외부로 연결 / classname
- 외부로 링크를 연결하는 경우에는
a태그를 사용하자.- classname을 추가해야 하는 경우에는
a태그에 추가하자. 아래처럼!import Link from 'next/link' export default function LinkClassnameExample() { // To add attributes like className, target, rel, etc. // add them to the <a> tag, not to the <Link> tag. return ( <Link href="/"> <a className="foo" target="_blank" rel="noopener noreferrer"> Hello World </a> </Link> ) } // Take a look at https://nextjs.org/docs/api-reference/next/link // to learn more!
공유하는 것을 좋아하는 프론트엔드 개발자