nextjs app router training

다음 .js 앱 라우터 교육

이 사이트는 다음에 대한 작업 방법을 이해하기 위해 Next.js 앱 라우터의 다양한 기본 패턴을 소개합니다.

이 프로젝트는 다음을 목표로합니다

• 초보자가 이해할 수있는 디자인
• 방문객들은 코드를보고 작동 방식을 이해할 수 있습니다.
• Next.js 코드에 집중할 수있는 불필요한 코드 제거
• 앱 라우터의 많은 패턴을 다루고 있습니다

예

예	친절한	상태
중첩 레이아웃	공들여 나열한 것	✅
주형	공들여 나열한 것	✅
메타 데이터를 덮어 쓸 수 있습니다	메타 데이터	✅
오픈 그래프 이미지 생성	메타 데이터	✅
서버 구성 요소	표현	✅
서버 및 클라이언트 구성 패턴	표현	✅
RSC 페이로드	표현	✅
클라이언트 및 서버 구성 요소	기초적인	✅
그룹화	경로 그룹	✅
즉시로드	로딩	✅
스트리밍으로로드	로딩	✅
사전로드 데이터로로드	로딩	✅
즉시 오류	오류	✅
찾을 수 없습니다	오류	✅
단일 세그먼트	동적 경로	✅
포획 된 세그먼트	동적 경로	✅
선택적 캐치-모든 세그먼트	동적 경로	✅
평행 경로	평행 경로	✅
조건부 경로	평행 경로	✅
노선을 가로 채기	노선을 가로 채기	✅
평행 경로가있는 모달	노선을 가로 채기	✅
캐싱 데이터	가져 오기	✅
Memoization 요청 (@server)	캐싱	✅
데이터 캐시 (@server)	캐싱	✅
전체 경로 캐시 (@server)	캐싱	✅
라우터 캐시 (@Client)	캐싱	✅
경로 처리기	경로 처리기	✅
동적 경로 세그먼트	경로 처리기	✅
서버 작업	서버 작업	✅
비 형식 요소	서버 작업	✅
낙관적 업데이트	서버 작업	✅
더러움	보안	✅
서버 전용 ENV ENV	보안	✅
쇼핑	쇼케이스	✅

새 샘플 추가

새 예제 제출에 오신 것을 환영하지만 초보자를 이해하기 위해 가능한 한 단순화 된 코드를 작성하십시오!

$ git clone [email protected]:hiroppy/nextjs-app-router-training.git
$ cd nextjs-app-router-training
$ npm i
$ mkdir src/app/examples/new-example
# adding code to src/app/examples/new-example
$ # editing src/app/examples/data.ts to add meta data, please refer type definitions
$ npm run generate
$ # editing a table in README.md 

감사합니다

• 다음 .js 앱 라우터 놀이터