Next.js-라우팅

Next.js는 파일 시스템 기반 라우터를 사용합니다. 페이지를 추가 할 때마다pagesurl을 통해 자동으로 사용할 수 있습니다. 다음은이 라우터의 규칙입니다.

Index Routes− 폴더에있는 index.js 파일은 디렉토리의 루트에 매핑됩니다. 예를 들면-
- pages / index.js는 '/'에 매핑됩니다.
- pages / posts / index.js는 '/ posts'에 매핑됩니다.
Nested Routes− 라우터 URL이 자동으로 지정되므로 페이지 디렉토리의 모든 중첩 폴더 구조. 예를 들면-
- pages / settings / dashboard / about.js는 '/ settings / dashboard / about'에 매핑됩니다.
- pages / posts / first.js는 '/ posts / first'에 매핑됩니다.
Dynamic Routes− 이름이 지정된 매개 변수를 사용하여 URL을 일치시킬 수도 있습니다. 동일한 경우 대괄호를 사용하십시오. 예를 들면-
- pages / posts / [id] .js는 '/ posts / : id'에 매핑되며 '/ posts / 1'과 같은 URL을 사용할 수 있습니다.
- pages / [user] /settings.js는 '/ abc / settings'와 같은 URL을 사용할 수있는 '/ posts / : user / settings'에 매핑됩니다.
- pages / posts / [... all] .js는 '/ posts / *'에 매핑되며 '/ posts / 2020 / jun /'과 같은 URL을 사용할 수 있습니다.

페이지 연결

Next.JS는 링크 반응 구성 요소를 사용하여 클라이언트 측의 페이지를 연결할 수 있습니다. 그것은 다음과 같은 속성을 가지고 있습니다-

href− 페이지 디렉토리의 페이지 이름. 예를 들면/posts/first pages / posts 디렉토리에있는 first.js를 참조합니다.

같은 것을 보여주는 예제를 만들어 봅시다.

이 예에서는 index.js 및 first.js 페이지를 업데이트하여 데이터를 가져 오기 위해 서버 히트를 만들 것입니다.

Global CSS Support 장 에서 사용 된 nextjs 프로젝트를 업데이트하겠습니다 .

다음과 같이 pages 디렉토리의 index.js 파일을 업데이트합니다.

import Link from 'next/link'
import Head from 'next/head'

function HomePage(props) {
   return (
      <>
         <Head>
            <title>Welcome to Next.js!</title>
         </Head>
         <div>Welcome to Next.js!</div>
         <Link href="/posts/first">> <a>First Post</a></Link>
         <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을 열면 다음과 같은 출력이 표시됩니다.

첫 번째 게시물 링크를 클릭합니다.