Изучение Next JS с нуля / Урок #1 – Введение в NextJS для начинающих. Что это?
Відеоурок
Полезные ссылки:
- Курс по
- Курс по
Что такое Next JS?
Чтобы понять что такое Next JS и зачем он нужен, необходимо немного окунуться в историю веб разработки. В далеком 2013 году компания FaceBook представлена новый фреймворк под названием . На тот момент это была революция в плане разработки клиентских приложений. Вы могли контролировать части вашей HTML страницы намного быстрее и удобнее, нежели при использовании обычного JavaScript или .
Но прошло всего 10 лет и вот сама компания заявляет что больше не рекомендует использовать чистый React JS для построения веб сайтов. Разработчики предлагают использовать дополнительные надстройки для работы с React JS. Одной из таковых является Next JS. Эта технология с каждым годом стает все более и более популярная и она является лишь частью React JS, без которого вообще работать не будет.
Зачем он нужен?
Вы можете задать логичный вопрос: «зачем он нужен»? React JS действительно очень классная технология, что позволяет легко управлять содержимым сайта без перезагрузок страницы. Работает React JS таким образом, что при первом заходе на сайт генерируется код и позже при переходе между страницами или при любых действиях пользователя все обновляется без перезагрузок страницы.
Это все очень круто, но проблематично с точки зрения SEO (с точки зрения оптимизации сайта). Проблема в том, что когда вы открываете просмотр кода такого сайта, то у него есть лишь один div, в котором ничего нет. Только после загрузки всего сайта, в div что-то добавляется и получается готовый веб сайт. Но проблема в том, что для поискового робота будет виден только один первоначальный пустой div без какого-либо содержания.
Такой сайт, практически, невозможно продвигать в интернете, так как он не содержит текста, а поисковые роботы по большей степени выполняют продвижение сайтов за счет текстов на сайте.
И вот тут на помощь приходит Next JS. Он добавляет дополнительный функционал для серверной обработки страниц или Server Side Rendering, сокращенно SSR. То есть теперь страница может генерироваться на стороне сервера, а далее выдается готовый результат в браузер. Теперь когда вы откроете код вы увидите что страница не будет пустой и то же самое увидит поисковой робот. Теперь такой сайт будет легко продвигать с точки зрения СЕО и у него будут все шансы стать не только максимально удобным сайтом без перезагрузок страниц, но еще и оптимизированным сайтом для поисковиков.
На что он способен?
Next JS изначально был разработан отдельной компанией Vercel. Он разрабатывался как надстройка для React JS. Сегодня эту технологию принято применять при работе с React JS. Вы сразу можете создать проект с React JS и Next Js на борту.
Next JS применяется для построения веб сайтов. Некоторые удобные фишки:
- Он удобен для создания маршрутизации или же обработки URL адресов. Такая фишка была в React JS, но здесь она выполнена лучше. Вы можете создать новый файл, назвать его «Contact» и поместить в папку «pages». При переходе по URL адресу «Contact» сразу будет открываться нужный файл. То есть нет необходимости еще создавать обработку URL.
- Можно отметить возможность получения динамических параметров из URL. Вы можете создавать динамические страницы, что будут меняться в зависимости от параметра в URL адресе.
- При создании проекта вы сразу получаете настройки для TypeScript и препроцвессора SASS. То есть вы можете писать код на JavaScript, а можете использовать TypeScript для указания типов данных ко всем объектам. То же самое с CSS. Можно использовать чистый CSS, а можно работать с препроцессором SASS и иметь набор встроенных функций для более быстрого написания стилей.
- Удобная сборка проекта. Вы можете быстро сгенерировать статичный веб сайт, что можно запускать без сервера. Также вы всегда можете выполнить выгрузку всего проекта на сервер. Таким сервером может быть все что угодно, главное чтобы там была поддержка Node JS.
Что нужно знать?
Next JS не является технологией к которой можно подойти без начальных знаний. Перед просмотром курса у вас должны быть навыки по работе с языком JavaScript и фреймворков React JS. Это базис без которого пройти курс будет невозможно.
Также будет хорошим плюсом, если будут минимальные знания в TypeScript и SASS. Они не будут столь необходимы, но со знаниями этих технологий вам будет немного проще.
И главное, вам нужно понимать что такое компоненты в React JS, что такое JSX и как вообще функционируют проекты созданные на . Без этих знаний вам будет сложно оценить преимущества Next JS, так как не будет с чем сравнить.
План курса
За курс мы с вами научимся работать с Next JS. Мы научимся создавать проекты на его основе, отслеживать URL адреса, получать динамические данные из URL, обрабатывать данные по API и выводить их на экран, а также мы ознакомимся с процессом сборки проекта в статический веб сайт.
Под конец курса мы разработаем небольшой проект с несколькими страницами, API службами и работой с данными.
Большая программа
Если вас интересует более углубленное изучение построения веб проектов с использованием языка JavaScript, то предлагаем вам нашу программу обучения. В программе вы найдете информацию как по разработке клиентской стороны, так и серверной стороны сайта. Вы можете ознакомиться с этой программой .
Також варто подивитися
