Привет, сегодня расскажу, почему тебе стоит попробовать поработать с фреймворком Nextjs, какие его сильные стороны, а также почему это идеальный выбор для старта в веб-разработке.
Я работаю с Next.js достаточно долго, чтобы точно сказать, что это хороший универсальный фреймворк для огромного количества задач.
Работает из коробки
Next.js работает практически из коробки, создав проект одной командой, вы тут же можете увидеть результат в окне браузера. По умолчанию настроенный хот-релоадер позволит видеть изменения в коде налету, поддержка TypeScript, Tailwind, отсутствие необходимости настраивать сборщик — всё это огромный плюс для новичков.
Устанавливаем Nextjs вызовом одной команды
npx create-next-app@latest
Во время установки отвечаем на несколько вопросов, которые помогут нам настроить проект
На выходе получаем готовую структуру проекта с настроенной базовой конфигурацией.
SSR | SSG
Существует два основных варианта использования Nextjs, необходимо изначально определиться с тем, какой проект вы пишете, чтобы в дальнейшем не пришлось рефакторить слишком много кода, ведь способы рендеринга влекут за собой разные подходы к разработке кода на Nextjs.
SSR (Server-Side Rendering) – рендерить страницы на стороне сервера, нужно это, как правило, чтобы в реальном времени обрабатывать данные с бэкэнда и отдавать сгенерированные страницы пользователю.
SSG (Static Site Generation) – сгенерировать все страницы сайта и сделать его статичным, отлично подходит для лендингов и небольших сайтов, контент которых меняется достаточно редко, взамен получаем огромную скорость работы и загрузки.
Встроенная маршрутизация
Удобная система маршрутизации, которая претерпела серьезные изменения, начиная с 13 версии. Маршрутизация основана на папках, вот простой пример:
Название папки, в которой содержится файл page.tsx, становится маршрутом вашего сайта (https://sitename/blog), если папка названа [slug], то маршрут становится динамическим (https://sitename/blog/some-post-name), в будущих статьях я коснусь данной темы и подробно об этом напишу.
Обновления и поддержка
Next.js получает глобальное обновление каждый год, имеет огромное комьюнити, поэтому навряд ли вы столкнетесь с проблемой, решение которой вы не найдете в интернете.
Это действительно важно, можно не одну неделю провозиться с новым фреймворком и столкнуться с проблемами, которые перечеркнут всю проделанную работу, а решения так и не найти.
Синтаксис React
Больше всего в Nextjs мне нравится то, что вы пишете код на синтаксисе библиотеки React, не прибегая к специальным конструкциям. Вот пример простейшего кода:
В следующих статьях постараюсь более детально разобрать некоторые темы, связанные с Nextjs, а также начну серию статей про создание лэндинга с нуля.
Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт (кстати, полностью сделанный на NextJS) — in9var.ru.
#in9var #nextjs #лендинг