NextJs

현재 폴더에 next.js의 최신 버전을 설치하는 명령어npm run dev개발 모드에서 Next.js 애플리케이션 실행src/app/layout.js 웹페이지의 기본적인 골격 구성npm run build .next 폴더에 실서비스로 배포 가능한 애플리케이션 생성npm

이정환 강사님의 한 입 크기로 잘라먹는 Next.js강의를 들으며 정리한 내용.파일 시스템 기반이 간편한 페이지 라우팅 제공.다양한 방식의 사전 렌더링 제공서버사이드 렌더링 (SSR) : 요청이 들어올 때 마다 사전 렌더링을 진행 함.요청을 받을 때마다 페이지를 생성,

page.tsx 파일만 페이지로 설정 됨.(search.tsx, index.tsx 등 X)~/search : app/search/page.tsx~/book/1 : app/book/id/page.tsxlocalhost:3000/search?q=1쿼리스트링이나 파라미터 등

클라이언트 컴포넌트에는 Async 키워드 사용 불가.브라우저에서 동작시 문제를 일으킬 수 있기 때문에 권장X.기존의 getServerSideProps, getStaticProps... 등을 대체 가능.props 등으로 넘겨줄 필요 없이 필요한 컴포넌트에서 직접 불러올

Next 서버측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능.next의 페이지들은 어떤 기능을 사용하느냐에 따라 자동으로 분류됨.static page(정적 페이지)풀 라우트 캐시 적용.동적 페이지가 아니면 모두 정적 페이지로 설정(default).dyna

잘게 쪼게진 작은 용량의 데이터를 클라이언트로 연속적으로 전송하는 기술.모든 데이터가 불러와지지 않은 상태로도 데이터에 접근 가능.사용자에게 긴 로딩 없이 좋은 경험을 제공할 수 있음.스트리밍.일단 뭐라도 빠르게 보여줄 수 있음.로딩바 같은 대체 UI 표시 등.Dyna

브라우저에서 호출할 수 있는 서버에서 실행되는 비동기 함수."use server"해당 함수는 next 서버에서만 실행되는 서버 액션으로 실행 됨.컴포넌트 안의 함수가 아니라 따로 해당 함수를 파일로 설정할 때는, 파일의 최상단에 위치.장점.코드가 간결해짐.서버측에서만

패러렐 라우트 Parallel Route 병렬 라우트. 하나의 화면 안에 여러 개의 페이지를 병렬로 함께 렌더링 시켜주는 패턴. 페이지 : page.tsx 파일로 작성되는 컴포넌트. 복잡한 구조의 UI 에 유용하게 활용됨. @folderName 슬롯. 병

http archive에 따르면 이미지는 평균적으로 웹페이지 용량의 58%를 차지.다양한 이미지 최적화 기법들.webp, AVIF 등의 차세대 형식으로 변환.디바이스 사이즈에 맞는 이미지 호출.레이지 로딩 적용.블러 이미지 활용....=> Next에서는 해당 기능을 자