nextjs roadmap

A continuación encontrará una hoja de ruta integral que muestra el viaje para convertirse en un ingeniero de productos de Next.JS en 2023. Inicialmente diseñado para los miembros de nuestro equipo en Blazity, estamos encantados de compartir esta hoja de ruta con la comunidad para ayudar a los aspirantes a desarrolladores experimentados por igual.

¡Quédate en el bucle! ¿Das una estrella y reloj? El repositorio de GitHub para recibir una notificación sobre contenido y actualizaciones frescas.

Si está buscando contratar a un especialista en Next.js, envíenos un mensaje a [email protected].

¿Qué significa el ingeniero de productos?

Los ingenieros de productos enfatizan toda la experiencia del usuario, combinando frontend, backend y diseño. A diferencia de los desarrolladores de "FullStack", tienen una comprensión amplia, no profunda, de las tecnologías, aplicándolos para crear productos sin costuras. Priorizan la implementación rápida y los comentarios de los usuarios. En el espectro de ingeniería, se centran en las características centradas en el usuario. La industria está haciendo la transición del título de "Ingeniero FullStack" al "Ingeniero de Productos", destacando un papel más amplio que solo la codificación.

Descargo de responsabilidad

El propósito de esta hoja de ruta es darle una idea sobre el paisaje. La hoja de ruta lo guiará si está confundido sobre qué aprender a continuación, en lugar de alentarlo a elegir lo que es moderno y de moda. Debe crecer una comprensión de por qué una herramienta sería más adecuada para algunos casos que la otra y recuerda que la cadera y la moda no siempre significan el más adecuado para el trabajo.

Hoja de ruta

Recursos

1. Fundamentos:

   1. Reaccionar
   2. Mecanografiado
      1. TS -RESET: un reinicio de CSS para TypeScript, mejorando los tipos para las API de JavaScript comunes
   3. Next.js (marcos similares: hidrógeno, gatsby, remix)

2. Técnicas de representación:

   1. Transmisión
   2. SSG (generación de sitios estática)
   3. SPR (pre-renderizado sin servidor)
   4. ISR (regeneración estática incremental)
      1. Fijado
      2. Bajo demanda
   5. CSR (representación del lado del cliente)
   6. SSR (representación del lado del servidor)
   7. Modo de vista previa

3. Styling & UI:

   1. Preprocesadores:
      1. Hablar con descaro a
      2. Postcss
      3. Menos
   2. CSS en JS:
      1. Emoción
      2. Componentes de estilo
      3. Sistema de estilo
      4. Extracto de vainilla
      5. Linaria
      6. Módulos CSS
      7. Vellón de cola
   3. Bibliotecas de componentes:
      1. Radix-ui
      2. antd
      3. nextui
      4. ariakit
      5. espectro de reaccionamiento
      6. mui
      7. marina
      8. chakra
      9. fluentui
      10. mantil
      11. sin cabeza

4. Enrutadores:

   1. Enrutador de aplicaciones
      1. Componentes del servidor
      2. Componentes del cliente
      3. Diseños
   2. Enrutador de páginas

5. Actuación

   1. Hidratación
      1. Hidratación progresiva
      2. Hidratación selectiva
      3. Reanudación
   2. Siguiente/Imagen
   3. Siguiente/Script
   4. Siguiente/fuente
   5. Bundleanalyzer
   6. Ciudad de fiesta

6. Despliegue

   1. Alojamiento
      1. Velo
      2. GCP
      3. AWS
      4. Netlificar
      5. Azur
      6. Marco de la nube
      7. Ferrocarril
      8. Prestar
      9. Mosca.io
      10. Océano digital
   2. CDN
      1. Marco de la nube
      2. Frente a la nube
      3. Keycdn
      4. Azurecdn
      5. Cloudcdn
      6. Rápidamente
      7. Akamai
   3. Multizonas
   4. IAC
      1. Sst.dev
      2. Pulumi
      3. Terraformado

7. Gestión estatal

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

8. Aglutinantes

   1. Pájaro web
   2. Turbopack

9. Pruebas

   1. E2E
      1. Dramaturgo
      2. Ciprés
      3. Testcafe
   2. Unidad
      1. Broma
      2. Vitest
   3. Integración
      1. Biblioteca de pruebas reaccionadas
   4. Visual
      1. Libro de cuentos
      2. Docz
      3. React StyleGuidist
      4. Reaccionar cosmos

10. Comunicación API

    1. DESCANSAR
       1. TanStack Query (también funciona con GraphQL)
       2. SWR (también funciona con GraphQL)
    2. Gráfico
       1. Apolo
       2. Relé
       3. Urql
       4. Requisito gráfico
    3. Enchufes web
       1. Socket.io
       2. Hábilmente
       3. Convexo
       4. Arribista
       5. Pubnub
       6. Base de datos de Firebase Real en tiempo
       7. Supabase
    4. Rutas API / manejadores de ruta
    5. GRPC
    6. TRPC

11. i18n

    1. siguiente traductor
    2. lingüista
    3. I18Next
    4. reaccionar

12. Arquitectura

    1. Modular
    2. Diseño con cinturón de características
    3. Monorreo
       1. Turborepo
       2. Nx
       3. Lerna
    4. Monolito

13. SEO

    1. próxima vez
    2. @Vercel/OG

14. Auténtico

    1. NextAuth
    2. Hierba de hierba
    3. Pasaporte

15. Observabilidad

    1. Opentelemetría
    2. Datadog
    3. Nueva reliquia
    4. Centinela

? Envolver

¿Sientes que hay espacio para mejorar en alguna sección de la hoja de ruta? Considere abrir un PR con sus sugerencias o marcar cualquier inquietud a través de problemas. Estamos comprometidos con la mejora continua, por lo que es posible que desee ver/estrenar este repositorio para futuras actualizaciones.

? Contribución

¡Las contribuciones siempre son bienvenidas! Para contribuir, siga estos pasos:

1. Bifurca el repositorio.
2. Cree una nueva rama con un nombre descriptivo.
3. Haga sus cambios y compromételos.
4. Empuje sus cambios al repositorio bifurcado.
5. Cree una solicitud de extracción y revisaremos sus cambios.

? Comunidad

Si está buscando ayuda o simplemente desea compartir sus pensamientos sobre el proyecto, le recomendamos que se una a nuestra comunidad de Discord. Aquí está el enlace: https://blazity.com/discord. Es un espacio donde intercambiamos ideas y nos ayudamos unos a otros. Se agradece el aporte de todos, y esperamos darle la bienvenida.