yarn create next-app blog --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
This is a starter template for Learn Next.js.
- page-based routing system(with dynamic routes) - Pre-rendering SSG / SSR
- Automatic code splitting for faster page loads
- next.js가 페이지 단위, 공통된 다위로 코르를 splitting한다.
- Client-side routing with optimized prefetching
- API Routes(with Serverless Functions)
- Development environment(with Fast Refresh)
- https://next-learn-starter.vercel.app/
- Next.js 가 제공하는 blog 예제를 확장 시켜보자
- 프로젝트 생성 - 메인 페이지(블로그 글 리스트) - 블로그 글 상세 페이 지 - 배포
- 개발자들은 자기만의 블로그를 하나씩(?) 가지고 있다.
- 꾸준히 공부하고 고민한 부분에 대한 기록
- 다른 사람들에게 지식을 공유 + 본인 스스로 기록 + 나에 대해서 홍보
yarn create next-app blog --example "https://github.com/vercel/next- learn/tree/master/basics/learn-starter"
-
vercel 아래 브렌치에 더 많은 예시가 있다.
-
prettier 설정
-
Pages 만들기
-
pages/posts/first-post.js
-
첫번째 글로 이동하기
-
<a href=”/posts/first-post”>첫번째 글</a>
- 브라우저를 refresh와 한것과 같이 파일들을 받는다.(dev tool > next work 확인)
-
<Link href=”/posts/first-post”><a>첫번째 글</a></Link>
-
두 방식의 차이
- Link로 설정한 페이지에서 필요한 것만 받는다.
- 페이지를 이동할때 최적화가 있다.
- browser에서 url을 직접 쳐서 이동하는 것과 달리
- JS 상에서 page 컴포넌트를 교체하는 것 확인(background-color를 body에 주고 navigate 해보기)
- Next.js는 Automatic Code Splitting을 제공
- 특정페이지에 접근 할 때는 해당 페이지를그릴때 필요한chunk만 로드
- ⭐️페이지 이동을 할 땐 목적지 페이지에 필요한 chunk만 추가 로드
- 프로젝트를 build한 이후에 확인할 수 있다.
- 이를 통해 성능이 최적화 된다.
- 컴포넌트를 이용하면, ⭐️ Viewport에 Link 컴포넌트가 노출되었을 때 - href 로 연결된 페이지의 chunk를 로드한다.
- 이를 통해 성능을 최적화한다.
- 현재시점(23.05.06)에서는 Link에 class를 주어도 스타일이 먹는다.
본 서비스 외부 링크로 연결 할 때는 tag 만 쓰면 됨(23.05.07 기준 내용 deprecated)Link Component에 스타일을 줄 때는tag 에 줘야 함(23.05.07 기준 내용 deprecated)
- 프레임워크 익히는 최상의 방법 -> 실제 서비스를 프레임워크로 만들기
- Link component -> Next.js 에서 제공하는 링크 기능
- Client side Navigate -> url로 접근하는 것과 달리 JS 상에서 변 경
- Prefetching -> Viewport 내 Link 페이지를 미리 페칭