다른 페이지 생성 방법
신기하게도 pages 디렉토리 아래에 JS 파일을 생성하니 경로가 URL 경로가 되었다.
그 경로로 접속하니 바로 그 페이지로 이동
Link Component
웹사이트에서 페이지를 연결할 땐 <a> 태그를 사용
Next에서는 next/link 애플리케이션의 페이지를 연결할 수 있음
리액트와 비슷하게 Link 태그를 사용하여 옮기지만
더욱 단순히(?) 디렉토리를 사용하여 이동하는 모습
import Link from "next/link" // 를 사용하여 link를 import 
그 후 우리의 / 경로에 다음과 같이 Link와 href를 활용하여 경로지정
(아래 text-decoration은 내가 직접 마우스를 올린 것)
자, 다음으로는 first-post.js에 홈으로 이동하도록 코드를 짜보자
다만 여기서 한 가지 신기한 것은 title까지 바뀌어 표시된다는 것
Client-Side Navigation
이 Link 구성요소는 동일한 Next.js 앱의 두 페이지간 Client-Side Navigation을 가능하게 함
Client-Side Navigation은 페이지 전환이 브라우저에서 수행하는 기본 탐색보다 빠른 JS를 사용하여 발생함을 알 수 있음
확인할 수 있는 방법
- 브라우저 개발자도구로 CSS 속성에서 Background 컬러를 바꿈
- 두 페이지 사이를 앞뒤로 왔다갔다해봄 (링크를 사용하여)
- 두 페이지 전환 사이에 노란색 배경이 "잠깐" 지속 되는 것을 볼 수 있음
이는 브라우저가 전체 페이지를 로드 하지 않고 Client-Side Navigation가 작동하고 있음을 나타냄
여기에서 Link를 사용하면 노란색이 계속 유지 되지만 a 태그를 사용시엔 깜빡하면서 색이 사라지는 것을 볼 수 있음 
코드 분할 및 미리 가져오기 (Code splitting and prefetching)
Next.js는 자동으로 코드 분할을 수행하므로 각 페이지는 해당 페이지에 필요한 항목만 로드함
즉, 홈페이지가 렌더링 될 때 다른 페이지에 대한 코드는 처음에 공개되지 않음
이럴 경우에 페이지가 수백 페이지더라도 홈페이지가 빠르게 로드됨
특정 페이지에 에러가 존재하더라도 켜져있는 페이지는 에러없이 멀쩡히 켜짐
또한, Link 구성요소가 브라우저의 뷰포트에 나타날 때마다
Next.js는 백그라운드에서 링크된 페이지에 대한 코드를 자동으로 미리 가져옴
링크를 클릭하면 대상 페이지의 코드가 이미 백그라운드에 로드되고 페이지 전환이 거의 즉각적으로 이루어짐
요약
Next.js는 코드 분할, Client-Side Navigation 및 프리패치 (Production 에서)를 통해 애플리케이션을 자동으로 최적화하여 최상의 성능을 발휘
pages 아래에 경로를 만들고 내장에 구성된 Link 요소를 사용하여
라우팅 라이브러리가 필요하지 않음
