[Nextra] Next.js 링크 사용하기

Nextra에서 Next.js 링크 사용하기

---

모든 Markdown관련 링크는 자동으로 Next.js 링크로 변환되고 대상 페이지가 prefetch됨을 의미한다.

링크를 클릭하면 전체 페이지를 로드하지 않고 SPA처럼 클라이언트 측에 페이지가 로드된다.

 

루트 아래의 링크인 홈 (/)으로 링크 시켜주는 코드를 생성해보자.

사용방법은 아래와 같다.

## `[here](/)` 사용

Click [here](/) to read more.

출력결과

[here](/) 사용한 결과값

 

위 코드는 아래와 같이 동작한다.

import Link from 'next/link'

## `<Link href="/">here</Link>` 사용

Click <Link href="/">here</Link> to read more.

출력결과

<Link href="/">here</Link>를 사용한 결과값

 

하지만 Nextra에서는 위 출력결과에서 보면 알다싶이 here에 하이퍼링크가 표시되지 않는다. (here을 누르면 동작은 된다.)

이 기능을 사용하면 Nextra 페이지 간을 빠르고 원활하게 탐색할 수 있다.