Next.js 개발자가 서버에서 렌더링되는 React 애플리케이션을 구축할 수 있도록 설계된 React를 기반으로 구축된 인기 있는 오픈 소스 프레임워크입니다. 강력한 기능 중 하나는 내장된 next/link 구성 요소 덕분에 전체 페이지를 다시 로드하지 않고도 페이지 간에 클라이언트 측 전환을 생성할 수 있는 기능입니다. 이 기사에서는 작은 Next.js 애플리케이션을 구축하여 next/link를 사용하는 방법을 알아봅니다.

다음/링크는 무엇인가요?

그만큼 다음/링크 Next.js 애플리케이션의 페이지 간 링크를 생성할 수 있는 React 구성요소입니다. 일반 HTML 앵커 태그와 달리 다음/링크 사용자가 링크를 클릭해도 전체 페이지 새로고침이 실행되지 않습니다. 대신 클라이언트 측 탐색을 사용하여 애플리케이션의 현재 상태를 유지하면서 새 페이지를 로드합니다. 이는 귀하의 애플리케이션이 사용자에게 더 빠르고 더 반응적으로 느껴지게 된다는 것을 의미합니다.

통사론: 사용 구문 링크 간단합니다. 다음에서 구성요소를 가져올 수 있습니다. 다음/링크 기준 치수:

첫 번째 문자 제거 엑셀

// Import import Link from 'next/link'; // Link component New Page>

그런 다음 JSX 코드의 Link 구성 요소를 사용하여 다른 페이지에 대한 링크를 만들 수 있습니다. 그만큼 href prop은 링크하려는 페이지의 URL과 하위 요소를 지정합니다. 링크 구성 요소는 링크의 내용입니다.

NextJS 애플리케이션 생성: 터미널이나 명령 프롬프트를 열고 다음 명령을 실행하십시오.

npx create-next-app next-link>

앱/프로젝트 디렉터리로 이동합니다.

cd next-link>

프로젝트 구조:

NextJs 다음/링크

'다음/링크'의 기본 사용법: 이 예에서는 두 페이지로 구성된 간단한 Next.js 애플리케이션을 만듭니다. 집 그리고 ~에 대한 . 우리는 사용할 것이다 다음/링크 페이지 사이에 링크를 생성합니다.

라는 새 디렉터리를 만듭니다. 페이지 프로젝트의 루트에 있습니다. 여기에 Next.js 페이지를 저장하게 됩니다. 라는 새 파일을 만듭니다. index.js 안에 페이지 예배 규칙서. 이것은 집 귀하의 신청서 페이지. 다음 코드를 추가하세요. index.js:

파일 이름: index.js

CSS 밑줄 텍스트

자바스크립트

비교 메소드 자바

>

>

다음 명령을 사용하여 개발 서버를 실행합니다.

npm run dev>

웹 브라우저를 열고 다음으로 이동하십시오. http://localhost:3000 . 당신은 집 목록이 포함된 신청서 페이지 블로그 게시물. 링크 중 하나를 클릭하면 개별 게시물 페이지로 이동합니다. 당신은 블로그 해당 게시물과 함께 게시 강타 URL에서.

산출:

스프링 부트

NextJs 다음/링크

이 예에서는 다음을 사용하는 방법을 보여주었습니다. 다음/링크 동적 라우팅을 사용합니다. 우리는 개인을 위한 새로운 페이지 템플릿을 만들었습니다. 블로그 게시물 및 사용 링크 각 개별 게시물 페이지에 대한 링크를 만듭니다. 우리는 또한 사용라우터 훅에서 다음/라우터 액세스하려면 강타 URL의 매개변수를 선택하고 해당 항목을 표시합니다. 블로그 우편.

결론적으로, 다음/링크 Next.js 애플리케이션의 탐색을 단순화하여 빠르고 반응성이 뛰어난 클라이언트 측 렌더링을 가능하게 하는 강력한 도구입니다. 간단한 구문과 사용 용이성으로 인해 페이지와 동적 라우팅 간의 링크를 생성하는 개발자들 사이에서 인기가 높습니다.