Next.js - app router
1.[Next.js] App Router
Next.js 13 버전에 추가된 라우터로 page router를 대체한다.next.js를 최신버전으로 설치해준다.npx create-next-app@latest 프로젝트명그러면 질문 항목 중 app router를 사용할 것이냐는 항목이 나오는데 yes를 선택해주면된다
2.[Next.js] 쿼리 스트링
특정 데이터를 서버에 전달하거나 특정 정보를 요청하기 위해 사용된다. 보통 URL의 끝에 ? 기호 뒤에 붙으며, key=value 형식으로 데이터를 표현합니다. 여러 값을 전달할 때는 &로 구분한다.query=apple: 검색어는 apple.sort=asc: 정렬 순서
3.[Next.js] 경로(Path) 파라미터
경로 파라미터는 URL 경로의 일부로 포함되어 있으며, 리소스를 고유하게 식별한다. 경로 파라미터는 보통 URL의 슬래시(/)를 통해 구분되며, RESTful API 설계에서 많이 사용https://example.com/users/123여기서 123은 user
4.[Next.js] 레이아웃 설정
공통된 레이아웃을 모든 페이지 또는 특정 페이지에 적용한다.특정 폴더 밑에 layout이라는 이름으로 파일을 만들면 폴더 내 모든 페이지 컴포넌트에 똑같이 적용되는 레이아웃이 된다.layout.tsx는 해당 폴더의 모든 페이지의 레이아웃으로 적용된다.layout이 있는
5.[Next.js] 리액트 서버 컴포넌트
1. 개요 > 오직 서버측에서만 실행되는 컴포넌트 기존 next.js는 js bundle을 브라우저로 넘길 때 'react hook, 이벤트 핸들러' 등 상호작용이 있는 컴포넌트와 상호작용이 없는 컴포넌트 둘 다 넘긴다. 상호작용이 없는 컴포넌트는 굳이 브라우저에
6.[Next.js] 네비게이팅
기존 페이지 라우터 방식과 비슷하지만 서버 컴포넌트라는 개념이 추가되어 방식이 변경된다.앱 라우터 js 번들에는 클라이언 컴포넌트만 포함되어 서버 컴포넌트는 포함이 되지않아 서버 컴포넌트로 구성된 RSC Payload도 함께 전달해주어야한다.link를 import 해주
7.[Next.js] 데이터 페칭
앱 라우터에서 데이터를 가져오는 방법getServerSideProps, getStaticProps 등등 특수한 함수를 사용데이터 드릴링으로 props를 넘겨줘야하는다는 문제점이 있는데 앱라우터에서 개선데이터가 필요한 컴포넌트에서 직접 데이터를 페칭한다.데이터를 불러올
8.[Next.js] 데이터 캐시
fetch 메서드를 활용해 불러온 데이터를 Next 서버에 보관하는 기능(캐싱)fetch메서드의 두번째 인수에 객체 형태로 설정하여 사용가능하다. (axois 등에서는 불가)
9.[Next.js] 리퀘스트 메모이제이션(Request Memoization)
1. 개요 > 여러 api 요청 중 중복으로 발생하는 요청을 캐싱해서 한반만 요청 수 있게 자동으로 데이터 페칭을 최적화 동일한 api호출이 반복되면 리퀘스트 메모이제이션으로 캐싱하여 동일한 요청에 대응한다. 데이터 캐시와는 다르다 여러 요청에 대한 중복에 대해서
10.[Next.js] 풀라우트 캐시 (Full Route Cache) - 최적화
1. 개요 > Next 서버측에서 빌드타임에 특정 페이지의 랜더링 결과를 캐싱하는 기능 캐싱된 특정 페이지를 다시 요청하면 캐시에 저장된 내용을 전송한다.
11.[Next.js] 라우트 세그먼트 옵션
강제로 특정 페이지를 static 또는 dynamic 페이지로 설정하는 등 페이지의 동작을 강제로 설정약속된 이름의 변수를 설정하고 값을 설정해서 내보내면 페이지의 설정을 강제로 조정할 수 있는 기능 - 라우트 세그먼트 옵션특정 페이지의 유형을 강제로 static, d
12.[Next.js] 클라이언트 라우터 캐시
브라우저에 저장되는 캐시로 페이지 이동의 효율성을 위해 페이지의 일부 데이터를 캐싱여러 개의 페이지가 공통된 레이아웃을 사용하면 브라우저에서 여러번 같은 내용을 요청하는 비효율 성이 있다.이를 해결하기 위해 클라이언트 라우터 캐시를 만들어 페이지에 접속하려할 때 RSC
13.[Next.js] 스트리밍
스트리밍 : 서버에서 클라이언트로 데이터를 넘겨야할 때 보내야할 데이터가 크거나 준비시간이 오래걸릴 때 데이터를 여러개의 조각으로 나눈 후 하나씩 전송한다. 데이터가 모두 불러와지지 않은 상태에서도 먼저 불러올 수 있는 컴포넌트를 불러오고 나중에 랜더링이 오래걸리는 페
14.[Next.js] 에러 핸들링
오류 발생 시 미리 만들어둔 오류페이지를 보여주는 것에러가 발생한 대상과 같은 위치에 에러가 발생했을 때 보여줄 페이지 컴포넌트인 error.tsx(jsx)를 만들어준다. (하위 폴더까지 적용)error.tsxuse client로 클라이언트 페이지로 설정(서버나 클라이
15.[Next.js] 서버 액션
1. 개요 > 브라우저에서 호출 할 수 있는 서버에서 실행되는 비동기 함수 서버액션을 활용하면 api를 만들필요없이 함수 하나만으로 브라우저에서 Next 서버측에서 실행되는 함수를 직접 호출할 수 있다. 2. 활용 특정 폼 특정 양식에서 사용 예시 input
16.[Next.js] 패럴랠 라우트(Parallel Route)
하나의 화면에 여러개의 페이지를 병렬로 랜더링 시켜주는 패턴고급 라우팅 패턴 중 하나로 sidebar 나 feed 등 여러 페이지(page.tsx에 작성되는 페이지 컴포넌트)를 병렬로 랜더링 시켜준다.소셜네트워크나 대시보드 등에 구축parallel 폴더를 만들어준다.폴
17.[Next.js] 인터셉팅 라우트(Intercepting Route)
특정 조건일 때 원래 페이지가 아닌 다른 페이지를 랜더링하게 설정하는 기술사용자가 특정 경로로 접속해 새로운 페이지를 요청할때 페이지를 가로채서 다른 페이지를 대신 랜더링한다.초기접속요청이 아닐때만 인터셉팅이 된다.즉, 사용자가 초기 접속이 아닌 클라이언트 방식(lin
18.[Next.js] 이미지 최적화
모든 웹 용량에서 이미지가 가장 많은 용량을 차지하는 이미지를 최적화이미지 컴포넌트 활용이미지는 webP나 AVIF 등 경량화된 포맷을 활용하는 것이 아니라 jpeg나 png를 사용한다.필요한 이미지부터 보여주고 추가적으로 랜더링하는 것이 아닌 당장 필요없는 이미지까지
19.[Next.js] 검색엔진최적화(SEO)
검색엔진 결과 페이지(SERP)에서 더 높은 순위에 표시되도록 최적화하는 과정Metadata를 설치해준다.index 컴포넌트(page) 위에 metadata를 아래와 같이 작성해준다.그러면 메타 태그를 내용에 맞게 채워넣어준다. 여기서 openGraph는 sns에 들어
20.[Next.js] 배포하기
window npm i -g vercelmac ossudo npm i -g vercel명령어vercel loginvercel 로그인 수단을 선택하여 로그인명령어vercel아래 질문들이 나온다.계정확인어떤 계정에 배포할지 (내가 가입한 vercel 선택)이미 존재하는
21.[Next.js] app router에서 context api 사용
1. 소개 > next.js app router에서 context api를 사용하는 법은 typescript와 같이 소개한다. 2. 코드 소개 1) context 파일 생성 MyContext.tsx 인터페이스(타입) 정의 data : 데이터의 타입을 명시