Next js 공홈 뽀개기

13버전 이전에는 Pages Router를 사용했으나 13버전 부터 App Router가 소개되었습니다. app 디렉터리에서 작동하며 호환성을 위해 pages 디렉터리와 나란히 동작하는 것이 가능하다고 합니다. app 디렉터리 내부의 컴포넌트는 React Server

서버 사이드에서 fetch 사용서버 사이드에서 써드 파티 라이브러리 사용클라이언트 사이드에서 Route Handler 사용클라이언트 사이드에서 써드 파티 라이브러리 사용1번과 2번은 next에서 api를 구현하는 것이 아니라면 몰라도 괜찮은 내용이라고 생각합니다.Nex

가능하다면 서버 사이드에서 데이터를 가져오는 것을 추천합니다. 데이터를 가져오는 작업과 렌더링 작업을 같은 환경에서 할 수 있고 엑세스 토큰과 API 키 값 같은 민감한 정보를 노출하지 않아도 됩니다. 서버 컴포넌트, Route Handlers, 서버 Actions를

form을 submit 했을 때 동작을 서버 액션으로 정의할 수 있습니다. 서버 액션은 서버 컴포넌트에 정의할 수 있고 클라이언트 컴포넌트에서 호출할 수 있습니다. 서버 액션은 Next의 캐싱, revalidation 아키텍처와 연동하여 form이 submit 되었을

렌더링은 작성한 코드를 UI로 바꿔주는 것인데요. Next에서 렌더링은 서버와 클라이언트 양쪽에서 모두 이뤄질 수 있습니다. 하지만 서버와 클아이언트 각각의 환경에 더 어울리는 작업이 있고 이를 이해하는 것이 Next를 효율적으로 사용할 수 있는 방법입니다."use c

Next는 렌더링 작업과 데이터 fetch 작업을 캐싱하여 어플리케이션의 성능을 개선합니다. 이번에는 Next의 캐싱 메커니즘과 캐싱을 설정하는 API에 대해서 알아보겠습니다.주의사항Next를 이해하는 데에 도움이 되지만 Next를 사용하기 위한 필수 지식은 아닙니다.

이미지는 웹사이트 페이지 로딩에 있어 상당히 큰 부분을 차지합니다. 이는 초기 페이지 로딩 속도에 있어서도 영향을 미치게됩니다. Next의 Image 컴포넌트는 html의 img 태그를 확장해서 자동으로 이미지 최적화를 합니다.webP, avif와 같은 최신 이미지 포