nextjs roadmap

Abaixo, você encontrará um roteiro abrangente mostrando a jornada para se tornar um engenheiro de produtos proficientes Next.js em 2023. Inicialmente projetado para os membros de nossa equipe no Blazity, estamos entusiasmados em compartilhar esse roteiro com a comunidade para ajudar os aspirantes e desenvolvedores experientes.

Fique no circuito! Dê uma estrela e assistir? O repositório do GitHub para ser notificado sobre novos conteúdos e atualizações.

Se você deseja contratar um especialista Next.js, envie -nos uma mensagem em [email protected].

O que significa engenheiro de produtos?

Os engenheiros de produtos enfatizam toda a experiência do usuário, misturando front -end, back -end e design. Ao contrário dos desenvolvedores "FullStack", eles têm uma compreensão ampla, não profunda das tecnologias, aplicando -as a produtos sem costura. Eles priorizam a implantação rápida e o feedback do usuário. No espectro de engenharia, eles se concentram nos recursos centrados no usuário. A indústria está passando do título "Engenheiro Fullstack" para "Engenheiro de Produtos", destacando uma função mais ampla do que apenas codificar.

Isenção de responsabilidade

O objetivo deste roteiro é dar uma idéia sobre a paisagem. O roteiro o guiará se você estiver confuso sobre o que aprender a seguir, em vez de incentivá -lo a escolher o que é moderno e moderno. Você deve crescer alguma compreensão do motivo pelo qual uma ferramenta seria mais adequada para alguns casos do que a outra e lembre -se do quadril e da moda nem sempre significa mais adequado para o trabalho

Roteiro

Recursos

1. Fundamentos:

   1. Reagir
   2. TypeScript
      1. TS -RESET - A CSS Redefinir para TypeScript, melhorando os tipos de API JavaScript comum
   3. Next.js (estruturas semelhantes: hidrogênio, gatsby, remix)

2. Técnicas de renderização:

   1. Transmissão
   2. SSG (geração estática do local)
   3. SPR (pré-renderização sem servidor)
   4. ISR (regeneração estática incremental)
      1. Fixo
      2. Sob demanda
   5. CSR (renderização do lado do cliente)
   6. SSR (renderização do lado do servidor)
   7. Modo de visualização

3. Estilo e interface do usuário:

   1. Pré -processadores:
      1. Sass
      2. POSTCSS
      3. Menos
   2. CSS em JS:
      1. Emoção
      2. Componentes estilizados
      3. Sistema com estilo
      4. Extrato de baunilha
      5. Linaria
      6. Módulos CSS
      7. Tailwindcss
   3. Bibliotecas de componentes:
      1. Radix-ui
      2. ANTD
      3. Nextui
      4. Ariakit
      5. React-espectro
      6. Mui
      7. Daisyui
      8. chakra
      9. Fluentui
      10. Mantino
      11. Headlessui

4. Roteadores:

   1. Roteador de aplicativos
      1. Componentes do servidor
      2. Componentes do cliente
      3. Layouts
   2. Páginas roteador

5. Desempenho

   1. Hidratação
      1. Hidratação progressiva
      2. Hidratação seletiva
      3. Retumabilidade
   2. Próximo/imagem
   3. Próximo/Script
   4. Próximo/Fonte
   5. Bundleanalyzer
   6. Partytown

6. Implantação

   1. Hospedagem
      1. Vercel
      2. GCP
      3. AWS
      4. Netlify
      5. Azure
      6. Cloudflare
      7. Ferrovia
      8. Renderizar
      9. Fly.io
      10. Oceano digital
   2. CDN
      1. Cloudflare
      2. CloudFront
      3. Keycdn
      4. Azurecdn
      5. Cloudcdn
      6. Rapidamente
      7. Akamai
   3. Multizones
   4. IAC
      1. Sst.dev
      2. Pulumi
      3. Terraform

7. Gerenciamento do Estado

   1. Zustand
   2. API de contexto
   3. Jotai
   4. Redux Toolkit
   5. Recuo
   6. Xstate
   7. Mobx

8. Atravessores

   1. Webpack
   2. Turbopack

9. Teste

   1. E2e
      1. Dramaturgo
      2. Cipreste
      3. Testcafe
   2. Unidade
      1. Jove
      2. Vitest
   3. Integração
      1. React Testing Library
   4. Visual
      1. Livro de histórias
      2. Docz
      3. React StyleGuidist
      4. Reaja cosmos

10. Comunicação da API

    1. DESCANSAR
       1. TanStack Query (funciona com grafql também)
       2. SWR (também funciona com grafql)
    2. GraphQL
       1. Apollo
       2. Revezamento
       3. Urql
       4. GraphQL-Request
    3. Soquetes da web
       1. Socket.io
       2. Habilmente
       3. Convexo
       4. Empurrador
       5. PUBNUB
       6. Banco de dados em tempo real do Firebase
       7. Supabase
    4. Rotas de API / manipuladores de rota
    5. GRPC
    6. TRPC

11. I18n

    1. Próximo translate
    2. Lingui
    3. I18Next
    4. React-Intl

12. Arquitetura

    1. Modular
    2. Design de Recursos em Saltados
    3. Monorepo
       1. Turborepo
       2. Nx
       3. LERNA
    4. Monólito

13. SEO

    1. próximo-seo
    2. @vercel/og

14. Auth

    1. Nextauth
    2. Ironsissão
    3. Passaporte

15. Observabilidade

    1. Opentelemetria
    2. Datadog
    3. Nova relíquia
    4. Sentinela

? Embrulhar

Sinta que há espaço para melhorar em alguma seção do roteiro? Por favor, considere abrir um PR com suas sugestões ou sinalizar quaisquer preocupações por meio de problemas. Estamos comprometidos com a melhoria contínua, então você pode assistir/estrelar este repositório para atualizações futuras.

? Contribuição

As contribuições são sempre bem -vindas! Para contribuir, siga estas etapas:

1. Fork o repositório.
2. Crie um novo ramo com um nome descritivo.
3. Faça suas alterações e cometê -las.
4. Empurre suas alterações no repositório bifurcado.
5. Crie uma solicitação de tração e analisaremos suas alterações.

? Comunidade

Se você está procurando ajuda ou simplesmente deseja compartilhar seus pensamentos sobre o projeto, recomendamos que você se junte à nossa comunidade Discord. Aqui está o link: https://blazity.com/discord. É um espaço em que trocamos idéias e ajudamos um ao outro. A contribuição de todos é apreciada e estamos ansiosos para recebê -lo.