Автор оригинала: Thomas Greco.
Next.js продолжает считаться «победой» среди ряда разработчиков повсюду. Если бы вы не могли догадаться, я один из них! Чтобы помочь свету света на некоторые причины, по которым я люблю рамки, я посвятил, чтобы собрать серию постов на тему. Во-первых, сначала я собираюсь резать право на погоню и пролить свет на несколько удивительных вещей, которые Main.js делает возможным.
Простота использования
Любой, кто использовал технологию, скажет вам, насколько легко начать создавать проект с помощью Next.js. У вас может быть приложение, так как быстро, так как компьютер может установить необходимые пакеты … серьезно.
Ниже приведено все, что нужно для создания оболочки для приложения.
npm init -y # creates package.json npm install react react-dom next # installs necessary dependencies mkdir pages && touch pages/index.js
Предоставлено, что вы Package.json’s Сценарий объект был изменено правильно , вы можете вставить код ниже в Страницы/index.js , бегите NPM запустить dev И посмотрите, что вы примените к жизни.
import React from 'react';
export default ({title = 'How tight is this next.js thing?'}) => {title}
;
<Код> Страницы действует как наш маршрутизатор в Next.js. Если мы добавили один и тот же код Toa New файла с именем страницы/о.js а потом посетил localhost: 3000/о , мы увидим, что наш компонент отображается, а next.js позаботился о маршрутизации для нас! Теперь давайте продолжим еще несколько прохладных вещей.
Автоматическое расщепление кода
Любой программист в настоящее время скажет вам, насколько важно расщепление кода, чтобы обеспечить производительность приложения оптимально. Как это говорит о том, Код расщепления позволяет нам Сплит Наш прикладной код в серии легких пучков. Вместо загрузки всего нашего JavaScript наше приложение загрузит только необходимый комплект. WebPack – это инструмент, наиболее связанный с этим процессом. Вместо того, чтобы настроить WebPack для выполнения этого, мы можем полагаться на Next.js! Пусть «лучше понять, как это достигнуто, чтобы мы могли лучше понять, что происходит.
Ниже показан пример .Next Каталог создан из работает Следующая сборка Отказ
Внутри .Next Мы видим Пакеты папка. Когда наш Следующая сборка Runs, он использует WebPack для генерации связки на основе нашего приложения Страницы каталог. Страницы Выступает в качестве файловой системы, которая позволяет легко нацелиться на этот каталог и добиться успеха в пакете нашего кода без нас, чтобы сделать вещь. Кроме того, приложение загрузит index.js Пакет, когда посетитель попадает в / маршрут. Если пользователь потом посещает /Блог Маршрут тогда index.js Пакет будет поменяться для blog.js пучок.
Предварительная выборка
Предварительная обработка выбирает, где выключается расщепление кода. Next.js Позволяет все наши оптимизированные пакеты кода, которые будут наращиваться за сценами.
Чтобы использовать преимущества предварительной выборки, все пользователи должны сделать, это добавить Предварительная выборка атрибут их состав компонентов.
// Will NOT prefetch route // Will have response cached and ready to go :)
Когда Next.js видит Предварительная выборка Он предоставит услугу для соответствующего маршрута, который загрузит весь JavaScript за кулисами. Я, вместе с другими разработчиками был изначально под впечатлением, что это волшебство Предварительная выборка Атрибут будет провозить служебный работник, который будет кэш в блоге в блоге My Chickaton. В конце концов, я связал с ними с Предварительная выборка ! Оказывается, что это на самом деле лучше, что мы должны провести наш собственный сервис, чтобы выполнить это. Это также огромный пример того, как The Tools Next.js предоставляет пользователям, настолько решающими, но до довольно непининой. Next.js не хочет, чтобы не делать с тем, как вы обрабатываете свои данные. Они просто хотят поставить инструменты, необходимые для вас, чтобы справиться с ним наилучшим образом.
Сервер бокового рендеринга
Я до сих пор не охватил тот факт, что Next.js допускает весь наш код приложений для использования визуализации боковых серверов (SSR), обеспечивая таким образом Преимущества, которые приходят с этим Отказ Используя SSR, мы …
- Устранить необходимость клиента к загрузке кода, наличие HTML, готов в ответе.
- Может предоставить пользователям первоначальный визуализацию представления приложения при загрузке кода на заднем плане.
- Развертывайте SEO дружественные приложения, которые являются как индексируемыми, так и неполными.
- Сделайте бесчисленные более удивительные вещи с JavaScript.
Кроме того, Next.js делает его Super легко определить пользовательские маршруты на сервере, используя рамки по вашему выбору или, если вы хотите, вы можете катить свой собственный сервер. Как и многие разработчики JavaScript, у меня много опыта использования ExpressJS, поэтому я смог применить эти знания, чтобы создать пользовательскую бэкэну с несколькими линиями кода.
Посмотрев на Проекты репо , вы увидите множество примеров с фреймворками, такими как Express, KOA и HAPI, дополнительно показывая, как расширяется Next.js действительно. Next.js просто предоставляет все эти удивительные преимущества, и давайте разработчиком выбрать и выбрать, как они хотят использовать их.
HMR и сообщение об ошибках
Эффективность Замена горячего модуля (HMR) сделал это обязательным для процесса разработки. Вместо перезагрузки всего приложения, когда код изменен, HMR будет воссоздать только модули, которые были изменены. Домашняя страница WebPack описывает практику как «Livereload для каждого модуля», так как вы можете изобразить, это позволяет Next.js придет оснащен технологическим процессом разработки, но он не останавливается. Пользователи быстро узнают о удивительных сообщениях об ошибках, которые Next.js сразу же отображается в браузере, когда код не имеет правильной.
Да, вы слышали это правильно. Я сказал: «Удивительные сообщения об ошибках». Конечно, я должен быть сумасшедшим. Ну, посмотрите сами. Я записал быстрый клип этого в действии.
Сначала мы видим, что приложение правильно отображается в браузере. Чтобы продемонстрировать возможности Next.js, затем увидеть ошибку в результате меня, удаляя > Символ от моего JSX. Независимо от того, насколько маленькими эти ошибки могут вызвать серьезные головные боли из-за всех видов ерунды, поэтому я подумал, что это предоставило хороший пример Next.js мгновенно поднимая ошибку, и она не останавливает точны файла и даже строку, на которой это Ошибка происходит таким образом отслеживание ошибок Breeze. Каждый разработчик знает борьбу проведения больше времени, чем они будут готовы признать, что найдя ошибку, только чтобы выяснить, что проблема была смущенно тривиальной. Next.js устраняет эту проблему и позволяет разработчикам работать с большой эффективностью.
Последние мысли
Надеюсь, теперь вы начинаете осознавать, насколько мощным из рамок Zeit создал с помощью Next.js. В моем следующем посте я собираюсь погрузиться глубже в Next.js и, в частности, мой опыт работы его. Тем временем я настоятельно рекомендую вам проверить еще один домой, которую Zeit выпустил людям!
Дополнительные ресурсы
- Next.js repo.
- Узнать Next.js – Удивительно для начинающих !!!
- Zeit Blog – Next.js 3
- Zeit Slack.
- Awesome-leardjs