코딩/Next

개요캐싱 2025.01.05 - [코딩/Flex프로젝트] - 재테크 블로그 프로젝트 (12) - 리팩토링 [Next.js caching ] 이전 글에서 Next의 캐싱 중 Request Memoization, DataCache에 대하여 다루어 보았다 Next.js Caching (latest ver.) Next.js에선 여러가지 캐싱 방식을 제공하고, 각 캐싱 방식들은 다른 목적, 시기, 실행 위치가 다르다. Next.js에서는 성능 향상과 비용 절감을 목적으로 선택 해제하지 않는 이상 가능한 많이 캐싱한다. 아래 사진은 빌드 시 그리고, 정적 경로가 처음 방문될 때의 동작을 보여준다. 캐싱 동작은 경로가 (정적,동적) 렌더링 방식과 데이터의 캐싱 여부와 초기 방문 혹은 후속 네비게이션에 따른 요청인지에..

Next에서의 Routing 방식app폴더 내부의 파일 시스템으로 경로를 표시해 라우팅을 제공최상단에 위치한 page.tsx는 '/' root경로에서 보여주는 페이지를 담당폴더에 page.tsx가 존재하지 않는경우 해당 폴더 경로로 접근 시 404오류 발생다만 폴더가 중간 경로로 사용되는 경우 경로명으로는 사용가능하단의 사진의 경우 middle/basement로 접근시 page.tsx의 내용에 해당하는 페이지를 보여줌Not Found 페이지 파일404오류가 발생할 때 보여주는 페이지not-found.tsx로 최상단에 생성Linknext/link에서 import해오며  기존의 a태그의 역할을 함. href에 이동하려는 폴더구조 경로를 입력한다.HomeusePathnamenext/navigation에서 가져..

수동 설치원하는 프로젝트 폴더명 선언 후 이동npm initnpm install react@latest next@latest react-dom@latest- 최신 버전 react, next, reactdom을 설치package.json에 다음 내용을 추가 (next js를 실행시키는 명령어 선언) "scripts": { "dev" : "next dev" },page.tsx 파일을 app이라는 폴더에 넣기기본적으로 next js가 해당 app폴더의 page파일을 찾아 실행시킴npm run dev 명령어를 실행 시 4번의 선언을 통해  next를 실행시키며 5번의 page파일의 확장자를 ts로 선언한 경우 자동으로 typescript가 설치가 됨이후 자동으로 layout.tsx또한 기본적인 구조로 ..