Пыль немного устарела, когда речь заходит об интерфейсной экосистеме JavaScript. У React, пожалуй, самый большой ум на данный момент, но у него много наворотов, с которыми вам нужно освоиться. Vue предлагает значительно более простую альтернативу. И еще есть Angular и Ember — которые, хотя и остаются популярными, не являются первыми рекомендациями для начала нового проекта.
Итак, хотя React является наиболее популярным вариантом, он все еще требует много инструментов для написания готовых приложений. Create React App решает многие болевые точки старта, но до сих пор не решено, сколько времени вы можете пройти без извлечения . И когда вы начнете изучать текущие передовые практики, связанные с внешними одностраничными приложениями (SPA), такими как рендеринг на стороне сервера, разбиение кода и CSS-in-JS, вы многое сможете найти.
Вот где Next приходит.
Почему дальше?
Next предоставляет простое, но настраиваемое решение для создания готовых к использованию SPA. Помните, как веб-приложения были построены в PHP (до того, как «веб-приложения» были даже термином)? Вы создаете несколько файлов в каталоге, пишете свой сценарий, и вы готовы к развертыванию Это та простота, на которую стремится Next, для экосистемы JavaScript.
Далее не совсем новый каркас как таковой. Он полностью охватывает React, но обеспечивает основу для построения SPA, следуя примерам передового опыта. Вы все еще пишете компоненты React. Все, что вы можете сделать с помощью Next, вы можете сделать с помощью комбинации React, Webpack, Babel, одной из 17 альтернатив CSS-in-JS, отложенного импорта и чего-то еще. Но при сборке с Next вы не задумываетесь о том, какую альтернативу CSS-in-JS использовать, как настроить горячую замену модулей (HMR) или какой из множества вариантов маршрутизации выбрать. Вы просто используете Next — и это просто работает .
Я хотел бы думать, что я знаю кое-что о JavaScript, но Next.JS экономит мне ОГРОМНОЕ количество времени. — Эрик Эллиотт
Начиная
Далее требуется минимальная настройка. Это дает вам все зависимости, необходимые для запуска:
$ npm install next react react-dom --save Создайте каталог для своего приложения, и внутри него создайте каталог с именем pages . Файловая система — это API. Каждый файл .js становится маршрутом, который автоматически обрабатывается и обрабатывается.
Создайте файл ./pages/index.js внутри вашего проекта со следующим содержимым:
export default () => ( <div>Hello, Next!</div> )
Заполните package.json внутри вашего проекта с помощью этого:
{ "scripts": { "dev": "next", "build": "next build", "start": "next start" } }
Затем просто запустите npm run dev в корневом каталоге вашего проекта. Перейдите на http: // localhost: 3000, и вы сможете увидеть ваше приложение, работающее во всей красе!
Просто с этим много вы получаете:
- автоматическая транспортировка и пакетирование (с Webpack и Babel)
- Горячая замена модуля
- серверный рендеринг
./pages - обслуживание статических файлов:
./static/сопоставлено с/static/.
Удачи вам в этом с помощью Vanilla React!
Характеристики
Давайте углубимся в некоторые особенности современных приложений SPA, почему они имеют значение, и как они просто работают с Next.
Автоматическое разделение кода
Почему это важно?
Разделение кода важно для обеспечения быстрого времени для первой значимой краски . В наши дни размеры пакета JavaScript достигают нескольких мегабайт. Отправка всего этого JavaScript по проводам на каждую страницу — огромная трата пропускной способности.
Как получить это с помощью Next
С Next, только заявленные импорты обслуживаются с каждой страницы. Итак, допустим, у вас есть 10 зависимостей в вашем package.json , но ./pages/index.js использует только одну из них.
страниц / login.js
import times from 'lodash.times' export default () => ( return <div>times(5, <h2> Hello, there! </h2>)</div>; )
Теперь, когда пользователь открывает страницу входа, он загружает не весь JavaScript, а только модули, необходимые для этой страницы.
Таким образом, определенная страница может иметь жирный импорт, например так:
import React from 'react' import d3 from 'd3' import jQuery from 'jquery'
Но это не повлияет на производительность остальных страниц. Более быстрое время загрузки FTW.
Scoped CSS
Почему это важно?
Правила CSS по умолчанию являются глобальными. Скажем, у вас есть такое правило CSS:
.title { font-size: 40px; }
Теперь у вас может быть два компонента, Post и Profile , оба из которых могут иметь div с title класса. Определенное вами правило CSS будет применяться к ним обоим. Итак, теперь вы определяете два правила: одно для селектора .post .title , другое для .profile .title . Это управляемо для небольших приложений, но вы можете думать только о многих именах классов.
Scoped CSS позволяет вам определять CSS с компонентами, и эти правила применяются только к этим компонентам, гарантируя, что вы не боитесь непреднамеренных эффектов при каждом прикосновении к вашему CSS.
С Next
Далее идет с styled-jsx , который обеспечивает поддержку изолированного CSS. Итак, у вас просто есть компонент <style> внутри вашей функции рендеринга React Component:
export default () => ( <div> Hello world <p>These colors are scoped!</p> <style jsx>{\ p { color: blue; } div { background: red; } `}</style> </div> )
Вы также получаете преимущества колокейшн, имея стили (CSS), поведение (JS) и шаблон (JSX) в одном месте. Больше не нужно искать имя соответствующего класса, чтобы увидеть, какие стили применяются к нему.
Динамический импорт
Почему это важно?
Динамический импорт позволяет динамически загружать части приложения JavaScript во время выполнения. Это объясняется несколькими причинами:
Это может быть связано с факторами, известными только во время выполнения (например, язык пользователя), из соображений производительности (не загружать код до тех пор, пока он, вероятно, не будет использоваться) или из соображений надежности (выживший сбой при загрузке некритического модуля).
С Next
Next поддерживает предложение динамического импорта и позволяет разбивать код на управляемые куски. Таким образом, вы можете написать такой код, который динамически загружает компонент React после начальной загрузки:
import dynamic from 'next/dynamic' const DynamicComponentWithCustomLoading = dynamic( import('../components/hello2'), { loading: () => <p>The component is loading...</p> } ) export default () => <div> <Header /> <DynamicComponentWithCustomLoading /> <p>Main content.</p> </div>
Маршрутизация
Почему это важно?
Проблема с изменением страниц через JavaScript состоит в том, что маршруты не меняются при этом. В первые дни СПА критиковались за то, что они взламывали сеть. В наши дни большинство фреймворков имеют надежный механизм маршрутизации. У React есть широко используемый пакет react-router . Однако с помощью Next вам не нужно устанавливать отдельный пакет.
С Next
Клиентская маршрутизация может быть включена через next/link компонент next/link компонент next/link . Рассмотрим эти две страницы:
// pages/index.js import Link from 'next/link' export default () => <div> Click{' '} <Link href="/contact"> <a>here</a> </Link>{' '} to find contact information. </div>
// pages/contact.js export default () => <p>The Contact Page.</p>
Мало того, вы можете добавить prefetch в компонент « Link для предварительной выборки страниц даже до щелчка по ссылкам. Это обеспечивает сверхбыстрый переход между маршрутами.
Рендеринг сервера
Большинство основанных на JavaScript SPA просто не работают без отключенного JavaScript. Тем не менее, это не должно быть так. Next рендерит страницы на сервере, и они могут быть загружены точно так же, как старые старые отрендеренные веб-страницы, когда JavaScript отключен. Каждый компонент внутри каталога pages автоматически обрабатывается сервером, а их сценарии встроены. Это дает дополнительное преимущество в производительности благодаря очень быстрой первой загрузке, поскольку вы можете просто отправить отображаемую страницу без дополнительных HTTP-запросов для файлов JavaScript.
Следующие шаги
Этого должно быть достаточно, чтобы заинтересовать Next, и если вы работаете над веб-приложением или даже приложением на основе Electron, Next предоставляет некоторые ценные абстракции и значения по умолчанию, на которые можно опираться.
Чтобы узнать больше о Next, Learning Next.js — отличное место для начала, и, возможно, это все, что вам нужно.