nextjs roadmap

Ниже вы найдете всеобъемлющую дорожную карту, демонстрирующую путешествие, чтобы стать опытным инженером по продукту Next.js в 2023 году. Первоначально предназначен для членов нашей команды в Blazity, мы рады поделиться этой дорожкой с сообществом, чтобы помочь начинающим и опытным разработчикам.

Оставайся в курсе! Дайте звезду и смотрите? github Repo, чтобы получить уведомление о свежем контенте и обновлениях.

Если вы хотите нанять специалиста Next.js, напишите нам по адресу [email protected].

Что означает инженер -продукт?

Инженеры -продукты подчеркивают весь пользовательский опыт, смешивание, бэкэнд и дизайн. В отличие от разработчиков «Fullstack», они имеют широкое, а не глубокое понимание технологий, применяя их на создание плавных продуктов. Они определяют приоритеты быстрого развертывания и отзывы пользователей. В инженерном спектре они сосредоточены на пользовательских функциях. Индустрия переходит от названия «Инженер Fullstack» к «инженеру продуктов», подчеркивая более широкую роль, чем просто кодирование.

Отказ от ответственности

Цель этой дорожной карты - дать вам представление о ландшафте. Дорожная карта направит вас, если вы не смущаете, что нужно изучить дальше, а не побудить вас выбрать то, что является бедром и модным. Вы должны вырастить некоторое понимание того, почему один инструмент будет лучше подходит для некоторых случаев, чем другой, и помните, что бедра и модного не всегда означают лучше всего подходить для работы

Дорожная карта

Ресурсы

1. Основы:

   1. Реагировать
   2. Машинопись
      1. TS -Reset - CSS -сброс для TypeScript, улучшение типов для общих JavaScript API
   3. Next.js (аналогичные рамки: водород, Gatsby, Remix)

2. Методы рендеринга:

   1. Потоковая передача
   2. SSG (статическое генерация сайта)
   3. SPR (без сервера предварительная распродажа)
   4. ISR (постепенная статическая регенерация)
      1. Зафиксированный
      2. По требованию
   5. CSR (рендеринг на стороне клиента)
   6. SSR (рендеринг на стороне сервера)
   7. Режим предварительного просмотра

3. Стиль и пользовательский интерфейс:

   1. Препроцессоры:
      1. Набережный
      2. Postcss
      3. Меньше
   2. CSS в JS:
      1. Эмоция
      2. Стилизованные компоненты
      3. Стилизованная система
      4. Ванильный экстракт
      5. Линария
      6. CSS -модули
      7. Tailwindcss
   3. Компонентные библиотеки:
      1. Radix-ui
      2. Ант
      3. Nextui
      4. Ариакит
      5. Реакт-спектр
      6. мюй
      7. Daisyui
      8. чакра
      9. флуентуи
      10. мантин
      11. без головы

4. Маршрутизаторы:

   1. Маршрутизатор приложения
      1. Серверные компоненты
      2. Клиентские компоненты
      3. Макеты
   2. Страницы маршрутизатор

5. Производительность

   1. Увлажнение
      1. Прогрессивная гидратация
      2. Селективная гидратация
      3. Восстановление
   2. Следующее/Изображение
   3. Следующий/скрипт
   4. Следующий/шрифт
   5. Бундлеанализер
   6. Partytown

6. Развертывание

   1. Хостинг
      1. Вертел
      2. GCP
      3. AWS
      4. NetLify
      5. Лазур
      6. Cloudflare
      7. Железная дорога
      8. Оказывать
      9. Fly.io
      10. Цифровой океан
   2. CDN
      1. Cloudflare
      2. Cloudfront
      3. Keycdn
      4. Azurecdn
      5. Cloudcdn
      6. Быстро
      7. Акамай
   3. Мультизоны
   4. IAC
      1. Sst.dev
      2. Пулуми
      3. Терраформ

7. Государственное управление

   1. Zustand
   2. Контекст API
   3. Jotai
   4. Redux Toolkit
   5. Отдача
   6. Xstate
   7. Mobx

8. Бундлеры

   1. Webpack
   2. Турбопак

9. Тестирование

   1. E2e
      1. Драматург
      2. Кипарис
      3. Testcafe
   2. Единица
      1. Шутка
      2. Виды
   3. Интеграция
      1. Реагировать библиотеку тестирования
   4. Визуальный
      1. Сборник рассказов
      2. Док
      3. React styleguidist
      4. Реагировать космос

10. API Communication

    1. ОТДЫХ
       1. Запрос Tanstack (тоже работает с GraphQL)
       2. SWR (тоже работает с GraphQL)
    2. Graphql
       1. Аполлон
       2. Реле
       3. Urql
       4. Graphql-request
    3. Веб -розетки
       1. Сокет.io
       2. Умело
       3. Выпуклый
       4. Толкатель
       5. Pubnub
       6. База данных Firebase Realtime
       7. Supabase
    4. API -маршруты / обработчики маршрутов
    5. grpc
    6. TRPC

11. i18n

    1. Следующий транслат
    2. Лингви
    3. i18next
    4. React-intl

12. Архитектура

    1. Модульный
    2. Функциональный дизайн
    3. Monorepo
       1. Турборепо
       2. Нкс
       3. Лерна
    4. Монолит

13. Сео

    1. Next-Seo
    2. @vercel/og

14. Аут

    1. Nextauth
    2. Утюг
    3. Паспорт

15. Наблюдаемость

    1. Opentelemetry
    2. DataDog
    3. Новая реликвия
    4. Часовой

? Заворачивать

Почувствуете, что есть место для улучшения в любых участках дорожной карты? Пожалуйста, рассмотрите возможность открытия пиара с вашими предложениями или пометить любые проблемы с помощью проблем. Мы стремимся к постоянному совершенствованию, поэтому вы можете посмотреть/составить этот репозиторий для будущих обновлений.

? Вклад

Вклад всегда приветствуются! Чтобы внести свой вклад, следуйте этим шагам:

1. Вилка репозитория.
2. Создайте новую ветку с описательным именем.
3. Сделайте свои изменения и совершите их.
4. Встаньте свои изменения в раздвоенный репозиторий.
5. Создайте запрос на тягу, и мы рассмотрим ваши изменения.

? Сообщество

Если вы ищете помощь или просто хотите поделиться своими мыслями о проекте, мы рекомендуем вам присоединиться к нашему сообществу Discord. Вот ссылка: https://blazity.com/discord. Это пространство, где мы обмениваемся идеями и помогаем друг другу. Вклад каждого ценится, и мы с нетерпением ждем возможности приветствовать вас.