Многие области современной веб-разработки по-прежнему остаются нерешенными. Я впечатлен подходом Next.js к решению некоторых из этих проблем.
Библиотека React.js с ее подходом к виртуальному DOM и функциональным компонентам создала платформу для множества других улучшений. Next.js, созданный на основе React.js, не только упрощает разработку приложений с использованием React.js, но и упрощает ее.
Мне очень нравятся следующие особенности Next.js:
1. Серверный рендеринг и индексирование страниц, серверный рендеринг и индексирование по умолчанию поддерживаются для всех страниц. Компоненты React, отображаемые на стороне клиента, не могут быть проиндексированы, что влияет на возможность поиска на странице в Интернете. Next.js решает эту проблему за счет поддержки рендеринга на стороне сервера.
2. Поддержка транспиляции и компоновки, Next.js использует webpack внизу и заботится о трансляции, компоновке и соответствующей настройке. Эти конфигурации можно настраивать, но в большинстве случаев достаточно значений по умолчанию.
Таким образом, это становится очень простым для разработчиков. Все, что им нужно знать, это эти команды:
3. Автоматическое разделение кода, весь импорт объединяется и обслуживается со страницами отдельно, поэтому в браузер никогда не отправляется ненужный код. Это позволяет контролировать размер пакета приложений.
4. Поддержка CSS, Next.js идет в комплекте с styled-jsx, который предоставляет CSS с изолированной областью видимости. Styled-jsx - очень быстрая, высокопроизводительная библиотека CSS для компонентов React.js, одно из моих любимых решений CSS для приложений React.js. Также возможно использовать любое из существующих решений CSS-in-JS с приложением Next.js.
5. Обслуживание статических файлов, обслуживание статических файлов снова очень просто. Все ресурсы, помещенные в static папку , обслуживаются как статические, и к ним можно получить доступ по URL-адресу, начинающемуся с /static/.
6. Компонент заголовка. В приложениях React.js сложно изменить содержимое <head> страницы. Next.js предоставляет встроенный компонент <Head> для добавления содержимого на <Head> страницы.
7. Начальное заполнение данных для получения данных при начальной загрузке страницы. Next.js предоставляет метод жизненного цикла getInitialProps. Его статический асинхронный метод, который извлекает объекты JavaScript и заполняет их в свойствах.
8. Маршрутизация на стороне клиента Next.js поддерживает маршрутизацию на стороне клиента между страницами с использованием <Link>. Эта маршрутизация на стороне клиента ведет себя аналогично маршрутизации браузера. Предварительная загрузка новой страницы в фоновом режиме может быть включена <Link prefetch>, эта предварительная выборка позволяет загружать раньше времени. Маршрутизация в Next.js была реализована с заботой о мельчайших деталях, например, передача href во включающий тег привязки с помощью passHref, отключение изменения прокрутки вверх при переходе маршрута. Вдобавок он предоставляет множество событий, таких как onRouteChangeStart, onRouteChangeComplete и др.
По моему опыту, маршрутизация - очень сложная область, и Next.js довольно хорошо ее рассмотрел.
9. Пользовательский сервер и маршрутизация Next.js предоставляет возможность настройки маршрутов на стороне сервера. Это помогает обеспечить соответствие /xyz правильному ./pages/xyz.
10. Динамический импорт Next.js поддерживает TC39 Предложение динамического импорта. Динамический импорт поддерживается как с рендерингом на стороне сервера, так и без него.
Помимо вышеперечисленного, есть немало других удивительных функций, таких как экспорт статического HTML, встроенная обработка ошибок, настраиваемая обработка ошибок, настраиваемые конфигурации и многое другое ...
Я не являюсь членом команды Next.js, просто впечатлен их работой.
