Next.js-페이지

Next.js에서는 파일 시스템 라우팅 기능을 사용하여 페이지를 만들고 페이지 사이를 이동할 수 있습니다. 우리는 사용할 것입니다Link 페이지 간 클라이언트 측 탐색을 갖도록 구성 요소.

Next.js에서 페이지는 React Component이며 pages 디렉토리에서 내 보냅니다. 각 페이지는 파일 이름에 따라 경로와 연결됩니다. 예를 들면

• pages/index.js '/'경로와 연결됩니다.

• pages/posts/first.js '/ posts / first'경로와 연결됩니다.

환경 설정 장 에서 만든 nextjs 프로젝트를 업데이트 해 보겠습니다 .

다음 내용으로 post 디렉토리와 first.js를 그 안에 만듭니다.

export default function FirstPost() {
   return <h1>My First Post</h1>
}

홈 페이지로 돌아가려면 링크 지원을 추가하십시오. 다음과 같이 first.js 업데이트-

import Link from 'next/link'

export default function FirstPost() {
   return (
      <>
         <h1>My First Post</h1>
         <h2>
            <Link href="/">
               <a>Home</a>
            </Link>
         </h2>
      </>	  
   )
}

첫 페이지로 이동하려면 홈 페이지에 링크 지원을 추가하십시오. 다음과 같이 index.js 업데이트-

import Link from 'next/link'

function HomePage() {
   return (
      <>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first"><a>First Post</a></Link>
      </>	    
   )
}

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을 열면 다음과 같은 출력이 표시됩니다.

첫 번째 링크를 클릭하면 다음 출력이 표시됩니다.