nextjs roadmap

아래에는 2023 년에 유능한 Next.js 제품 엔지니어가되기위한 여정을 보여주는 포괄적 인 로드맵이 있습니다. 처음에는 Blazity의 팀원들을 위해 설계되었으며,이 로드맵을 커뮤니티와 공유하여 야심 찬 개발자 모두를 돕게되어 기쁩니다.

루프에 머물러! 별을 줘서 시청 하시겠습니까? Github Repo는 새로운 콘텐츠 및 업데이트에 대한 알림을받습니다.

다음에 JS 전문가를 고용하려면 [email protected]으로 메시지를 보내십시오.

제품 엔지니어는 무엇을 의미합니까?

제품 엔지니어는 전체 사용자 경험을 강조하고 프론트 엔드, 백엔드 및 디자인을 혼합합니다. "FullStack"개발자와는 달리, 그들은 광범위하고 깊은 기술을 파악하여 완벽한 제품을 제작하는 데 적용합니다. 그들은 빠른 배포 및 사용자 피드백을 우선시합니다. 엔지니어링 스펙트럼에서는 사용자 중심 기능에 중점을 둡니다. 업계는 "FullStack Engineer"라는 제목에서 "제품 엔지니어"로 전환하여 단지 코딩보다 더 넓은 역할을 강조하고 있습니다.

부인 성명

이 로드맵의 목적은 풍경에 대한 아이디어를 제공하는 것입니다. 로드맵은 당신이 다음에 무엇을 배울지에 대해 혼란스러워하는 경우, 엉덩이와 트렌디 한 것을 골라도록 격려하기보다는 당신을 안내합니다. 하나의 도구가 다른 경우보다 어떤 경우에 더 적합한 지에 대한 이해를 높이고 엉덩이와 트렌디를 기억하는 것은 항상 작업에 가장 적합한 것은 아닙니다.

로드맵

자원

1. 기본 :

   1. 반응
   2. TypeScript
      1. TS -RESET- CSS가 TypeScript 용 CSS 재설정, 공통 JavaScript API의 유형 개선
   3. Next.js (유사한 프레임 워크 : 수소, 개츠비, 리믹스)

2. 렌더링 기술 :

   1. 스트리밍
   2. SSG (정적 사이트 생성)
   3. SPR (Serverless Pre-Rendering)
   4. ISR (증분 정적 재생)
      1. 결정된
      2. 주문형
   5. CSR (클라이언트 측 렌더링)
   6. SSR (서버 측 렌더링)
   7. 미리보기 모드

3. 스타일링 및 UI :

   1. 전처리 :
      1. 사스
      2. Postcss
      3. 더 적은
   2. JS의 CSS :
      1. 감정
      2. 스타일링 된 구성 요소
      3. 스타일링 된 시스템
      4. 바닐라 추출물
      5. 리나 리아
      6. CSS 모듈
      7. 테일 윈드 스
   3. 구성 요소 라이브러리 :
      1. radix-ui
      2. Antd
      3. Nextui
      4. 아리아 키트
      5. 반응 스펙트럼
      6. 무이
      7. Daisyui
      8. 차크라
      9. fluentui
      10. 만틴
      11. Headlessui

4. 라우터 :

   1. 앱 라우터
      1. 서버 구성 요소
      2. 클라이언트 구성 요소
      3. 레이아웃
   2. 페이지 라우터

5. 성능

   1. 수화
      1. 진보적 인 수화
      2. 선택적 수화
      3. 재개 가능성
   2. 다음/이미지
   3. 다음/스크립트
   4. 다음/글꼴
   5. 분들들레 달성
   6. 파티 타운

6. 전개

   1. 호스팅
      1. Vercel
      2. GCP
      3. AWS
      4. Netlify
      5. 하늘빛
      6. Cloudflare
      7. 철도
      8. 세우다
      9. fly.io
      10. 디지털 바다
   2. cdn
      1. Cloudflare
      2. 클라우드 프론트
      3. keycdn
      4. azurecdn
      5. cloudcdn
      6. 빠르게
      7. 아카 마이
   3. 다중선
   4. IAC
      1. sst.dev
      2. 풀 루미
      3. Terraform

7. 국가 관리

   1. Zustand
   2. 컨텍스트 API
   3. 조타이
   4. Redux 툴킷
   5. 뒷걸음질
   6. Xstate
   7. mobx

8. 번들러

   1. 웹 팩
   2. 터 밥

9. 테스트

   1. E2E
      1. 극작가
      2. 사이프러스
      3. testCafe
   2. 단위
      1. 농담
      2. 최소한
   3. 완성
      1. 반응 테스트 라이브러리
   4. 시각적
      1. 스토리 북
      2. DOCZ
      3. Styleguidist의 반응
      4. 우주의 반응

10. API 커뮤니케이션

    1. 나머지
       1. tanstack query (GraphQL과 함께 작동)
       2. SWR (GraphQL과 함께 작동)
    2. 그래프 QL
       1. 아폴로
       2. 계전기
       3. URQL
       4. GraphQL-Request
    3. 웹 소켓
       1. socket.io
       2. 유 능하게
       3. 볼록한
       4. 미는 사람
       5. pubnub
       6. Firebase 실시간 데이터베이스
       7. Supabase
    4. API 경로 / 경로 처리기
    5. grpc
    6. trpc

11. i18n

    1. 다음 번의 번역
    2. 언어
    3. i18next
    4. 반응 -Intl

12. 건축학

    1. 모듈 식
    2. 기능 분할 디자인
    3. Monorepo
       1. 터보 로포
       2. NX
       3. Lerna
    4. 하나로 된 돌

13. 서

    1. 다음시
    2. @vercel/og

14. 인증

    1. Nextauth
    2. 아이언션
    3. 여권

15. 관찰 가능성

    1. OpenTeLemetry
    2. Datadog
    3. 새로운 유물
    4. 보초

? 마무리

로드맵의 어떤 부분에도 향상의 여지가 있다고 생각하십니까? 제안과 함께 PR을 열거나 문제를 통해 우려 사항을 표시하는 것을 고려하십시오. 우리는 지속적인 개선에 최선을 다하고 있으므로 향후 업데이트를 위해이 저장소를 시청/별표를 원할 수도 있습니다.

? 기부금

기부금은 항상 환영합니다! 기여하려면 다음 단계를 따르십시오.

1. 저장소를 포크하십시오.
2. 설명 이름을 가진 새 지점을 만듭니다.
3. 당신의 변화를 만들고 그들을 헌신하십시오.
4. 변경 사항을 포크 리포지토리로 밀어 넣으십시오.
5. 풀 요청을 작성하면 변경 사항을 검토하겠습니다.

? 지역 사회

도움을 찾고 있거나 단순히 프로젝트에 대한 생각을 공유하고 싶다면 Discord 커뮤니티에 가입하는 것이 좋습니다. 다음은 링크입니다 : https://blazity.com/discord. 우리가 아이디어를 교환하고 서로를 도와주는 공간입니다. 모든 사람의 의견에 감사 드리며, 우리는 당신을 환영하기를 기대합니다.