📍create-next-app
- 터미널에서 Next.js 앱을 빠르게 만드는 툴 체인
- cli 에서 프로젝트 완성에 필요한 정보를 전달
npx create-next-app@latest
docs에서 제공하는 스타터 템플릿
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/navigate-between-pages-starter"
📍라우팅
📂/pages
- 파일명으로 route가 정해진다
- /pages/index.js 가 root page. 즉, / 에 해당
- /pages/posts/first-post.js 파일은 /posts/first-post 로 라우팅된다
📍Link 컴포넌트
- 앱 내의 페이지들 간에 navigation을 위해 Link 컴포넌트를 사용
(<a /> 엘리먼트는 외부 페이지로 이동할 때 사용)
- import
import Link from 'next/link';
- 사용법은 <a /> 와 동일
Link 컴포넌트는 pre-fetching을 지원한다
- Link 컴포넌트에 담긴 페이지를 백그라운드에서 프리페칭하여 네비게이션 속도가 빠름
📍Client-side Navigation
Link 컴포넌트는 같은 Next.js 앱 내에서 클라이언트 사이드 네비게이션을 가능케 한다
🤔클라이언트 사이드 네비게이션이란?
- JavaScript를 이용하여 페이지를 이동하는 것
- 브라우저의 기본 네비게이션보다 빠르다
(브라우저는 full refresh를 실행하기 때문에 네비게이션이 느림)