<aside>
👨🏻💻 Next.js 13이 릴리즈되었지만, 공식 문서의 예제 코드는 12 기준으로 작성되어 있습니다.
</aside>
<aside>
💡 13에서 변경된 점이나 12에서 13으로 업그레이드하는 내용은 아래 문서를 참고해주세요.
</aside>
Next.js 13
Upgrade Guide | Next.js
공식 문서
🙌 전체 번역본이 아닌 공부하면서 기록한 내용이라 의역, 오역이 있을 수 있습니다.
발견하시면 댓글이나 DM으로 알려주세요!
<aside>
💡 아래 사용된 자료들의 출처는 모두 공식 문서입니다.
</aside>
Create your first app
Create a Next.js App
- React를 사용해서 웹 애플리케이션을 만들 때 불편한 점
- Webpack과 같은 번들러와 Babel 같은 컴파일러가 별도로 필요
- Code splitting과 같은 최적화를 해야 함
- 성능이나 SEO를 위해 정적 사전 렌더링이 필요하거나, SSR, CSR을 사용하고 싶을 수 있음
- React App을 데이터 저장소에 연결하기 위해 서버 사이드 코드를 작성해야 될 수도 있음
- Next.js가 위와 같은 문제들을 해결하기 위해 갖추고자 하는 내장 기능의 목표
Navigate Between Pages
Pages in Next.js
- pages 폴더에 JS 파일을 만드는 것으로 해당 페이지에 파일의 path인 URL로 접근 가능
Link Component
-
Link Component를 사용해서 페이지간 연결이 가능
import Link from 'next/link';
-
<Link>는 클라이언트 측에서 네비게이션이 가능하게 하고 props를 받아서 컨트롤 할 수 있음