Next.js - Link Route

https://nextjs.org/docs/pages/building-your-application/routing
해당 공식문서를 참고하였습니다.

Link, Route, a 태그의 차이점

Next.js에는 route.push()가 있고, Link가 있다.

<Link href="/about"><a>About me</a></Link>

<a href="/about">About me</a>

<button onClick={() => router.push("/about")}>About me</button>

위 코드들은 모두 /about 이라는 경로로 페이지 이동 즉 라우팅을 해주는 역할을 한다.
모두 같은 역할을 하는것처럼 보이지만, 가장 큰 차이점은 SEO(검색엔진 최적화) 이다.

Route

router.push()를 이용하는 경우는 window.location과 비슷하게 동작한다.
a태그를 만들지 않기 때문에 해당 링크가 크롤링 되지않아 SEO에 불리하다.
이러면 Next.js를 사용할 이유는 거의 없다고 보면된다

Link

Link태그는 a태그를 생성하기 때문에 크롤링되어 SEO에 유리함. 페이지를 다시 로드하지 않고
SPA동작처럼 "보이게" 만든다.

a

이 태그는 리액트를 사용하면서 부터 사용빈도가 많이 낮아졌다. 거의 사용하지 않았다고 봐도 무방함. 순수HTML 요소이며 새 페이지의 URL로 이동시키는 하이퍼링크 생성, 페이지가 완전히 새로고침 된다.

Link props 정리

1. as

이동할 경로 혹은 URL

<Link href="/" as="브라우저의 주소창에 표시될 URL">
    ...
</Link>

2. passHref

기본값 : false
next Link에서 하위 컴포넌트로 href 속성을 전달해주는 역할

<Link href={{ pathname: "post", query: { id: post_id } }} passHref>
  <ChildATag>A태그</ChildATag> // 자식태그가 styled component a태그인 경우
</Link>

위처럼 passHref를 넣어서 작성해야 자식 컴포넌트의 a태그에 href가 전달된다고 한다.

3. prefetch

기본값 : true
뷰포트 내의 Link 태그 데이터만 미리 받아온다.

• 파일의 전체 Link태그가 아닌 "뷰포트 내"인것을 참고, 전체 페이지가 아니라 스크롤 안의 보이는 요소들을 기준으로 한다.

• prefetch=false 설정을 통해 끌 수 있지만, 그래도 마우스 오버 시에는 작동한다.

• production 모드에서만 실행된다.

  따라서 개발모드로는 확인할 수 없고 production 모드로 돌린 후 네트워크 탭을 통해 확인이 가능

4. replace

기본값 : false
push대신 replace하는 속성
뒤로가기 history에 쌓이지 않고 대체된다

<Link href="/" replace>
    ...
</Link>

5. scroll

기본값 : true
화면 이동시 페이지 상단으로 스크롤
스크롤 자동으로 상단으로 올라가는 부분 제거

<Link href="/" scroll={false}>
   ...
</Link>

6. shallow

기본값 : false
서버단에서 실행되는 메소드들을 재실행하지 않고 이동할지 여부
getStaticProps, getServerSideProps, getInitialProps를 실행시키지 않고 현재 URL을 업데이트

리렌더링이 일어나지 않는다고 함

<Link href="/" shallow={true}>
    ...
</Link>

Next는 페이지기반 라우팅

Index Routes

router는 자동으로 'index'라는 파일을 자동으로 루트 디렉토리에 연결시킨다.

pages/index.js → /
pages/blog/index.js → /blog

Nested Routes

router는 nested 파일(폴더안의 폴더안의.... 파일)에도 사용가능. 만약 중첩된 폴더 구조를 가지고 있다면 파일들은 자동으로 다음과 같이 연결된다.

pages/blog/first-post.js → /blog/first-post
pages/dashboard/settings/username.js → /dashboard/settings/username

위처럼 각 폴더 이름으로 접근하면 index.js 파일에서 만드는 컴포넌트를 기준으로 해당 경로의 페이지가 설정이 된다. index.js 파일이 아니면 아래 Nested routes에 나온 것처럼 해당 파일의 이름으로 경로가 설정된다.

각 파일에서 export default 로 내보내지는 컴포넌트를 기준으로 페이지가 만들어진다. 다른 export 가 있어도 export default 가 기준이 된다.

동적 세그먼트 연결

동적으로 연결시키기 위해서는 [] 문법을 사용해야함 이렇게 하면 파라미터의 이름으로 연결된다.

React에서는 [] 대신 :00 으로 사용하는데 별로 혼동되진 않을거같다.
Next

pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
pages/[username]/settings.js → /:username/settings (/foo/settings)
pages/post/[...all].js → /post/* (/post/2020/id/title)